MCP Server Test 04

🚀 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 許可證。