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データベース

インストール

このリポジトリをクローンする
依存関係をインストールします:
npm install
サンプル環境ファイルをコピーし、データベースの詳細で更新します。
cp .env.example .env
データベースを設定します。
node scripts/setup-db.js
TypeScript コードをビルドします。
npm run build

サーバーの実行

2 つのサーバーモードが利用可能です。

標準 stdio モード(コマンドラインツールおよび直接統合用):

npm start

SSE をサポートする HTTP サーバー(リモートアクセスおよび Web 統合用):

npm run start:http

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 つのタレント間の互換性を分析する方法を示しています。

発達

プロジェクトの構築

npm run build

開発モードで実行

npm run dev

ライセンス

マサチューセッツ工科大学

Popmelt MCP Server

Integrations