MCP Color Picker

What it does

MCP Color Picker is an interactive UI component built as an MCP App using the @modelcontextprotocol/ext-apps SDK. It renders a full-featured colour picker directly inside MCP-enabled hosts like Claude Desktop and Claude.ai. When the user selects a colour, the chosen value is automatically reported back to the model via updateModelContext — no copy-pasting hex codes into the chat required.

It's a clean reference implementation of the MCP Apps pattern: a React frontend bundled into a single HTML file, served alongside an MCP server that can run in both HTTP and stdio modes.

Key features

• Saturation/brightness panel with full drag interaction for intuitive colour selection
• Hue slider for precise spectrum navigation
• HEX and RGB input fields for entering exact colour values
• Live preview swatch that updates in real time as you pick
• Adapts automatically to the host's dark or light theme
• Reports the selected colour back to the model via updateModelContext

Installation

Claude Desktop (stdio mode):

Build first:

git clone https://github.com/daitasu/mcp-apps-sandbox
cd mcp-apps-sandbox && pnpm install && pnpm build

Then add to claude_desktop_config.json:

{
  "mcpServers": {
    "color-picker": {
      "command": "node",
      "args": ["/path/to/mcp-apps-sandbox/dist/server.js", "--stdio"]
    }
  }
}

Claude.ai (web):

Start the HTTP server (pnpm serve, runs on port 3001), expose it via:

npx cloudflared tunnel --url http://localhost:3001

Then add https://<tunnel-url>/mcp in Claude Settings → Connectors → Add Custom Connector.

Supported hosts

Confirmed: Claude Desktop (stdio), Claude.ai web (HTTP via cloudflared tunnel).