Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Oberflächen mit deinem Coding-Agenten entwickeln

Wähle eine offene Komponente nach Aussehen und Verhalten und lass deinen Agenten den Framework-Quellcode über Fieldbook MCP abrufen. Ihr arbeitet mit demselben Katalog, denselben Beispielen und Integrationshinweisen.

Für Agenten

Fieldbook ist ein Katalog eigenständiger UI-Komponenten und Anleitungen für Menschen und Programmieragenten. Je nach Verfügbarkeit gibt es Versionen für React, Vue, Svelte, Astro und HTML.

Offener Zugang und Mitgliedschaft

Offene Komponentenseiten enthalten Beschreibungen, interaktive Vorschauen, Steuerelemente und Quellcode. Öffentliche Mitgliederseiten zeigen nur Titel, Kategorie, Standbild, ein kurzes Vorschauvideo ohne Ton und Zugangslinks. Mitgliederinhalte erfordern eine aktive Pro-Mitgliedschaft oder ein Inhaberkonto, auch über MCP. Die Anmeldung allein gewährt keinen Mitgliederzugang.

MCP einrichten

Erstelle einen API-Schlüssel im Dashboard. Setze FIELDBOOK_TOKEN in der Umgebung deines MCP-Clients und verwende die passende Konfiguration unten. Speichere Schlüssel außerhalb der Dateien im Repository.

Authentifizierung: Fieldbook API

Codex

codex mcp add fieldbook --url https://fieldbook.lizardi.mx/api/mcp --bearer-token-env-var FIELDBOOK_TOKEN

Claude Code · .mcp.json

{
  "mcpServers": {
    "fieldbook": {
      "type": "http",
      "url": "https://fieldbook.lizardi.mx/api/mcp",
      "headers": {
        "Authorization": "Bearer ${FIELDBOOK_TOKEN}"
      }
    }
  }
}

Grok Build · ~/.grok/config.toml

[mcp_servers.fieldbook]
url = "https://fieldbook.lizardi.mx/api/mcp"
headers = { "Authorization" = "Bearer ${FIELDBOOK_TOKEN}" }

Cursor · .cursor/mcp.json

{
  "mcpServers": {
    "fieldbook": {
      "url": "https://fieldbook.lizardi.mx/api/mcp",
      "headers": {
        "Authorization": "Bearer ${env:FIELDBOOK_TOKEN}"
      }
    }
  }
}

Andere Clients: Verbinde dich per Streamable HTTP mit dem MCP-Endpunkt und sende dein Token im Header Authorization: Bearer.

https://fieldbook.lizardi.mx/api/mcp

Authentifizierung

Jedes MCP-Werkzeug benötigt ein autorisiertes Bearer-Token: einen Fieldbook-API-Schlüssel oder ein unterstütztes OAuth-Token. Öffentliche Katalogdateien und offene Komponentenseiten benötigen keine Authentifizierung.

OAuth-fähige Clients können die unten verlinkten Metadaten der geschützten Ressource nutzen, wenn OAuth auf der Bereitstellung konfiguriert ist. Folge dem dort angegebenen Autorisierungsserver. Falls OAuth nicht verfügbar ist, verwende einen Client mit API-Schlüssel im Bearer-Header.

/.well-known/oauth-protected-resource

Aufruflimits

Free: 60 Werkzeugaufrufe pro Minute. Pro und Inhaber: 600. Die Limits gelten in einem 60-Sekunden-Fenster je Konto innerhalb jeder Serverinstanz. Beachte retryAfterSeconds bei rate_limited-Fehlern. Die Suche ist kostenlos; ein erfolgreicher get_component-Abruf kostet 1 Credit, generate_design_system kostet 2. Credits von Inhabern werden nicht gezählt.

Preise

Pro: 14,99 USD pro Monat. Der öffentliche Kaufzugang ist geschlossen. Einzelne Komponenten können nicht gekauft werden.

Preise

Maschinenlesbare Ressourcen

Der JSON-Index in Version 1 verwendet englische Beschreibungen und stabile Kategoriekennungen. Markdown-Versionen liegen unter /components/{slug}/index.md, für Übersetzungen mit /es, /de, /fr, /pt-br oder /zh vor /components. Öffentliche Maschinendateien liefern allen Besuchern einschließlich Mitgliedern denselben anonymen Inhalt. Die vollständige llms-Datei umfasst alle sechs Sprachen.

Komponenten entdeckenMCP einrichten

  1. Verbinden und den Projektkontext klären

    Erstelle einen berechtigten API-Schlüssel im Dashboard und folge der Anleitung für Codex, Claude Code, Grok, Cursor oder jeden MCP-Client. Lass deinen Agenten zuerst Framework, Gestaltungskonventionen und vorhandene Abhängigkeiten prüfen.

  2. Nach der Aufgabe der Oberfläche suchen

    Nutze search_components mit einer Verhaltensbeschreibung und dem Framework. Ergänze access: open für offene Komponenten. Ergebnisse enthalten kanonische Vorschau-URL, Zugangsstufe und getestete Frameworks. Vergleiche das interaktive Verhalten vor der Auswahl.

    search_components
{"query":"token budget","framework":"react","access":"open","limit":5}

  3. Die gewählte Implementierung abrufen

    Rufe get_component mit Slug oder Komponentennummer und Framework auf. React liefert Komponente und Demo, andere Frameworks ihre Portierung. Prüfe Props, Abhängigkeiten, Nutzungshinweise und Einschränkungen. Behalte Namen und technische Bezeichner bei.

    get_component
{"slug":"token-budget-meter","framework":"react"}

  4. Integrieren und in der Anwendung prüfen

    Nutze get_install_command für Registry-Anweisungen oder passe Quellcode und Demo an dein Projekt an. Binde Daten und Callbacks an, behandle Lade- und Fehlerzustände und teste die Hauptaktion mobil sowie per Tastatur. Prüfe Änderungen vor der Veröffentlichung.

Zugriff und Guthabenkosten

Jede MCP-Anfrage benötigt ein Bearer-Token. Suche, Framework-Abfrage und Installationsanweisungen für offene Komponenten sind kostenlos und ratenbegrenzt. Erfolgreiches get_component kostet einen Credit; generate_design_system kostet zwei. Eigentümer haben kein Credit-Limit. Offenen Quellcode gibt es auch ohne MCP auf der Website. Ein Mitgliederabruf, den das Konto nicht erhalten kann, verbraucht keine Credits.

Tarife

Mit einer vollständigen Oberfläche beginnen

Häufige Einrichtungsprobleme lösen

Nicht autorisiert
Prüfe, ob FIELDBOOK_TOKEN im Editorprozess verfügbar und der Schlüssel noch gültig ist. Eine Website-Anmeldung überträgt kein Token an den MCP-Client.
Keine passende Komponente oder Portierung
Erweitere die Suche und prüfe list_frameworks. Erfinde keine fehlende Portierung. Öffne die Komponenten-URL für den aktuellen Framework-Status.
Guthaben oder Ratenlimit erreicht
Prüfe dein Guthaben im Dashboard. Warte bei Ratenlimits das zurückgegebene Intervall ab. Fehlende Komponenten und Quelldateien verbrauchen keinen Abruf-Credit.

Vorschauen verwenden lokale Beispieldaten. Sie richten keine Datenbanken ein, führen keine Agenten aus, senden keine Nachrichten und erzwingen keine Berechtigungen. Ein erfolgreicher Abruf bestätigt die Lieferung des Quellcodes. Prüfe Installation und Verhalten in deinem eigenen Projekt.