Color Palette Generator MCP App
AIチャット内にインタラクティブなカラーパレット生成UIを埋め込むMCP Appです。
セットアップ
pnpm install起動方法
# UIビルド + サーバー起動
pnpm startサーバーが http://localhost:3001/mcp で起動します。
開発モード（ホットリロード）
pnpm devClaude Desktopへの接続
~/Library/Application Support/Claude/claude_desktop_config.json に以下を追加します。
{
"mcpServers": {
"color-palette": {
"command": "/opt/homebrew/bin/npx",
"args": ["tsx", "/path/to/mcp-apps/main.ts", "--stdio"]
}
}
}設定後、Claude Desktopを再起動してください。
HTTP経由で接続する場合
pnpm serveで起動後、http://localhost:3001/mcp に接続します。
動作確認（curl）
# initializeリクエスト
curl -X POST http://localhost:3001/mcp \
-H "Content-Type: application/json" \
-H "Accept: application/json, text/event-stream" \
-d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-03-26","capabilities":{},"clientInfo":{"name":"test","version":"1.0.0"}}}'
# パレット生成
curl -X POST http://localhost:3001/mcp \
-H "Content-Type: application/json" \
-H "Accept: application/json, text/event-stream" \
-d '{"jsonrpc":"2.0","id":2,"method":"tools/call","params":{"name":"generate-palette","arguments":{"baseColor":"#3498db","paletteType":"analogous"}}}'ツール
| ツール名 | 説明 | | ------------------ | ------------------------------------------------------------------------------------------------------- | | generate-palette | ベースカラーからパレットを生成（complementary, analogous, triadic, monochromatic, split-complementary） | | check-contrast | 2色間のWCAGコントラスト比を計算 |
新しいMCP Appプロジェクトを作る
このプロジェクトの構成をベースに、新しいMCP Appをスキャフォールドするスキルを用意しています。
Claude Code上で以下を実行してください。
/skill dev_init-mcp-app my-new-appサーバー・クライアント・Viteバンドル・デュアルトランスポート（stdio + HTTP）の雛形が一括生成されます。
技術スタック
- @modelcontextprotocol/ext-apps 1.0.1
- @modelcontextprotocol/sdk 1.26.0
- zod 4.x
- Vite + vite-plugin-singlefile
- TypeScript
