AI导哈

颜色选择器扩展

一个交互式颜色选择器扩展，支持多种颜色格式和实时预览，适用于Claude Desktop及其他MCP兼容主机。

  • by bobbylite
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 bobbylite/mcp-apps-color-picker

使用说明

颜色选择器MCP应用程序

模型上下文协议（MCP）的交互式颜色选择器扩展，可在Claude Desktop和其他MCP兼容主机中呈现漂亮的UI。

特性

  • 带有实时预览的交互式颜色选择器
  • 支持多种颜色格式（HEX、RGB、HSL）
  • 单击以复制颜色值
  • 随机颜色生成器
  • 漂亮的渐变UI设计
  • 与Claude Desktop无缝集成

安装

  1. 安装依赖项：

    npm install

  2. 构建UI：

    npm run build

  3. 启动服务器：

    npm run serve

    或者在一个命令中同时运行build和serve：

    npm start

服务器将在以下时间可用 http://localhost:3001/mcp.

测试

使用Claude Desktop进行测试（推荐）

颜色选择器已在Claude Desktop配置中配置，位置为： ~/Library/Application Support/Claude/claude_desktop_config.json

  1. 重新启动克劳德桌面 加载新服务器

  2. 测试颜色选择器:

    • 在Claude Desktop中开始新的聊天
    • 问：“给我看一个颜色选择器”或“我需要选择一种颜色”
    • 交互式颜色选择器将在聊天中呈现
    • 选择颜色，复制值，并将您的选择发送回Claude

使用Claude Web进行测试（通过自定义连接器）

  1. 启动HTTP服务器:

    npm start

  2. 将本地服务器暴露到互联网 使用 cloudflared:

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

  3. 复制生成的URL （例如。， https://random-name.trycloudflare.com)

  4. 在Claude中添加为自定义连接器:

    • 转到claude.ai
    • 点击您的个人资料
    • 首选 设置 → 连接器 → 添加自定义连接器
    • 粘贴您的cloudflared URL
    • 保存连接器

  5. 测试颜色选择器 （与克劳德桌面相同）

使用基本主机进行测试

  1. 克隆ext应用程序存储库：

    git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps/examples/basic-host
npm install

  2. 使用颜色选择器服务器启动基本主机：

    SERVERS='["http://localhost:3001"]' npm start

  3. 导航至 http://localhost:8080 并测试颜色选择器工具。

用法

连接后，您可以让Claude使用颜色选择器：

  • “显示颜色选择器”
  • “我需要为我的网站选择一种颜色”
  • “打开颜色选择器工具”
  • “帮助我选择以#FF5733开头的颜色”

颜色选择器支持：

  • 视觉选择：单击并拖动颜色选择器
  • 手动输入：直接键入十六进制值
  • 随机颜色：只需单击一下即可生成随机颜色
  • 多种格式：查看和复制HEX、RGB和HSL格式
  • 上下文更新：将所选颜色发送回对话

项目结构

mcp-apps-color-picker/
├── package.json          # Dependencies and scripts
├── tsconfig.json         # TypeScript configuration
├── vite.config.ts        # Vite bundler configuration
├── server.ts             # MCP server (HTTP) for web testing
├── server-stdio.ts       # MCP server (stdio) for Claude Desktop
├── mcp-app.html          # UI entry point
├── src/
│   └── mcp-app.ts        # UI logic and MCP App client
└── dist/                 # Build output (generated)
    └── mcp-app.html      # Bundled single-file HTML

服务器文件

  • server.ts：基于HTTP的服务器，用于使用Claude web（通过cloudflared）或基本主机进行测试
  • server-stdio.ts：用于Claude Desktop集成的基于Stdio的服务器

运作原理

  1. 服务器注册：服务器注册了一个 color-picker 具有指向的UI元数据的工具 ui:// 资源
  2. UI资源：调用时，服务器提供包含颜色选择器接口的捆绑HTML
  3. 沙盒渲染：Claude在安全的沙盒iframe中呈现UI
  4. 双向通信：应用程序通过MCP Apps协议与Claude通信
  5. 上下文更新：选定的颜色将发送回对话，以供后续交互使用

发展

要修改颜色选择器，请执行以下操作：

  1. 编辑 mcp-app.html 用于UI结构和样式
  2. 编辑 src/mcp-app.ts 用于功能和MCP通信
  3. 编辑 server.ts 更改工具行为或添加新功能
  4. 重建与 npm run build
  5. 使用以下命令重新启动服务器 npm run serve

了解更多

许可证

麻省理工学院

相关 MCP