MCP Server Test 04

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

API リファレンス

リソース

• talent://：すべての Talent を一覧表示します。
• talent://{id}：特定の Talent の詳細情報を取得します。
• component-style://{talent_id}/{component_name}：Talent ID とコンポーネント名に基づいて、スタイルを取得します。

ツール

• generate-css：Talent に基づいて、コンポーネントの CSS スタイルを生成します。
• analyze-compatibility：2 つの 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 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

🔧 技術詳細

プロジェクトのビルド

npm run build

開発モードでの実行

npm run dev

📄 ライセンス

MIT