mcpField
U
UI Beats

UI Beats

本地服务
uibeats.com开发工具23410 周前更新
代码仓库访问官网

关于 UI Beats

UI Beats MCP 服务是面向 UI Beats 动效 React 组件目录的 MCP 服务。编码 Agent 可借此搜索组件、读取完整源码与 props，并执行安装命令，无需打开网站。

主要功能

  1. 01按自然语言或名称搜索组件
  2. 02读取组件的 props 表与用法示例
  3. 03读取组件完整源码
  4. 04按分类列出全部组件
  5. 05生成 shadcn 安装命令及依赖的 npm 包

适用场景

  1. 01编码 Agent 根据描述查找动效卡片等组件
  2. 02在编写 JSX 前核对组件真实 props
  3. 03自动安装组件并同步其依赖包

MCP 相关

该服务以 MCP 服务形式向客户端暴露 search_components、get_component、list_components 与 get_install_command 四个工具。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "com-uibeats": {
      "command": "npx",
      "args": [
        "-y",
        "@uibeats/mcp"
      ]
    }
  }
}
启动命令npx -y @uibeats/mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npm@uibeats/mcp0.1.3

工具

4

收录的工具列表 · 更新于 2 周前

参数类型必填说明
limitinteger否结果的最大数量（默认值为 10）。
querystring是用通俗语言描述组件应实现的功能，或提供组件的准确名称。
categorystring否将结果限制为一个类别，例如 'card' 或 'block'。省略则搜索全部类别；list_components 会显示当前类别集合。

详细介绍

@uibeats/mcp

适用于 UI Beats 的 MCP 服务。让编码 Agent 搜索组件目录、读取组件的完整源码和属性，并安装组件，无需任何人打开网站。

安装

Claude Code：

claude mcp add uibeats -- npx -y @uibeats/mcp

Cursor、Windsurf、Claude Desktop 以及其他任何支持 mcpServers 块的工具：

{
  "mcpServers": {
    "uibeats": {
      "command": "npx",
      "args": ["-y", "@uibeats/mcp"]
    }
  }
}

工具

工具功能
search_components根据自然语言查询或名称，对目录中的组件进行排序
get_component获取单个组件的完整文档：属性表、用法示例和完整源码
list_components列出所有可用组件，并按类别分组
get_install_command获取准确的 shadcn 命令，以及该命令会安装的 npm 包

典型交互：Agent 调用 search_components("card that flips")，然后调用 get_component("flip-card")，在编写任何 JSX 之前读取实际属性，接着调用 get_install_command("flip-card") 并运行返回的命令。

工作原理

没有后端。该服务是一个带缓存的客户端，读取网站已发布的两个静态文件：

  • /r/components.json：搜索索引（名称、描述、属性、指导）
  • /docs/<category>/<name>.md：单个组件的规范文档

目录会在内存中缓存 10 分钟，并保留一份过期副本作为后备，因此短暂的网络故障不会导致所有工具调用都失败。

配置

变量默认值用途
UIBEATS_URLhttps://uibeats.com开发期间指向本地的 next dev
UIBEATS_URL=http://localhost:3000 npx @uibeats/mcp

开发

此软件包是独立的，不属于网站的 Yarn 安装。

cd packages/mcp
npm install
npm run build

许可证

MIT

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。