Click on "Install 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 Converter
# 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 installed
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
AI-agent design tools: fonts, font recognition, palettes, color naming, contrast, code, SVG, CSS.
Renders interactive Chart.js charts and dashboards inline in AI conversations.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/hanzochang/mcp-apps-sample'
If you have feedback or need assistance with the MCP directory API, please join our Discord server