私有组件 MCP 工具接入指南

简介

私有组件 MCP 工具是一个基于 Model Context Protocol (MCP) 协议的组件代码生成服务，通过与 Dify AI 平台集成，支持文本和图像输入的组件代码生成。

接入方式

方式一：stdio标准输入输出

前置条件

• 已安装 Node.js 环境（版本号 >= 18，推荐最新的 LTS 版本）
• 任意一个支持 MCP 的 IDE：
  • Cursor
  • VSCode + Cline 插件
  • 其它

macOS/Linux配置

{
    "mcpServers": {
        "私有组件": {
            "name": "私有组件代码生成 MCP 工具",
            "description": "生成组件代码的工具，基于 MCP 协议",
            "command": "npx",
            "args": [
                "-y",
                "@2345mfe/private-component-mcp@latest"
            ],
            "env": {
                "API_KEY": "xx"
            }
        }
    }
}

Windows配置

{
    "mcpServers": {
        "私有组件": {
            "name": "私有组件代码生成 MCP 工具",
            "description": "生成组件代码的工具，基于 MCP 协议",
            "command": "cmd",
            "args": [
                "/c",
                "npx",
                "-y",
                "@2345mfe/private-component-mcp@latest"
            ],
            "env": {
                "API_KEY": "xx"
            }
        }
    }
}

方式二：本地部署

克隆项目并在本地运行服务

# 拉取仓库
git clone [email protected]:ued/fee/private-component-codegen-mcp.git

# 安装依赖
yarn

# 启动服务
yarn start:sse:dev

Cursor mcp.json配置

{
    "mcpServers": {
        "私有组件": {
            "url": "http://localhost:3000/sse",
            "enabled": true,
            "forceUrl": true
        }
    }
}

方式三：SSE远程服务

仅需在 mcp.json 中配置即可接入远程服务

{
    "mcpServers": {
        "私有组件": {
            "url": "http://ai.ued.2345.cn/sse",
            "enabled": true,
            "forceUrl": true
        }
    }
}

功能特点

• AI 驱动生成：基于大模型的智能代码生成，通过自然语言描述快速创建高质量前端组件
• 实时流式响应：采用SSE技术提供流式响应，保证AI生成内容的即时反馈
• MCP协议支持：完整支持模型上下文协议，实现AI与开发环境的深度融合
• 多模态输入：支持图像和文本的多模态输入，能够从设计图或参考UI直接生成代码实现

项目结构

src/
├── index.ts           # 标准 MCP 服务器入口文件（stdio）
├── sse-server.ts      # SSE MCP 服务器入口文件（Web API）
├── dify-command-tool.ts # 命令行工具入口文件
├── static/           # 静态资源目录
└── tools/            # 工具库

API端点

• GET / - Web 界面首页
• GET /health - 健康检查端点，返回 {"status": "ok"}
• GET /sse - 建立 SSE 连接
• POST /messages - 向 SSE 连接发送消息

使用流程

1. 建立连接：通过SSE协议连接到服务器，建立实时通信通道
2. 发送请求：描述需要生成的组件或上传UI设计图像
3. 接收生成：实时获取AI生成的组件代码
4. 集成应用：将生成的组件集成到您的前端项目中

开发指南

环境要求

• Node.js >= 18
• TypeScript
• 安装依赖：yarn 或 npm install

启动命令

# 启动标准 MCP 服务器
yarn start:dev

# 启动 SSE 服务器
yarn start:sse:dev

# 启动命令行工具
yarn cli:dev

构建命令

# 开发构建
yarn build

# 生产构建（包含代码压缩）
yarn build:prod