关键词

设计系统CSS生成上下文服务动态设计UI组件

使用说明

项目简介

Popmelt MCP Server 是一个基于 Node.js 和 Express.js 构建的后端服务器，旨在为大型语言模型（LLM）驱动的设计应用提供上下文信息和功能。它通过管理设计系统 profiles，并提供 API 接口来按需生成 CSS 代码，从而实现动态的设计系统和 UI 组件生成。虽然项目名称包含 "MCP"，但实际通信协议为 RESTful API 而非 JSON-RPC。

主要功能点

  • 动态 Profile 处理: 从 '/profiles' 目录读取和处理 JSON 格式的设计系统 profiles。
  • CSS 生成引擎: 基于 profiles 中定义的属性和权重生成现代 CSS 代码。
  • 设计 Token 系统: 全面支持 CSS 变量和现代设计 tokens。
  • 组件变体和状态: 处理组件的变体、状态（如 hover, focus, active）和嵌套元素。
  • 上下文提供: 提供 API 接口以检索设计系统上下文信息，用于更好的 profile 可视化和 LLM 应用集成。
  • RESTful API: 提供完整的 RESTful API 用于 profile 应用、生成和管理。
  • 可视化前端: 包含一个交互式仪表盘，用于设计系统生成和预览。

安装步骤

  1. 克隆仓库: 
    git clone https://github.com/avantjohn/mcp-server-test-01.git
  2. 进入项目目录: 
    cd mcp-server-test-01
  3. 安装依赖: 
    npm install

服务器配置

为了让 MCP 客户端连接到 Popmelt MCP Server，您需要提供以下服务器配置信息。请注意，Popmelt MCP Server 使用 RESTful API 而非 JSON-RPC，客户端需要适配 RESTful API 调用方式。以下是一个 JSON 格式的配置示例：

{
  "serverName": "Popmelt Design System Context Server",
  "command": "npm",
  "args": ["start"],
  "description": "启动 Popmelt 设计系统上下文服务器，提供设计 profiles 和 CSS 生成服务。",
  "baseUrl": "http://localhost:3000/api"  // 服务器 API 基础 URL，客户端所有请求都将基于此 URL 构建
}

参数注释:

  • 'serverName': 服务器的名称，可以自定义，用于在 MCP 客户端中标识服务器。
  • 'command': 启动服务器的命令，这里使用 'npm'，假设您的环境中已安装 Node.js 和 npm。
  • 'args': 启动命令的参数，'["start"]' 对应 'package.json' 中定义的启动脚本，即运行 'npm start'。
  • 'description': 服务器的描述信息，方便客户端用户理解服务器的用途和功能。
  • 'baseUrl': 重要: 服务器 API 的基础 URL，设置为 'http://localhost:3000/api'。MCP 客户端需要通过此 URL 发送 RESTful API 请求。例如，获取 profiles 列表的完整 URL 将是 'http://localhost:3000/api/profiles'。请确保客户端配置的 'baseUrl' 与服务器实际运行地址和端口一致。

基本使用方法

  1. 启动服务器: 在项目根目录下，运行以下命令启动 Popmelt MCP Server：

    npm start

    服务器默认运行在 'http://localhost:3000'。您可以在终端看到 "Popmelt MCP Server running on port 3000" 的提示信息。

  2. 访问可视化前端 (可选):
    在浏览器中访问 'http://localhost:3000'，可以使用可视化界面浏览设计系统 profiles，生成和预览 CSS。此前端界面可以帮助您理解 profiles 的结构和服务器的功能。

  3. 使用 API 接口 (MCP 客户端集成):
    MCP 客户端需要通过发送 HTTP 请求到服务器提供的 RESTful API 端点来获取设计系统上下文信息和生成 CSS 代码。以下是一些基本 API 使用示例（请参考仓库 README.md 中的 "API Endpoints" 部分获取更详细的 API 文档）：

    • 获取 Profiles 列表:
      发送 'GET' 请求到 'http://localhost:3000/api/profiles'，服务器将返回包含可用设计系统 profiles 的 JSON 响应。

    • 生成完整设计系统 CSS:
      发送 'POST' 请求到 'http://localhost:3000/api/generate-design-system'，并在请求体中包含 JSON 数据 '{ "profile": "profile-slug" }'，其中 '"profile-slug"' 是您要生成 CSS 的 profile 的 slug。服务器将返回包含完整设计系统 CSS 代码的 JSON 响应。

    • 获取组件预览信息:
      发送 'GET' 请求到 'http://localhost:3000/api/context/preview/{profile}/{component}'，例如 'http://localhost:3000/api/context/preview/neon-horizon/button'，服务器将返回包含 HTML 预览代码和 CSS 代码的 JSON 响应，用于展示特定 profile 下组件的样式。

    MCP 客户端需要根据服务器提供的 API 文档，构造合适的 HTTP 请求，并解析服务器返回的 JSON 响应，以获取所需的设计系统上下文信息和 CSS 代码，从而驱动 LLM 应用的设计生成功能。

信息

分类

开发者工具

访问项目