Popmelt MCP サーバー
Popmelt 用の MCP (モデル コンテキスト プロトコル) サーバー。動的な UI コンポーネント スタイル設定のための Talent AI および Taste Profiles へのアクセスを提供します。
概要
Popmelt MCPサーバーは、モデルコンテキストプロトコルを活用し、人材AIプロファイルとスタイリング機能をLLMやその他のアプリケーションに公開します。PoppeltのPostgreSQLデータベースに直接接続し、構造化メタデータや重み付けされたスタイリング属性を含む詳細な人材プロファイルにアクセスし、提供します。
特徴
- タレントAIプロファイルアクセス：独自の美的特徴とデザイン属性を備えた完全なタレントプロファイルを取得します
- CSS スタイル生成: 保存されたメタデータから直接 CSS スタイル ルールを生成します。
- 動的UIコンポーネントスタイリング: 才能主導のデザイン選択をUIコンポーネントに簡単に統合します
- データベース統合: タレントプロファイルが保存されているPostgreSQLデータベースへの直接接続
- 複数のトランスポート オプション: コマンドライン ツールの場合は stdio を使用して、リモート サーバーの場合は SSE を使用した HTTP を使用してサーバーを実行します。
プロジェクト構造
popmelt-mcp-server/
├── src/ # Source code
│ ├── db/ # Database access layer
│ │ └── index.ts # Database connection and query functions
│ ├── utils/ # Utility modules
│ │ └── css-generator.ts # CSS generation utilities
│ ├── mcp-server.ts # MCP server core implementation
│ ├── server.ts # Stdio transport server
│ └── http-server.ts # HTTP/SSE transport server
├── scripts/ # Helper scripts
│ ├── setup-db.sql # SQL for setting up the database
│ └── setup-db.js # Script to run the SQL setup
├── examples/ # Example client usage
│ └── generate-css.js # Example script to generate CSS
├── dist/ # Compiled TypeScript output
├── package.json # Project configuration
└── tsconfig.json # TypeScript configuration
データベーススキーマ
Popmelt MCP サーバーは、次のスキーマを持つ PostgreSQL データベースを使用します。
CREATE TABLE talents (
id VARCHAR(50) PRIMARY KEY,
name VARCHAR(100) NOT NULL,
description TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
metadata JSONB NOT NULL
);
metadata JSON フィールドの構造は次のとおりです。
{
"aesthetic_characteristics": {
"style": "minimalist",
"mood": "calm",
"complexity": 2,
"minimalism": 9,
"boldness": 3,
"playfulness": 2,
"elegance": 8
},
"design_attributes": {
"whitespace_balance": 9,
"color_harmony": 7,
"visual_rhythm": 6,
"layout_density": 2,
"texture_use": 1,
"border_use": 2,
"shadow_use": 3
},
"color_palette": {
"primary": "#2D3748",
"secondary": "#4A5568",
"accent": "#38B2AC",
"background": "#FFFFFF",
"text": "#1A202C"
},
"typography": {
"headingFont": "Inter, sans-serif",
"bodyFont": "Inter, sans-serif",
"scale": 1.2,
"weight": "light",
"letterSpacing": 0.02,
"lineHeight": 1.5
}
}
はじめる
前提条件
- Node.js 18以上
- PostgreSQLデータベース
インストール
- このリポジトリをクローンする
- 依存関係をインストールします:
- サンプル環境ファイルをコピーし、データベースの詳細で更新します。
- データベースを設定します。
- TypeScript コードをビルドします。
サーバーの実行
2 つのサーバー モードが利用可能です。
- 標準 stdio モード(コマンドライン ツールおよび直接統合用):
- SSE をサポートする HTTP サーバー(リモート アクセスおよび Web 統合用):
HTTP サーバーは以下を提供します。
- リアルタイム更新を受信するための
/sseの SSE エンドポイント - コマンドを送信するための
/messagesの POST エンドポイント /healthのヘルスチェックエンドポイント
APIリファレンス
リソース
サーバーは次の MCP リソースを公開します。
| リソースURI | 説明 |
|---|
talent://list | 利用可能なすべての人材プロファイルを一覧表示する |
talent://{id} | IDで特定の人材プロフィールを取得する |
talent-attribute://{id}/{attribute} | タレントの特定の属性を取得します（ネストされたプロパティのドット表記をサポートします） |
component-style://{talent_id}/{component_name} | タレントプロファイルを使用して特定のコンポーネントの CSS を取得する |
ツール
サーバーは次の MCP ツールを提供します。
| ツール名 | 説明 | 議論 |
|---|
generate-css | タレントプロファイルに基づいてコンポーネントの CSS を生成する | talentId 、 component 、 state （オプション）、 customProperties （オプション） |
generate-component-library | 完全なコンポーネントライブラリの CSS を生成する | talentId |
query-talents | タレントメタデータに対して読み取り専用クエリを実行する | filters |
analyze-style-compatibility | 異なる才能スタイルの互換性を分析する | talentId1 、 talentId2 |
プロンプト
サーバーは次の MCP プロンプトを提供します。
| プロンプト名 | 説明 | 議論 |
|---|
style-component | コンポーネントのスタイル設定のための LLM プロンプト | talentId 、 component 、 requirements （オプション） |
create-talent-description | 才能の記述的要約を作成するためのLLMプロンプト | talentId |
recommend-talent | 要件に基づいて人材を推薦するためのLLMプロンプト | projectType 、 brandPersonality 、 targetAudience 、 aestheticPreferences （オプション） |
使用例
MCPクライアントの使用
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
// Create transport
const transport = new StdioClientTransport({
command: 'node',
args: ['dist/server.js']
});
// Create client
const client = new Client(
{ name: 'example-client', version: '1.0.0' },
{ capabilities: { resources: {}, tools: {} } }
);
// Connect to server
await client.connect(transport);
// List all talents
const talents = await client.listResources('talent://');
// Get a specific talent
const talent = await client.readResource('talent://modern-minimalist');
// Generate CSS for a button
const css = await client.callTool({
name: 'generate-css',
arguments: {
talentId: 'modern-minimalist',
component: 'button',
state: 'hover'
}
});
// Analyze compatibility between two talents
const compatibility = await client.callTool({
name: 'analyze-style-compatibility',
arguments: {
talentId1: 'modern-minimalist',
talentId2: 'bold-vibrant'
}
});
サンプルスクリプトの実行
node examples/generate-css.js
このサンプル スクリプトは、MCP クライアントを使用して、利用可能なすべてのタレントの CSS を生成し、2 つのタレント間の互換性を分析する方法を示しています。
発達
プロジェクトの構築
開発モードで実行
ライセンス
マサチューセッツ工科大学