Popmelt MCP 服务器

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

概述

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

特性

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

项目结构

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

开始使用

安装依赖

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

API 参考

资源

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

工具

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

示例用法

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

开发

构建项目

npm run build

开发模式运行

npm run dev

许可证

MIT