MCP Server Test 01

🚀 Popmelt MCP サーバー API ドキュメント

Popmelt MCP サーバー API は、設計システムの構築や管理を容易にするための機能を提供します。このドキュメントでは、API の使用方法やシステムの構成について詳しく説明します。

✨ 主な機能

• 利用可能なコンポーネントテンプレートの取得
• コンポーネントテンプレートを使用した設定ファイルの作成
• 設計トークンを CSS 変数に自動変換
• システムのヘルスチェック

📦 インストール

このセクションでは、依存関係のインストールに関する情報を提供します。

- express: ^4.18.2
- mongoose: ^5.0.3
- redis: ^3.0.2
- CORS: ^2.8.5

💻 使用例

コンポーネントテンプレートの取得

GET /api/templates HTTP/1.1

レスポンス:

{
  "success": true,
  "templates": [
    {
      "name": "button",
      "description": "一个带有主要和次要变体的按钮组件"
    },
    {
      "name": "card",
      "description": "一个带有悬停效果和阴影的卡片容器"
    }
  ]
}

設定ファイルの作成

POST /api/templates/create-profile HTTP/1.1
Content-Type: application/json

{
  "name": "My Design System",
  "author": "Designer Name",
  "slug": "my-design-system",
  "description": "我的自定义设计系统",
  "components": ["button", "card", "input", "alert"]
}

レスポンス:

{
  "success": true,
  "profile": {
    /* 创建的配置文件元数据 */
  }
}

新しい設定ファイルの作成

POST /api/profiles HTTP/1.1
Content-Type: application/json

{
  "name": "My Theme",
  "author": "John Doe",
  "description": "A modern design theme.",
  "components": ["header", "footer"]
}

レスポンス:

{
  "success": true,
  "message": "Profile created successfully."
}

すべての設定ファイルの取得

GET /api/profiles HTTP/1.1

レスポンス:

[
  {
    "name": "Dark Theme",
    "author": "Jane Smith",
    "description": "A dark-themed configuration.",
    "_id": "64b9e3c57f0b..."
  },
  ...
]

📚 ドキュメント

設定ファイルの構造

Popmelt MCP サーバーは、設計システムを定義するために構造化された JSON 設定ファイルを使用します。各設定ファイルには以下が含まれます。

基本メタデータ

• name: 設計システムの名称
• author: 設計システムの作成者
• slug: URL で使用する識別子
• description: 設計システムの説明
• version: バージョン番号

設計トークン

• colors: カラーパレット（主要、次要、強調、背景、テキストカラー）
• spacing: スペーシング尺度（マージン、パディング、レイアウト）
• typography: フォントファミリー、サイズ、重量、行間
• borders: ボーダーの幅、スタイル、半径
• animations: アニメーションの持続時間、イージング、遅延

コンポーネント定義

各コンポーネントには以下が含まれます。

• 基本スタイル
• バリエーション（主要、次要、第三）
• 状態（ホバー、フォーカス、アクティブ、無効）
• ネストされた要素（アイコン、ラベル、コンテナ）
• レスポンシブブレークポイント

CSS 変数の生成

サーバーは自動的に設計トークンを CSS 変数に変換し、設計システム全体で再利用しやすくします。例えば:

:root {
  --color-background: #ffffff;
  --color-text-primary: #1a1a1a;
  --color-accent: #3d7aff;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --typography-family: 'Arial', sans-serif;
}

ヘルスチェック

GET /api/health HTTP/1.1

レスポンス:

{
  "status": "ok",
  "timestamp": "2023-10-05T14:30:00Z"
}

🔧 技術詳細

サーバーは以下の技術に基づいて構築されています。

• Node.js: JavaScript ランタイム環境
• Express.js: Node.js の高速開発フレームワーク
• MongoDB: 分散型データベースシステム
• Redis: 高性能キーバリューストア

プロジェクト構造

popmelt-mcp/
├── src/                # ソースコードディレクトリ
│   ├── routes/         # ルート定義
│   │   └── components.js    # コンポーネントルート
│   ├── controllers/    # コントローラーロジック
│   │   └── profileController.js  # 設定ファイルコントローラー
│   └── models/         # データモデル
│       └── Profile.js  # 設定ファイルモデル
├── public/             # 公開リソースディレクトリ
└── package.json        # 依存関係管理ファイル

エラー処理

無効なリクエストボディ

{
  "success": false,
  "error": "Invalid request body format."
}

設定ファイルが見つからない

{
  "success": false,
  "error": "Profile not found."
}

📄 ライセンス

このプロジェクトは MIT ライセンスに従います。詳細は LICENSE ファイルを参照してください。

貢献ガイド

貢献を歓迎します！リポジトリをフォークし、すべてのテストを通過させてからプルリクエストを送信してください。

問題報告

問題が発生した場合は、Issues に報告してください。