🚀 Popmelt MCP 服务器

Popmelt MCP 服务器是一个基于 Model Context Protocol (MCP) 的服务，它为 Popmelt 提供支持，允许访问 Talent AI 和 Taste Profile，可用于动态 UI 组件样式设计。

🚀 快速开始

安装依赖

npm install @modelcontextprotocol/sdk client postgresql

初始化数据库

CREATE TABLE IF NOT EXISTS Talents (
    id UUID PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    stylePreferences JSONB NOT NULL
);

CREATE TABLE IF NOT EXISTS ComponentStyles (
    id UUID PRIMARY KEY,
    talentId UUID NOT NULL REFERENCES Talents(id),
    componentName VARCHAR(255) NOT NULL,
    styleDefinitions JSONB NOT NULL
);

启动服务器

npm run dev

✨ 主要特性

• Talent Profile Access：获取 Talent 的详细信息，包括其设计风格和偏好。
• Dynamic Styling：根据 Talent 配置生成动态 UI 组件样式。
• Compatibility Analysis：分析不同 Talent 之间的风格兼容性。
• CSS Generation：自动生成基于 Talent 的组件 CSS 样式。

📦 安装指南

依赖安装

运行以下命令安装所需依赖：

npm install @modelcontextprotocol/sdk client postgresql

数据库初始化

使用以下 SQL 语句初始化数据库表结构：

CREATE TABLE IF NOT EXISTS Talents (
    id UUID PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    stylePreferences JSONB NOT NULL
);

CREATE TABLE IF NOT EXISTS ComponentStyles (
    id UUID PRIMARY KEY,
    talentId UUID NOT NULL REFERENCES Talents(id),
    componentName VARCHAR(255) NOT NULL,
    styleDefinitions JSONB NOT NULL
);

服务器启动

使用以下命令启动服务器：

npm run dev

💻 使用示例

基础用法

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');

📚 详细文档

项目结构

src/
├── server.ts              # MCP 服务器主文件
├── Database.ts           # 数据库连接和交互逻辑
├── TalentProfile.ts      # Talent 配类定义
└── ComponentStyling.ts   # 组件样式生成逻辑

数据库架构

表结构

Talents 表

ComponentStyles 表

示例 SQL

-- 查询所有 Talent
SELECT id, name, description FROM Talents;

-- 获取特定 Talent 的样式偏好
SELECT stylePreferences FROM Talents WHERE id = '特定 ID';

-- 插入新的组件样式
INSERT INTO ComponentStyles (talentId, componentName, styleDefinitions)
VALUES ('特定 Talent ID', 'button', '{"padding": "1rem", "color": "#2196F3"}');

API 参考

资源

• talent://：列出所有 Talent。
• talent://{id}：获取特定 Talent 的详细信息。
• component-style://{talent_id}/{component_name}：根据 Talent ID 和组件名称获取样式。

工具

• generate-css：基于 Talent 生成组件的 CSS 样式。
• analyze-compatibility：分析两个 Talent 风格之间的兼容性。

🔧 技术细节

Popmelt MCP 服务器利用模型上下文协议，向大语言模型和其他应用程序开放 Talent AI 配 профили и стилевые возможности。它直接连接到 Popmelt 的 PostgreSQL 数据库，以获取和提供详细的 Talent 信息，包括结构化的元数据和加权样式属性。

📄 许可证

本项目采用 MIT 许可证。