UI组件构建与验证服务

组件构建mcp

实现以下功能的MCP（模型上下文协议）服务器 组件.构建 用于分级、生成和验证UI组件的规范。

关于

此MCP服务器为AI助手提供以下工具：

• 访问完整的组件。构建规范 -嵌入并可搜索的完整文档
• 等级组件 -根据规范规则验证任何组件
• 生成符合要求的组件 -创建遵循所有最佳实践的新组件
• 搜索文档 -找到特定的模式、规则或概念

这 组件.构建规范 是一个用于构建现代、可组合和可访问的UI组件的开源标准，由 海登·布莱塞尔 和 影电.

框架支持

分级规则检查适用于任何框架的通用模式（可访问性、组合、数据属性）。

安装

适用于克劳德代码/克劳德桌面

npm install -g components-build-mcp

添加到您的Claude配置(~/.claude/claude_desktop_config.json):

{
  "mcpServers": {
    "components-build": {
      "command": "components-build-mcp"
    }
  }
}

促进地方发展

git clone https://github.com/getlokiui/components-build-mcp.git
cd components-build-mcp
npm install
npm run build

在Claude配置中添加完整路径：

{
  "mcpServers": {
    "components-build": {
      "command": "node",
      "args": ["/path/to/components-build-mcp/dist/index.js"]
    }
  }
}

可用工具

文档工具

评分和验证工具

生成工具

使用示例

配置后，询问您的AI助手：

"Show me the components.build spec section on accessibility"

"Grade this component against the spec:
export const Button = ({ children }) => <button>{children}</button>"

"Generate a Card component with composable sub-components"

"Search the spec for keyboard navigation patterns"

"What rules does the grader check for?"

规范章节

完整的组件构建规范包括：

分级规则

组件根据以下因素进行分级：

• 类型 -扩展HTML道具，导出类型，正确传播道具
• 样式 -使用cn（）实用程序、类顺序、设计标记
• 无障碍 -ARIA属性、键盘导航、语义HTML
• 构图 -单元素包装，可组合图案
• 状态 -支持受控和非受控使用
• 命名 -遵循约定（根、触发器、内容等）

HTTP API

与Vertel兼容的HTTP API也可用于非MCP使用：

# Deploy to Vercel
cd components-build-mcp
vercel --prod

终点：

• GET /?action=rules -获取所有规则
• POST /?action=grade -等级组件代码
• POST /?action=generate -生成组件
• GET /?action=quick-reference -获取备忘单

鸣谢

该项目实现了 组件.构建 规范。

规格为：

• 版权所有2023 Vercel，股份有限公司。
• 合著者： 海登·布莱塞尔 和 影电
• 根据以下许可 Apache许可证2.0

此MCP服务器是Audrey Klammer的社区项目 未正式隶属于或认可Vercel，股份有限公司。

许可证

Apache许可证2.0-请参阅 许可证 了解详情。

贡献

欢迎投稿！请先阅读组件。构建规范，以了解模式和规则。

链接

• 组件.构建 -规格
• shadcn/ui -参考实施
• 根元素 UI -图元库
• 盖特洛克 -基于此规范构建的组件库