UI组件库 MCP 服务

这是一个基于Model Context Protocol (MCP)构建的UI组件库服务，提供组件文档和API查询功能。

什么是MCP？

Model Context Protocol (MCP) 是一种开放的协议，用于连接AI模型（如Claude）与外部数据源和工具的标准方式。它提供了一致的接口，允许AI模型和应用程序之间进行交互，无需为每个工具和数据源创建自定义集成。

通过npx使用

不需要安装，可以直接通过npx运行：

npx aldui-components-mcp

这将启动MCP服务器，你可以在支持MCP的AI助手中使用它。

功能特点

• 提供多种UI组件的文档和API信息
• 支持组件列表获取
• 支持组件搜索
• 支持获取特定组件的API和描述信息

可用组件

服务中包含以下组件的文档：

• AldSelect 选择器
• Avatar 头像
• Badge 徽标
• Button 按钮
• Checkbox 复选框
• DataPreviewTable 数据预览表
• Divider 分割线
• Dropdown 下拉菜单
• Empty 空状态
• Form 表单
• HighlightText 高亮文本
• IconButton 图标按钮
• Input 输入框
• InputNumber 数值输入框
• InputSearch 搜索输入框
• List 列表
• 逻辑树
• MemberPicker 选人
• Menu 导航菜单
• Modal 模态框
• OverflowCount 超出显示数量
• Pagination 分页
• Popconfirm 气泡确认框
• Popover 气泡卡片
• Progress 进度条
• Radio 单选框
• Result 结果
• ScrollArea 滚动区域
• Select 选择器
• Slider 滑动输入条
• Spin 加载
• StatusLight 状态灯
• Steps 步骤条
• Switch 开关
• Table 表格
• Tabs 标签页
• Tag 标签
• TextLink 文字链
• Tooltip 文字提示
• Tree 树形控件
• Watermark
• message 全局提示
• notification 通知提醒框

可用工具

本服务提供了以下MCP工具：

获取组件列表

获取所有可用组件的列表：

await mcp.tools.getComponentList();

搜索组件

根据关键词搜索组件：

await mcp.tools.searchComponents({ query: "按钮" });

获取组件API

获取特定组件的API文档：

await mcp.tools.getComponentApi({ componentName: "Button" });

获取组件描述

获取特定组件的描述信息：

await mcp.tools.getComponentDescription({ componentName: "Button" });

安装与运行

1. 确保已安装Node.js环境
2. 克隆仓库到本地
3. 安装依赖

npm install

4. 构建项目

npm run build

5. 运行服务

npm start

在AI助手中使用

本服务基于MCP协议，可以轻松集成到支持MCP的AI助手中，如Claude 3 Sonnet等。将此MCP服务连接到Claude或其他支持MCP的AI助手后，可以让AI助手获取组件信息，帮助用户理解和使用各种UI组件。

连接到Claude Desktop

要将此MCP服务器连接到Claude Desktop，请在Claude Desktop配置中添加以下内容：

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

测试服务

使用提供的测试脚本验证服务功能：

node test-client.js

该脚本会模拟客户端请求，测试组件列表获取、组件搜索、获取API和描述功能。

开发

开发模式下运行服务：

npm run dev

许可证

ISC