关键词

UI样式设计设计系统CSS生成Talent AI动态UI

使用说明

项目简介

Popmelt MCP 服务器是一个基于 Model Context Protocol (MCP) 构建的后端服务，旨在为 Popmelt 应用提供 Talent AI 配置文件和 UI 组件样式设计能力。它允许 LLM 客户端通过标准化的 MCP 协议访问和利用 Popmelt 数据库中的设计资源和工具，实现动态和智能化的 UI 样式定制。

主要功能点

  • Talent AI 配置文件访问: 通过 MCP 资源 URI 获取 Talent AI 的详细配置文件，包括美学特征、设计属性、颜色调色板和排版方案等。
  • 动态 CSS 样式生成: 根据 Talent AI 配置文件，为各种 UI 组件（如按钮、卡片、输入框等）动态生成 CSS 样式代码。
  • 组件库 CSS 生成: 一键生成基于 Talent AI 配置文件的完整组件库 CSS 文件。
  • 风格兼容性分析: 分析不同 Talent AI 配置文件之间的风格兼容性，为设计决策提供参考。
  • Prompt 模板支持: 提供预定义的 Prompt 模板，支持 LLM 进行组件样式设计、Talent 描述生成和 Talent 推荐等任务。
  • 多种传输协议: 支持 Stdio (标准输入输出) 和 HTTP/SSE (Server-Sent Events) 两种传输协议，满足不同应用场景的需求。

安装步骤

  1. 克隆仓库

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

  2. 安装依赖

    确保已安装 Node.js 18 或更高版本和 PostgreSQL 数据库。然后运行：

    npm install

  3. 配置数据库

    复制 '.env.example' 文件并重命名为 '.env'，根据你的 PostgreSQL 数据库配置修改 '.env' 文件中的连接信息（PGHOST, PGUSER, PGDATABASE, PGPASSWORD, PGPORT）。

  4. 初始化数据库

    运行以下命令创建数据库表结构并填充初始数据（如果需要）：

    node scripts/setup-db.js

  5. 构建项目

    编译 TypeScript 代码：

    npm run build

服务器配置

MCP 客户端需要配置以下信息以连接到 Popmelt MCP 服务器。以下是 JSON 格式的配置示例，你需要根据选择的传输协议配置 'transport' 和 'args' 字段。

Stdio 传输配置 (用于命令行工具)

{
  "serverName": "Popmelt MCP Server (Stdio)",
  "transport": "stdio",
  "command": "npm",
  "args": ["start"]
}
  • 'serverName': 服务器名称，可以自定义。
  • 'transport': 设置为 'stdio'，表示使用标准输入输出传输协议。
  • 'command': 设置为 'npm'，表示使用 npm 命令启动服务器。
  • 'args': 设置为 '["start"]'，对应 'package.json' 中的 'start' 脚本，用于启动 'src/server.ts'。

HTTP/SSE 传输配置 (用于 Web 应用)

{
  "serverName": "Popmelt MCP Server (SSE)",
  "transport": "sse",
  "command": "node",
  "args": ["dist/http-server.js"]
}
  • 'serverName': 服务器名称，可以自定义。
  • 'transport': 设置为 'sse'，表示使用 Server-Sent Events over HTTP 传输协议。
  • 'command': 设置为 'node'，表示使用 node 命令启动服务器。
  • 'args': 设置为 '["dist/http-server.js"]'，指定 HTTP 服务器的入口文件。

基本使用方法

  1. 启动服务器

    • Stdio: 在项目根目录下运行 'npm start'。
    • HTTP/SSE: 在项目根目录下运行 'node dist/http-server.js' (或 'node dist/http-server.js'，取决于你的构建输出目录)。

  2. 使用 MCP 客户端

    你可以使用任何 MCP 客户端库（例如 '@modelcontextprotocol/sdk/client'）连接到 Popmelt MCP 服务器。客户端通过发送符合 MCP 协议的 JSON-RPC 请求与服务器交互。

    以下是一些基本操作示例：

    • 列出所有 Talent 配置文件: 使用 'client.listResources('talent://')' 获取 Talent 列表。
    • 读取特定 Talent 配置文件: 使用 'client.readResource('talent://{talentId}')' 读取指定 ID 的 Talent 配置。
    • 生成组件 CSS 样式: 使用 'client.callTool({ name: 'generate-css', arguments: { talentId: '...', component: '...' } })' 调用 'generate-css' 工具生成 CSS 代码。
    • 分析风格兼容性: 使用 'client.callTool({ name: 'analyze-style-compatibility', arguments: { talentId1: '...', talentId2: '...' } })' 调用 'analyze-style-compatibility' 工具进行风格分析。
    • 调用 Prompt 模板: 使用 'client.prompt('style-component', { talentId: '...', component: '...' })' 调用 'style-component' Prompt 模板与 LLM 交互。

    详细的使用方法和示例代码可以参考仓库的 'examples' 目录和 'README.md' 文档。

信息

分类

AI与计算

访问项目