Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Color Palette Generator MCP App Generate a complementary palette for #3498db"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
AIチャット内にインタラクティブなカラーパレット生成UIを埋め込むMCP Appです。
pnpm installRelated MCP server: MCP Color Picker
# UIビルド + サーバー起動
pnpm startサーバーが http://localhost:3001/mcp で起動します。
pnpm dev~/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を再起動してください。
pnpm serveで起動後、http://localhost:3001/mcp に接続します。
# 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"}}}'ツール名 | 説明 |
| ベースカラーからパレットを生成（complementary, analogous, triadic, monochromatic, split-complementary） |
| 2色間のWCAGコントラスト比を計算 |
このプロジェクトの構成をベースに、新しい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
This server cannot be deployed
WCAG color contrast checks, nearest accessible color, CSS color conversion and palette pair checks.
Turn AI-designed colour palettes into Coolours links, with colour names, CSS and contrast checks
Run accessibility, contrast, and design token audits and file QA issues from your AI coding tool.
Verified color tokens for AI coding agents: one brand hex in, WCAG/APCA-measured themes out.
