跳至正文
Fieldbook
菜单
登录
ZH-HANS

与编程智能体一起构建界面

根据外观和行为选择公开组件，再让智能体通过 Fieldbook MCP 获取对应框架的源代码。你和智能体使用相同的目录、示例和集成指南。

面向智能体

Fieldbook 提供原创界面组件目录和界面开发指南，供开发者和编程智能体使用。组件按实际可用情况提供 React、Vue、Svelte、Astro 和 HTML 版本。

公开内容与会员内容

公开组件页面包含描述、交互预览、控件和源代码。会员组件的公开页面仅展示标题、分类、静态缩略图和访问链接。访问会员内容需要有效的 Pro 会员资格或所有者账户，通过 MCP 访问时同样如此。仅完成身份验证不会获得会员权限。

配置 MCP

在控制台创建 API 密钥。在 MCP 客户端的环境中设置 FIELDBOOK_TOKEN，然后使用下方对应的配置。请勿将密钥写入提交到代码仓库的配置文件。

身份验证：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}"
      }
    }
  }
}

Cursor · .cursor/mcp.json

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

其他客户端：使用 Streamable HTTP 连接 MCP 端点，并通过 Authorization: Bearer 请求头发送令牌。

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

身份验证

每个 MCP 工具都需要已授权的 Bearer 令牌，可以使用 Fieldbook API 密钥或受支持的 OAuth 令牌。公开目录文件和公开组件页面无需身份验证。

如果部署已配置 OAuth，支持 OAuth 的客户端可以使用下方的受保护资源发现地址，并按照返回的授权服务器完成授权。如果 OAuth 不可用，请使用支持通过 Bearer 请求头传递 API 密钥的客户端。

/.well-known/oauth-protected-resource

调用限制

Free 每分钟可调用 60 次工具，Pro 和所有者为 600 次。各服务器实例以 60 秒为窗口，按 API 密钥或 OAuth 用户分别计数。收到 rate_limited 错误时，请遵守 retryAfterSeconds 指定的等待时间。搜索免费；成功调用 get_component 消耗 1 积分，generate_design_system 消耗 2 积分。所有者的积分不计量。

价格

Pro：每月 USD 14.99。公开订阅购买尚未开放。目前不提供单个组件购买。

价格

机器可读资源

JSON 索引版本 1 使用英文描述和固定的分类标识符。Markdown 地址格式为 /components/{slug}/index.md，其他语言在 /components 前加 /es、/de、/fr、/pt-br 或 /zh。公开机器文件向所有访客提供相同的匿名内容，包括已登录的会员。完整 llms 文件涵盖全部六种语言。

浏览组件配置 MCP

  1. 连接并了解项目背景

    在控制台创建已授权的 API 密钥，并按 Codex、Claude Code 或 Cursor 配置指南操作。选择组件前，让智能体检查项目框架、样式约定及现有依赖。

  2. 按界面要完成的任务搜索

    使用 search_components 按行为和框架搜索。需要公开组件时，添加 access: open。结果包含规范预览 URL、访问级别和已测试框架。选择前先比较实时交互行为。

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

  3. 获取所选实现

    使用组件标识符或编号及框架调用 get_component。React 返回组件和演示，其他框架返回移植版本。检查返回的属性、依赖、使用指南和限制，保留组件名称及技术标识符。

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

  4. 在应用中集成并验证

    使用 get_install_command 获取注册表安装说明，或根据项目调整返回的源代码和演示。连接应用数据和回调，处理加载和错误状态，并在移动设备及键盘操作下验证主要功能。发布前检查变更。

访问权限与积分费用

每个 MCP 请求都需要 Bearer 令牌。搜索、框架发现和公开安装说明免费，并设有限流。成功调用 get_component 消耗 1 积分，generate_design_system 消耗 2 积分。所有者的积分使用不计量。公开源代码也可直接从网站获取，无需 MCP。账户无权获取的会员请求不消耗积分。

价格

从完整界面开始

  • 构建运营控制台

    将分析总览、保存视图的数据网格和审计时间线组合成日常运营决策界面。

  • 构建团队入门流程

    通过清单、邀请复核和已连接应用控件，引导新团队完成设置。

  • 构建组织设置

    组合组织设置、团队权限矩阵和通知偏好，并明确展示保存与复核状态。

  • 构建智能体运行工作区

    汇集运行进度、人工审批和来源引用，让用户检查并指导智能体的工作。

解决常见配置问题

未经授权
确认运行编辑器的进程可以读取 FIELDBOOK_TOKEN，且密钥未被撤销。登录网站不会自动为 MCP 客户端添加令牌。
没有匹配的组件或框架
扩大行为搜索范围，并检查 list_frameworks。不要编造不存在的移植版本。打开返回的组件 URL，查看当前框架状态。
积分用尽或触发限流
在控制台查看配额。遇到限流时，请等待返回的重试间隔后再试，避免反复请求。组件或源文件缺失不会消耗获取积分。

组件预览使用本地示例数据，不会配置数据库、运行智能体、发送消息或执行应用权限控制。获取成功表示源代码已交付。请在自己的项目中确认安装和运行情况。