关键词

UI组件生成样式生成设计系统自然语言界面代码生成

使用说明

项目简介

Popmelt MCP Server 是一个基于 Model Context Protocol (MCP) 构建的后端服务，专注于通过设计配置文件和自然语言指令，动态生成React UI组件的样式代码。它允许开发者定义设计规范 (Profiles)，并利用这些规范快速生成风格统一的组件，加速前端开发流程。该服务器提供 API 接口，可以与各种 MCP 客户端集成，例如 Cursor 代码编辑器和 Web 界面。

主要功能点

  • 设计规范 (Profiles) 管理: 您可以创建、管理和编辑设计 Profiles，定义品牌颜色、字体、间距、阴影等设计属性，作为生成组件样式的基础。
  • 组件样式动态生成: 服务器可以根据设计 Profile 和组件类型，动态生成 CSS 样式代码。您可以通过 API 请求，指定 Profile 和组件名称，获取相应的样式代码。
  • 自然语言指令支持: 通过集成自然语言处理 (NLP) 功能，服务器允许客户端使用自然语言指令（例如 "create a button component with olivia gray"）来生成组件，简化操作流程。
  • 组件代码模板: 服务器预置了多种常见 UI 组件（如 Button, Card, Heading, Text, Input 等）的代码模板，方便快速生成 React 组件代码框架。
  • API 接口: 提供 RESTful API 接口，用于 Profile 管理、组件样式生成、上下文信息查询等，方便客户端集成。
  • Web 界面沙箱: 内置一个 Web 沙箱环境，方便用户在线测试组件生成效果，预览和复制生成的代码。
  • Cursor 编辑器集成: 提供 Cursor 代码编辑器的集成方案，允许在编辑器内通过自然语言指令生成组件并应用样式。

安装步骤

  1. 克隆仓库

    git clone https://github.com/avantjohn/mcp-server-test-03.git
cd mcp-server-test-03

  2. 安装依赖

    npm install

  3. 启动服务器

    npm run dev

    服务器默认会在 'http://localhost:3000' 启动。请确保 Node.js 版本为 14 或更高。

服务器配置

MCP 服务器主要通过 HTTP API 提供服务，无需复杂的服务器端配置。客户端需要配置以下信息以连接到 MCP 服务器：

{
  "serverName": "Popmelt MCP Server",
  "command": "npm",
  "args": ["run", "dev"],
  "description": "启动 Popmelt MCP 服务器，用于动态生成组件样式。",
  "baseUrl": "http://localhost:3000/api",
  "healthCheckEndpoint": "/health"
}
  • 'serverName': 服务器名称，可以自定义。
  • 'command': 启动服务器的命令，这里使用 'npm'。
  • 'args': 启动命令的参数，'run dev' 是在 'package.json' 中定义的启动脚本。
  • 'description': 服务器的描述信息，方便客户端用户理解服务器用途。
  • 'baseUrl': MCP API 的基础 URL，客户端将通过此 URL 发送请求。
  • 'healthCheckEndpoint': 健康检查端点，客户端可以定期访问此端点以检查服务器状态。

基本使用方法

  1. 访问 Web 沙箱 (可选)

    在浏览器中打开 'http://localhost:8080/sandbox/'，即可进入 Web 沙箱环境。您可以在沙箱中输入自然语言指令，例如 "create a red button component"，点击 "Generate" 按钮，即可预览生成的组件样式和代码。

  2. 使用 API 接口 (客户端集成)

    MCP 客户端可以通过 HTTP POST 请求访问以下 API 端点：

    • '/api/profiles': 获取所有设计 Profiles 列表 (GET)。
    • '/api/profiles/{slug}': 获取指定 slug 的设计 Profile 详情 (GET)。
    • '/api/profiles': 创建新的设计 Profile (POST)。
    • '/api/profiles/{slug}': 更新指定 slug 的设计 Profile (PUT)。
    • '/api/profiles/{slug}': 删除指定 slug 的设计 Profile (DELETE)。
    • '/api/generate-design-system': 生成完整设计系统的 CSS 代码 (POST)，请求体参数：'{ "profile": "profile-slug" }'。
    • '/api/generate-component': 生成指定组件的 CSS 代码 (POST)，请求体参数：'{ "profile": "profile-slug", "component": "component-name" }'。
    • '/api/context': 获取系统上下文信息，例如可用的 Profiles 和组件 (GET)。
    • '/api/context/profile/{profile}': 获取指定 Profile 的详细上下文信息 (GET)。
    • '/api/context/preview/{profile}/{component}': 获取指定 Profile 和组件的预览信息 (GET)。

    客户端需要根据 MCP 协议规范，构造 JSON-RPC 请求，并通过 HTTP 发送到服务器 API 端点，并处理服务器返回的 JSON-RPC 响应。

  3. Cursor 编辑器集成 (参考文档)

    仓库中包含 Cursor 编辑器的集成方案 ('CURSOR-MCP-MAIN-README.md')，您可以参考该文档配置 Cursor 插件，实现在编辑器内通过自然语言指令生成组件。

提示

  • 首次使用前，请确保 MCP 服务器成功启动并运行在 'http://localhost:3000'。
  • 设计 Profiles 存储在服务器根目录的 'profiles' 文件夹下，您可以根据需要创建和编辑 Profile 文件。
  • 生成的 CSS 样式代码会保存在 'generated-styles' 文件夹下。

信息

分类

开发者工具

访问项目