MCP Apps Color Picker

颜色选择器MCP应用程序

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

特性

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

安装

1. 安装依赖项：

   npm install

1. 构建UI：

   npm run build

1. 启动服务器：

   npm run serve

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

   npm start

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

测试

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

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

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

1. 测试颜色选择器:

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

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

1. 启动HTTP服务器:

   npm start

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

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

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

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

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

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

使用基本主机进行测试

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

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

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

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

1. 导航至 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应用程序文档
• MCP应用程序API参考
• MCP规范

许可证

麻省理工学院