MCP 服务器

Popmelt MCP Server

一个 MCP 服务器，提供对 Talent AI 档案的访问和动态 UI 组件样式功能，连接到 PostgreSQL 以提供包含美学特征和设计属性的详细人才档案。

README

Popmelt MCP 服务器

一个用于 Popmelt 的 MCP (模型上下文协议) 服务器，提供对 Talent AI 和风格配置文件的访问，用于动态 UI 组件样式设计。

概述

Popmelt MCP 服务器利用模型上下文协议，向 LLM 和其他应用程序公开 Talent AI 配置文件和样式设计能力。它直接连接到 Popmelt 的 PostgreSQL 数据库，以访问和提供详细的 Talent 配置文件，包括结构化元数据和加权样式属性。

功能

Talent AI 配置文件访问: 检索完整的 Talent 配置文件，其中包含其独特的审美特征和设计属性
CSS 样式生成: 直接从存储的元数据生成 CSS 样式规则
动态 UI 组件样式设计: 轻松将 Talent 驱动的设计选择集成到您的 UI 组件中
数据库集成: 直接连接到存储 Talent 配置文件的 PostgreSQL 数据库
多种传输选项: 使用 stdio 运行服务器以用于命令行工具，或使用带有 SSE 的 HTTP 用于远程服务器

项目结构

popmelt-mcp-server/
├── src/                         # 源代码
│   ├── db/                      # 数据库访问层
│   │   └── index.ts             # 数据库连接和查询函数
│   ├── utils/                   # 实用程序模块
│   │   └── css-generator.ts     # CSS 生成实用程序
│   ├── mcp-server.ts            # MCP 服务器核心实现
│   ├── server.ts                # Stdio 传输服务器
│   └── http-server.ts           # HTTP/SSE 传输服务器
├── scripts/                     # 辅助脚本
│   ├── setup-db.sql             # 用于设置数据库的 SQL
│   └── setup-db.js              # 运行 SQL 设置的脚本
├── examples/                    # 客户端使用示例
│   └── generate-css.js          # 生成 CSS 的示例脚本
├── dist/                        # 编译后的 TypeScript 输出
├── package.json                 # 项目配置
└── tsconfig.json                # TypeScript 配置

数据库模式

Popmelt MCP 服务器使用具有以下模式的 PostgreSQL 数据库：

CREATE TABLE talents (
  id VARCHAR(50) PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  description TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
  metadata JSONB NOT NULL
);

其中 metadata JSON 字段具有以下结构：

{
  "aesthetic_characteristics": {
    "style": "minimalist",
    "mood": "calm",
    "complexity": 2,
    "minimalism": 9,
    "boldness": 3,
    "playfulness": 2,
    "elegance": 8
  },
  "design_attributes": {
    "whitespace_balance": 9,
    "color_harmony": 7,
    "visual_rhythm": 6,
    "layout_density": 2,
    "texture_use": 1,
    "border_use": 2,
    "shadow_use": 3
  },
  "color_palette": {
    "primary": "#2D3748",
    "secondary": "#4A5568",
    "accent": "#38B2AC",
    "background": "#FFFFFF",
    "text": "#1A202C"
  },
  "typography": {
    "headingFont": "Inter, sans-serif",
    "bodyFont": "Inter, sans-serif",
    "scale": 1.2,
    "weight": "light",
    "letterSpacing": 0.02,
    "lineHeight": 1.5
  }
}

快速入门

前提条件

Node.js 18 或更高版本
PostgreSQL 数据库

安装

克隆此存储库
安装依赖项：
```
npm install
```
复制示例环境变量文件并使用您的数据库详细信息更新：
```
cp .env.example .env
```
设置数据库：
```
node scripts/setup-db.js
```
构建 TypeScript 代码：
```
npm run build
```

运行服务器

有两种服务器模式可用：

标准 stdio 模式（用于命令行工具和直接集成）：

npm start

带有 SSE 支持的 HTTP 服务器（用于远程访问和 Web 集成）：

npm run start:http

HTTP 服务器提供：

/sse 上的 SSE 端点，用于接收实时更新
/messages 上的 POST 端点，用于发送命令
/health 上的健康检查端点

API 参考

资源

服务器公开以下 MCP 资源：

资源 URI	描述
`talent://list`	列出所有可用的 Talent 配置文件
`talent://{id}`	按 ID 获取特定的 Talent 配置文件
`talent-attribute://{id}/{attribute}`	获取 Talent 的特定属性（支持点表示法用于嵌套属性）
`component-style://{talent_id}/{component_name}`	使用 Talent 配置文件获取特定组件的 CSS

工具

服务器提供以下 MCP 工具：

工具名称	描述	参数
`generate-css`	基于 Talent 配置文件为组件生成 CSS	`talentId`、`component`、`state`（可选）、`customProperties`（可选）
`generate-component-library`	为完整的组件库生成 CSS	`talentId`
`query-talents`	对 Talent 元数据执行只读查询	`filters`
`analyze-style-compatibility`	分析不同 Talent 风格之间的兼容性	`talentId1`、`talentId2`

提示

服务器提供以下 MCP 提示：

提示名称	描述	参数
`style-component`	用于设计组件样式的 LLM 提示	`talentId`、`component`、`requirements`（可选）
`create-talent-description`	用于创建 Talent 描述性摘要的 LLM 提示	`talentId`
`recommend-talent`	用于根据需求推荐 Talent 的 LLM 提示	`projectType`、`brandPersonality`、`targetAudience`、`aestheticPreferences`（可选）

使用示例

使用 MCP 客户端

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';

// 创建传输
const transport = new StdioClientTransport({
  command: 'node',
  args: ['dist/server.js']
});

// 创建客户端
const client = new Client(
  { name: 'example-client', version: '1.0.0' },
  { capabilities: { resources: {}, tools: {} } }
);

// 连接到服务器
await client.connect(transport);

// 列出所有 Talent
const talents = await client.listResources('talent://');

// 获取特定的 Talent
const talent = await client.readResource('talent://modern-minimalist');

// 为按钮生成 CSS
const css = await client.callTool({
  name: 'generate-css',
  arguments: {
    talentId: 'modern-minimalist',
    component: 'button',
    state: 'hover'
  }
});

// 分析两个 Talent 之间的兼容性
const compatibility = await client.callTool({
  name: 'analyze-style-compatibility',
  arguments: {
    talentId1: 'modern-minimalist',
    talentId2: 'bold-vibrant'
  }
});