Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@MCP Toolgenerate a login form component with template, style, and typescript features"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
mcp-tool
基于 @modelcontextprotocol/sdk 构建的 San 组件生成工具。
功能特点
快速生成 San 组件基础结构
支持 TypeScript 类型定义
自动集成 Cosmic UI 组件库
提供组件样式文件生成
Related MCP server: Calculator MCP Server
快速开始
# 全局安装
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
安装依赖
yarn install
开发模式
yarn watch
构建项目
yarn build
注意事项
生成的组件默认包含 Button 组件作为示例
组件名称必须使用 PascalCase 命名规范
样式文件使用 Less 预处理器
License
MIT