内容
# 🎨 MCP 色彩选择器 — 示例 MCP 应用
一个交互式的色彩选择器，作为 MCP 兼容的主机（如 **VS Code GitHub Copilot** 和 **Claude**）内的 UI 渲染。
---
## 前置条件
- Node.js 18+
- 带有 GitHub Copilot 的 VS Code（或 Claude / Claude 桌面版）
---
## 设置
### 1. 安装和构建
```bash
npm install
npm run build
```
### 2. 启动服务器
```bash
npm run serve
```
您应该看到：
```
✅ MCP 色彩选择器运行于 http://localhost:3001/mcp
```
---
## 连接到 VS Code Copilot
将服务器添加到您的 VS Code MCP 配置中。
**选项 A — 项目级** （工作区中的 `.vscode/mcp.json`）：
```json
{
"servers": {
"color-picker": {
"type": "http",
"url": "http://localhost:3001/mcp"
}
}
}
```
**选项 B — 全局** （ `~/.copilot/mcp.json` ）：
```json
{
"servers": {
"color-picker": {
"type": "http",
"url": "http://localhost:3001/mcp"
}
}
}
```
然后在 VS Code 中：
1. 打开 Copilot 聊天（`Ctrl+Alt+I` / `Cmd+Alt+I`）
2. 切换到 **Agent** 模式（聊天输入框中的下拉菜单）
3. 输入：**"打开色彩选择器"**
交互式色彩选择器 UI 将直接在聊天中渲染！ 🎉
---
## 连接到 Claude（网页 / 桌面版）
对于 Claude.ai 或 Claude 桌面版，您需要公开暴露服务器。
在单独的终端中：
```bash
npx cloudflared tunnel --url http://localhost:3001
```
复制生成的 URL（例如 `https://random-name.trycloudflare.com`）并将其作为 **自定义连接器** 添加到 Claude 中：
> 个人资料 → 设置 → 连接器 → 添加自定义连接器
> 注意：自定义连接器需要付费 Claude 计划（Pro、Max 或 Team）。
---
## 工作原理
| 文件 | 角色 |
|---|---|
| `server.ts` | MCP 服务器 — 注册 `color_picker` 工具 + 提供 HTML UI 资源 |
| `mcp-app.html` | 色彩选择器 UI 的 HTML 入口点 |
| `src/mcp-app.ts` | UI 逻辑 — 通过 MCP 应用 SDK 连接到主机 |
| `vite.config.ts` | 将所有内容捆绑到单个自包含的 HTML 文件中 |
### 关键概念
- **`registerAppTool`** — 使用 `_meta.ui.resourceUri` 注册工具，告诉主机在调用此工具时渲染 UI
- **`registerAppResource`** — 在主机请求时提供捆绑的 HTML
- **`App.connect()`** — 在 UI 和主机之间建立双向通信
- **`app.ontoolresult`** — 在工具运行时接收从服务器推送的数据
---
## UI 更改后重建
```bash
npm run build # 重建 UI
npm run serve # 重启服务器
```
或同时运行两者：
```bash
npm run dev
```
