@zilliz/zui-mcp

这是 ZUI 组件库的测试版 MCP (Model Context Protocol) 服务器，让 AI 能够智能地了解和使用 ZUI 组件。

注意: 这是测试版本，仅用于验证 MCP 功能。

功能特性

• 📋 组件列表: 获取所有可用组件及其分类
• 🔍 组件详情: 查看组件的 Props、类型定义和使用说明
• 🔎 智能搜索: 根据功能需求搜索相关组件
• 💡 使用示例: 自动生成组件使用代码示例
• 🔄 实时同步: 组件更新时，MCP 信息自动同步

安装和使用

1. 构建 MCP Server

在组件库根目录执行：

cd mcp-server
npm install
npm run build

2. 在其他项目中配置 MCP

在使用 ZUI 组件库的项目中，配置 Claude Code 的 MCP 设置：

方法 1: 本地路径（开发时）

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

方法 2: npm 包（生产环境）

将 MCP server 发布为独立的 npm 包后：

{
  "mcpServers": {
    "zui-components": {
      "command": "npx",
      "args": ["@zilliz/zui-mcp-server"]
    }
  }
}

3. 使用 MCP 工具

配置完成后，AI 可以使用以下工具：

list_components

列出所有可用组件：

使用 list_components 工具查看所有 ZUI 组件

get_component_info <组件名>

获取组件详细信息：

使用 get_component_info ZButton 获取 ZButton 组件的详细信息

search_components <关键词>

搜索相关组件：

使用 search_components "按钮" 搜索按钮相关组件

get_component_examples <组件名>

获取使用示例：

使用 get_component_examples ZDataGrid2 获取数据表格的使用示例

工作原理

1. 类型解析: 自动解析 TypeScript 类型定义文件，提取组件 Props 信息
2. 示例提取: 从 Storybook 文件中提取真实的使用示例
3. 智能分类: 根据功能对组件进行分类（按钮类、输入类等）
4. 实时同步: 直接读取源代码文件，确保信息始终最新

开发和维护

目录结构

mcp-server/
├── src/
│   ├── index.ts      # MCP 服务器主文件
│   ├── analyzer.ts   # 组件分析器
│   └── tools.ts      # MCP 工具实现
├── package.json
├── tsconfig.json
└── README.md

添加新组件支持

当在 ZUI 中添加新组件时：

1. 确保组件在 src/core/index.tsx 中正确导出
2. 为组件添加 TypeScript 类型定义
3. 创建 Storybook stories（可选）
4. MCP server 会自动发现新组件

本地测试

# 开发模式运行
npm run dev

# 构建
npm run build

# 启动服务器
npm start

AI 使用最佳实践

1. 优先查询: AI 应该先使用 list_components 了解可用组件
2. 精确搜索: 使用 search_components 根据需求找到合适的组件
3. 详细了解: 使用 get_component_info 获取组件的完整信息
4. 参考示例: 使用 get_component_examples 获取实际可用的代码示例

这样 AI 就能智能地选择和使用 ZUI 组件，提高开发效率！