MCP Server Test 04

🚀 Popmelt MCP 服务器

Popmelt MCP 服务器为 Popmelt 提供服务，基于 Model Context Protocol (MCP)，允许用户访问 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 样式。

📚 详细文档

项目结构

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 风格之间的兼容性。

示例用法

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