Popmelt MCP 服务器

Popmelt 的 MCP（模型上下文协议）服务器，提供对 Talent AI 和 Taste Profiles 的访问，以实现动态 UI 组件样式。

概述

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

特征

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

项目结构

popmelt-mcp-server/
├── src/                         # Source code
│   ├── db/                      # Database access layer
│   │   └── index.ts             # Database connection and query functions
│   ├── utils/                   # Utility modules
│   │   └── css-generator.ts     # CSS generation utilities
│   ├── mcp-server.ts            # MCP server core implementation
│   ├── server.ts                # Stdio transport server
│   └── http-server.ts           # HTTP/SSE transport server
├── scripts/                     # Helper scripts
│   ├── setup-db.sql             # SQL for setting up the database
│   └── setup-db.js              # Script to run the SQL setup
├── examples/                    # Example client usage
│   └── generate-css.js          # Example script to generate CSS
├── dist/                        # Compiled TypeScript output
├── package.json                 # Project configuration
└── tsconfig.json                # TypeScript configuration

数据库架构

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://{id}`	通过ID获取特定人才资料
`talent-attribute://{id}/{attribute}`	获取天赋的特定属性（支持嵌套属性的点符号）
`component-style://{talent_id}/{component_name}`	使用人才档案获取特定组件的 CSS

工具

该服务器提供以下 MCP 工具：

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

提示

服务器提供以下 MCP 提示：

提示名称	描述	参数
`style-component`	LLM 提示组件样式	`talentId` 、 `component` 、 `requirements` （可选）
`create-talent-description`	LLM 提示：创建人才描述性摘要	`talentId`
`recommend-talent`	LLM 人才推荐提示（按要求）	`projectType` 、 `brandPersonality` 、 `targetAudience` 、 `aestheticPreferences` （可选）

示例用法

使用 MCP 客户端

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

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

// Create client
const client = new Client(
  { name: 'example-client', version: '1.0.0' },
  { capabilities: { resources: {}, tools: {} } }
);

// Connect to server
await client.connect(transport);

// List all talents
const talents = await client.listResources('talent://');

// Get a specific talent
const talent = await client.readResource('talent://modern-minimalist');

// Generate CSS for a button
const css = await client.callTool({
  name: 'generate-css',
  arguments: {
    talentId: 'modern-minimalist',
    component: 'button',
    state: 'hover'
  }
});

// Analyze compatibility between two talents
const compatibility = await client.callTool({
  name: 'analyze-style-compatibility',
  arguments: {
    talentId1: 'modern-minimalist',
    talentId2: 'bold-vibrant'
  }
});

运行示例脚本

node examples/generate-css.js

此示例脚本演示了如何使用 MCP 客户端为所有可用人才生成 CSS 并分析两个人才之间的兼容性。

发展

构建项目

npm run build

以开发模式运行

npm run dev

执照

麻省理工学院

Popmelt MCP Server

Integrations