AI导哈

组件代码生成服务

一个用于组件库和设计系统的MCP服务器，支持AI助手搜索、理解并生成组件代码。

  • by PinoNoir
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 PinoNoir/sds-components-mcp

使用说明

CDS组件MCP服务器

为您的组件库和设计系统提供一个MCP（模型上下文协议）服务器，使AI助手能够搜索、理解和使用您的组件生成代码。

特点/特性

  • 组件搜索按名称、道具或功能搜索
  • 组件详情获取完整的文档，包括属性、示例和依赖项
  • 相似组件根据需求寻找替代方案
  • 属性验证检查属性是否符合库的规范
  • 代码生成生成包含正确导入和属性的模板代码

建筑

src/
├── types.ts              # TypeScript interfaces
├── config.ts             # Configuration management
├── repo-sync.ts          # Git repository synchronization
├── parsers/
│   ├── component.ts      # Parse React/TypeScript components
│   ├── story.ts          # Parse Storybook stories
│   ├── tokens.ts         # Parse design tokens
│   └── mdx.ts           # Parse MDX documentation
├── indexer.ts           # Orchestrates all parsers
├── search.ts            # Search and similarity algorithms
└── index.ts             # MCP server entry point

安装

# Install dependencies
pnpm install

# Build the project
pnpm build

配置

创建一个 .env 示例中的文件：

cp .env.example .env

配置您的仓库设置：

REPO_OWNER=your-org
REPO_NAME=your-design-system-repo
REPO_BRANCH=main
PACKAGES_PATH=packages/components,packages/tokens

使用方法

运行服务器

node dist/index.js

使用Claude Desktop进行配置

添加到您的Claude桌面配置中（~/.config/claude/claude_desktop_config.json):

{
  "mcpServers": {
    "cds-components": {
      "command": "node",
      "args": ["/path/to/cds-components-mcp/dist/index.js"],
      "env": {
        "REPO_OWNER": "your-org",
        "REPO_NAME": "your-design-system",
        "REPO_BRANCH": "main",
        "PACKAGES_PATH": "packages/components,packages/tokens"
      }
    }
  }
}

可用工具

1. 搜索组件

按名称、属性或功能搜索组件。

参数：

  • query （字符串，必填）：搜索查询
  • filterBy （字符串，可选）：按“名称”、“属性”、“功能”或“全部”进行过滤

示例：

Find all button components

2. 获取组件详细信息

检索特定组件的完整文档。

参数：

  • componentName （字符串，必填）：组件的名称

示例：

Get details for Button component

3. 查找相似组件

根据需求提出替代组件建议。

参数：

  • requirements （字符串，必填）：组件需求的描述
  • componentType (字符串，可选)：类型或类别过滤器

示例：

Find components for displaying user profiles

4. 验证组件使用情况

检查属性和模式是否符合库的规范。

参数：

  • componentName （字符串，必填）：要验证的组件
  • props (对象，必需): 要验证的属性对象

示例：

Validate Button usage with props {variant: "primary", size: "large"}

5. 生成组件代码

生成包含正确导入和属性的样板代码。

参数：

  • componentName (字符串，必填): 组件名称
  • props (数组，可选)：属性名称列表
  • includeStyles （布尔值，可选）：是否包含样式模板

示例：

Generate code for Button component

它是如何工作的

  1. 仓库同步克隆或拉取你的设计系统仓库
  2. 索引编制使用TypeScript AST解析所有组件、故事、令牌和文档
  3. 搜索使用相关性评分来查找匹配的组件
  4. 工具执行返回格式化的文档和代码片段

支持的文件类型

  • 组件: .tsx， .jsx
  • 故事： .stories.tsx， .stories.ts
  • 代币: .json， .ts， .js， .css， .scss
  • 文档： .mdx， .md

发展

# Watch mode for development
pnpm watch

# Build
pnpm build

许可证

ISC（Internet Service Company，互联网服务公司）

相关 MCP