Skip to main content
Glama
hanzochang

Color Palette Generator MCP App

by hanzochang
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

Color Palette Generator MCP App

AIチャット内にインタラクティブなカラーパレット生成UIを埋め込むMCP Appです。

セットアップ

pnpm install

Related MCP server: MCP Color Server

起動方法

# UIビルド + サーバー起動
pnpm start

サーバーが http://localhost:3001/mcp で起動します。

開発モード（ホットリロード）

pnpm dev

Claude 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

This server cannot be installed

F
license - not found
-
quality - not tested
D
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

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