Mcp Tool
What is Mcp Tool
mcp-tool is a San component generation tool built on top of @modelcontextprotocol/sdk, designed to streamline the process of creating San components.
Use cases
Use cases for mcp-tool include generating reusable UI components for web applications, creating prototypes quickly, and maintaining consistent coding standards across a development team.
How to use
To use mcp-tool, install it globally via npm or yarn. You can then configure it in your Cursor settings and use it to generate components by specifying parameters such as component name, description, and features.
Key features
Key features include rapid generation of San component structures, support for TypeScript type definitions, automatic integration with the Cosmic UI component library, and generation of component style files.
Where to use
mcp-tool is primarily used in web development projects that utilize the San framework and require efficient component creation.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Overview
What is Mcp Tool
mcp-tool is a San component generation tool built on top of @modelcontextprotocol/sdk, designed to streamline the process of creating San components.
Use cases
Use cases for mcp-tool include generating reusable UI components for web applications, creating prototypes quickly, and maintaining consistent coding standards across a development team.
How to use
To use mcp-tool, install it globally via npm or yarn. You can then configure it in your Cursor settings and use it to generate components by specifying parameters such as component name, description, and features.
Key features
Key features include rapid generation of San component structures, support for TypeScript type definitions, automatic integration with the Cosmic UI component library, and generation of component style files.
Where to use
mcp-tool is primarily used in web development projects that utilize the San framework and require efficient component creation.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Content
mcp-tool
基于 @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
- 安装依赖
yarn install
- 开发模式
yarn watch
- 构建项目
yarn build
注意事项
- 生成的组件默认包含 Button 组件作为示例
- 组件名称必须使用 PascalCase 命名规范
- 样式文件使用 Less 预处理器
License
MIT
Dev Tools Supporting MCP
The following are the main code editors that support the Model Context Protocol. Click the link to visit the official website for more information.
