基于 @modelcontextprotocol/sdk 构建的 San 组件生成工具。
功能特点
- 快速生成 San 组件基础结构
- 支持 TypeScript 类型定义
- 自动集成 Cosmic UI 组件库
- 提供组件样式文件生成
快速开始
# 全局安装
npm install -g mcp-tool
# 或者使用 yarn
yarn global add mcp-tool
项目结构
mcp-tool/
├── src/
│ ├── tools/ # MCP 工具目录
│ │ └── san/ # San 组件生成工具
│ │ ├── config/ # 配置文件
│ │ └── index.ts # 工具实现
│ └── index.ts # 服务器入口文件
├── package.json
└── tsconfig.json
配置 Cursor
在 Cursor 配置中添加以下配置：
{
"mcpServers": {
"mcp-tool": {
"command": "node",
"args": ["/[你的路径]/mcp-tool/dist/index.js"]
}
}
}
San 工具使用
工具支持以下参数：
{
componentName: string; // 组件名称（使用 PascalCase 命名规范）
description?: string; // 组件的功能描述（可选）
features?: string; // 需要包含的特性，支持：
// - template: 模板
// - style: 样式
// - computed: 计算属性
// - lifecycle: 生命周期
// - typescript: TypeScript支持
selectedComponents?: string[]; // 选择使用的 Cosmic 组件列表
}
使用示例
- 查询可用组件：
// 不传入 componentName 时，返回所有可用的 Cosmic 组件列表
{
"componentName": ""
}
- 生成组件：
{
"componentName": "MyComponent",
"description": "这是一个示例组件",
"features": "template,style,typescript"
}
开发指南
- 克隆项目
git clone [项目地址]
cd mcp-tool
- 安装依赖
- 开发模式
- 构建项目
注意事项
- 生成的组件默认包含 Button 组件作为示例
- 组件名称必须使用 PascalCase 命名规范
- 样式文件使用 Less 预处理器
License
MIT