Layro MCP Server已验证已精选

什么是 Layro MCP Server？

Layro MCP Server 是 Layro 组件库的远程 MCP 服务器。该库包含 112 个可用于生产环境的 React UI 组件，使用 TypeScript 编写、Tailwind CSS 样式。你的 AI 编程工具可以搜索组件库、读取组件的 props 和用法，并安装经过测试的组件，而不是自己从头写。

Layro MCP 本身不运行 AI 模型。它为你的工具提供关于 Layro 组件的准确信息，由你的工具完成构建。它支持 Claude Code、Cursor、VS Code、Codex、Windsurf、Gemini CLI、Antigravity、Claude 应用及其他 MCP 客户端。其中 62 个组件在注册免费 Layro 账户后即可使用；Pro 组件需要终身授权。

如何使用 Layro MCP Server？

服务器地址为 https://layropro.com/api/mcp（Streamable HTTP）。搜索和组件详情无需账户即可使用。要获取组件代码，需把 https://layropro.com/account 中的 CLI token 作为请求头添加：Authorization: Bearer <token>；在保留 Authorization 自用的客户端中，可用 X-API-Key: <token>。它与 shadcn CLI 使用的 LAYRO_KEY 是同一个 token，请勿提交到代码仓库。

Claude Code

claude mcp add --transport http layro https://layropro.com/api/mcp \
  --header "Authorization: Bearer $LAYRO_KEY"

如果只需要搜索和详情，可以省略请求头这一行。然后在 Claude Code 中运行 /mcp，确认 layro 显示为已连接。

Claude Desktop 和 claude.ai

用 URL https://layropro.com/api/mcp 添加自定义连接器。Layro 说明，无法发送请求头的客户端仍可使用免费组件。

Cursor 和 VS Code

在 ~/.cursor/mcp.json（或项目中的 .cursor/mcp.json）或 VS Code 的 MCP 配置中添加 url 条目：

{
  "mcpServers": {
    "layro": {
      "url": "https://layropro.com/api/mcp",
      "headers": { "Authorization": "Bearer YOUR_LAYRO_TOKEN" }
    }
  }
}

通过 shadcn MCP 服务器使用

Layro 同时也是一个 shadcn registry。把它添加到 components.json：

{
  "registries": {
    "@layro": {
      "url": "https://layropro.com/r/{name}",
      "headers": { "Authorization": "Bearer ${LAYRO_KEY}" }
    }
  }
}

在 .env.local 中写入 LAYRO_KEY=<your Layro token>，然后运行 npx shadcn@latest mcp init --client claude（可把 claude 换成 cursor、vscode、codex 或 opencode）。Layro 建议尽量使用自己的 MCP 服务器，因为它额外提供按用途搜索、props、用法示例、权限检查和模板。

Layro MCP Server 的主要功能

• 112 个 React + TypeScript + Tailwind CSS v4 组件，内置浅色和深色模式；新组件发布当天即可使用。
• 按组件用途搜索，无需知道确切名称。
• 完整的组件信息：props、变体、npm 依赖、安装的文件、用法示例、无障碍和响应式表现。
• 安装帮助：返回 shadcn CLI 命令，以及项目中尚缺的依赖包。
• 为无法运行 shadcn CLI 的客户端提供完整源码及所有被引用的文件。
• 模板搜索，附实时预览和许可信息。
• 每次请求都在服务端校验权限；token 泄露后可重新生成，旧 token 立即失效。

Layro MCP Server 工具

服务器列出 8 个只读工具。推荐流程为 search_components → get_component → get_installation，无法运行 shadcn CLI 时改用 get_component_code。

• 组件：search_components（自然语言查询，可选分类，最多 20 条结果）、get_component、get_component_code（免费组件需要免费 token，Pro 组件需要终身授权）和 list_categories。
• 安装：get_installation 最多接受 10 个 slug、一个包管理器（npm、pnpm、yarn 或 bun）以及项目已有的依赖包。
• 模板与权限：search_templates、get_template（从不返回模板文件）和 check_access，后者说明你能否获取某个组件或模板以及原因。

Layro MCP Server 的使用场景

• “从 Layro 找一个 SaaS 定价或套餐选择组件。”
• “用 Layro 组件搭建一个仪表盘。”
• “告诉我 Layro data table 的安装说明。”
• “哪些 Layro 组件适合做分析仪表盘？”
• “用 Layro 组件创建一个深色 SaaS 仪表盘。”

Layro MCP Server 常见问题排查

• Pro 组件提示 “No source code was returned”：连接未携带 token，或该账户没有终身授权。请用 CLI token 添加请求头。
• “The credential sent with this connection was not accepted”：token 输入有误或已重新生成。请从账户页面重新复制。
• “Free with a Layro account”：免费组件也需要在连接中携带免费账户的 token。
• 工具没有出现：检查 URL 是否以 /api/mcp 结尾、客户端是否支持远程 HTTP 服务器，然后重启客户端。
• 保存文件后导入失败：把文件保存在工具给出的路径（components/ui/…），并在全局 CSS 中于 Tailwind 之后导入 styles/layro.css。