Skip to content
Fieldbook
Menu
Sign in
EN

Build interfaces with your coding agent

Choose an open component by how it looks and behaves, then let your agent retrieve its framework source through Fieldbook MCP. You and your agent work from the same catalog, examples and integration guidance.

For agents

Fieldbook is a catalog of original UI components and interface guidance for people and coding agents. Framework versions include React, Vue, Svelte, Astro and HTML where available.

Open and member access

Open component pages include descriptions, live previews, controls and source. Public member pages show only a title, category, still thumbnail, short silent preview video and access links. Member content requires an active Pro membership or an owner account, including through MCP. Authentication alone does not grant member access.

MCP setup

Create an API key in your dashboard. Set FIELDBOOK_TOKEN in the environment of your MCP client, then use the configuration for your client below. Keep keys out of committed configuration files.

Authentication: 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}"
      }
    }
  }
}

Other clients: connect using Streamable HTTP at the MCP endpoint and send Authorization: Bearer with your token.

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

Authentication

Every MCP tool requires an authorized bearer token: a Fieldbook API key or a supported OAuth token. Public discovery files and open component pages require no authentication.

OAuth-capable clients can use the protected-resource discovery URL below when OAuth is configured on the deployment. Follow the authorization server returned by discovery. If OAuth is unavailable, use a client that supports an API-key bearer header.

/.well-known/oauth-protected-resource

Rate limits

Free: 60 tool calls per minute. Pro and owner: 600. Limits use a 60-second window per account within each server instance. Respect retryAfterSeconds on rate_limited errors. Search is free; successful get_component retrieval costs 1 credit; generate_design_system costs 2. Owner credits are unmetered.

Pricing

Pro: USD 14.99 per month. Public checkout is closed. Individual component purchases are unavailable.

Pricing

Machine-readable resources

The version 1 JSON index uses English descriptions and stable category identifiers. Markdown twins follow /components/{slug}/index.md, with /es, /de, /fr, /pt-br or /zh before /components for translations. Public machine files remain anonymous for every visitor, including members. The full llms digest covers all six languages.

Browse componentsSet up MCP

  1. Connect and establish the project context

    Create an authorized API key in your dashboard and follow the setup guide for Codex, Claude Code, Grok, Cursor or any MCP client. Ask your agent to inspect the project's framework, styling conventions and existing dependencies before selecting components.

  2. Search by the job the interface needs to do

    Use search_components with a behavior query and framework. Add access: open when you need an open component. Results include the canonical preview URL, access tier and tested frameworks. Compare the live behavior before choosing.

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

  3. Retrieve the selected implementation

    Call get_component with its slug or plate and framework. React returns the component and demo; other frameworks return their port. Inspect the returned props, dependencies, usage guidance and limitations. Keep component names and technical identifiers unchanged.

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

  4. Integrate and verify in your application

    Use get_install_command for the registry instructions or adapt the returned source and demo to your project. Connect application data and callbacks, handle loading and errors, and verify the primary action on mobile and with the keyboard. Review the changes before shipping.

Access and credit costs

Every MCP request requires a bearer token. Search, framework discovery and open installation instructions are free and rate-limited. A successful get_component costs one credit; generate_design_system costs two. Owner credit usage is unmetered. Open source can also be obtained from the website without MCP. A member request the account cannot retrieve spends no credits.

Pricing

Start from a complete interface

  • Build an operations dashboard

    Combine an analytics overview, a saved-view data grid and an audit timeline into an interface for daily operational decisions.

  • Build a team onboarding flow

    Guide a new team through setup with a checklist, invitation review and connected-app controls.

  • Build organization settings

    Compose organization settings, a team permission matrix and notification preferences with explicit save and review states.

  • Build an agent run workspace

    Bring run progress, human approvals and source citations together so a person can inspect and direct an agent's work.

Resolve common setup problems

Unauthorized
Check that FIELDBOOK_TOKEN is available to the process running your editor and that the key has not been revoked. A website sign-in does not automatically add a token to an MCP client.
No matching component or framework
Broaden the behavior query and check list_frameworks. Do not invent an unavailable port. Open the returned component URL to inspect its current framework status.
Credits exhausted or rate limited
Check your dashboard allowance. For rate limits, wait for the returned retry interval instead of repeatedly retrying. Missing components and missing source files do not spend a retrieval credit.

Component previews use illustrative local data. They do not provision databases, run agents, send messages or enforce application permissions. Successful retrieval means the source was delivered. Confirm installation and behavior in your own project.