MCP Color Picker

Ce qu'il fait

MCP Color Picker est un composant d'interface utilisateur interactif construit comme une application MCP utilisant le SDK @modelcontextprotocol/ext-apps. Il affiche un sélecteur de couleurs complet directement dans les hôtes compatibles MCP tels que Claude Desktop et Claude.ai. Lorsque l'utilisateur sélectionne une couleur, la valeur choisie est automatiquement transmise au modèle via updateModelContext — plus besoin de copier-coller des codes hexadécimaux dans le chat.

C'est une implémentation de référence propre du modèle MCP Apps : un frontend React regroupé dans un seul fichier HTML, servi aux côtés d'un serveur MCP capable de fonctionner en modes HTTP et stdio.

Caractéristiques clés

• Panneau de saturation/luminosité avec interaction complète par glissement pour une sélection de couleur intuitive
• Curseur de teinte pour une navigation précise dans le spectre
• Champs de saisie HEX et RGB pour entrer des valeurs de couleur exactes
• Échantillon d'aperçu en direct qui se met à jour en temps réel lors de la sélection
• S'adapte automatiquement au thème sombre ou clair de l'hôte
• Transmet la couleur sélectionnée au modèle via updateModelContext

Installation

Claude Desktop (mode stdio) :

Compiler d'abord :

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

Puis ajouter à claude_desktop_config.json :

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

Claude.ai (web) :

Démarrer le serveur HTTP (pnpm serve, s'exécute sur le port 3001), l'exposer via :

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

Puis ajouter https://<<tunneltunnel-url>/mcp dans Paramètres Claude → Connecteurs → Ajouter un connecteur personnalisé.

Hôtes supportés

Confirmés : Claude Desktop (stdio), Claude.ai web (HTTP via tunnel cloudflared).