使用说明

项目简介

MCP 画板示例服务器 (mcp-painter) 是一个基于 Model Context Protocol (MCP) 构建的应用后端，它将一个简单的在线画板程序的功能通过 MCP 协议暴露出来，使得支持 MCP 协议的 LLM 客户端可以通过标准化的方式调用画板的各种绘图工具和获取绘图结果。

主要功能点

资源管理: 提供当前画布的PNG图像资源，客户端可以获取当前的画板绘制结果。
工具注册与执行:
- 画笔工具: 允许客户端设置画笔的粗细和颜色。
- 橡皮擦工具: 允许客户端设置橡皮擦的粗细，用于擦除画布内容。
- 颜色选择器: 允许客户端选择绘图颜色。
- 画布操作: 提供清空画布、设置和获取画布尺寸的功能。
- 绘图操作: 支持在画布上进行绘制，模拟笔触的开始、移动和结束状态。
- 获取绘图参数: 允许客户端获取当前画笔的配置参数。
Prompt 模板: 该示例项目侧重于工具和资源的管理，Prompt 模板功能未在代码中体现，但 MCP 服务器具备支持 Prompt 模板的能力。
可视化: 配套的前端白板程序 (whiteBoard) 提供了一个简单的Web界面，可以直观地看到通过 MCP 服务器接口调用绘图工具的效果。

安装步骤

安装 whiteBoard (API Server): whiteBoard 目录下的程序提供了 HTTP API 接口，MCP 服务器会调用这些接口来控制画板。
```
cd whiteBoard
npm install
```

编译 mcp-painter (MCP Server): mcp-painter 目录包含了 MCP 服务器的实现代码。

cd ../mcp-painter  # 返回上一级目录，进入 mcp-painter 目录
npm install
npm run build

服务器配置

要将 mcp-painter 集成到支持 MCP 协议的客户端（如 Cline, Claude-desktop），您需要配置应用的启动信息。以下是一个配置示例，请根据您的实际环境进行调整：

{
  "DrawingBoard": {
    "command": "yournodepath/node.exe",  // 替换为您的 Node.js 可执行文件路径，例如 /usr/bin/node 或 C:\\Program Files\\nodejs\\node.exe
    "args": [
      "yourpathto/mcppainter/build/index.js" // 替换为 mcp-painter 构建后的 index.js 文件路径，例如 /path/to/mcppainter/build/index.js 或 C:\\path\\to\\mcppainter\\build\\index.js
    ],
    "env": {},
    "disabled": false,
    "autoApprove": [ // 自动批准的工具列表，客户端调用这些工具时无需用户手动确认
      "set_brush",
      "use_eraser",
      "draw_on_canvas",
      "set_color",
      "get_image",
      "clear_canvas",
      "get_canvas_size",
      "set_canvas_size",
      "get_current_draw_parameters"
    ]
  }
}

配置参数说明:

'command': 启动 MCP 服务器的命令，这里是 Node.js 的可执行文件。
'args': 传递给 'command' 的参数，这里是 'mcp-painter' 构建后的入口文件 'index.js' 的路径。
'env': 环境变量，默认为空。
'disabled': 是否禁用该 MCP 服务器，默认为 'false' (启用)。
'autoApprove': 一个字符串数组，列出了客户端可以自动批准执行的工具名称。当客户端请求调用列表中的工具时，无需用户手动确认，将自动执行。这可以提升使用体验，但请谨慎配置，仅将信任的工具加入 'autoApprove' 列表。

请注意: 您需要根据您的 Node.js 安装路径和 mcp-painter 的实际文件路径，修改 'command' 和 'args' 的配置。

基本使用方法

启动 whiteBoard API Server: 在 'whiteBoard' 目录下运行 'npm run dev' 启动白板程序的 API 服务，默认监听 'http://localhost:3000'。
配置 MCP 客户端: 将上述提供的 JSON 配置信息添加到您的 MCP 客户端配置中，确保 'command' 和 'args' 配置正确指向 'mcp-painter' 的构建产物。
连接 MCP 服务器: 在 MCP 客户端中启用并连接到 "DrawingBoard" (或您在配置中指定的名称) MCP 服务器。
调用工具和获取资源: 通过 MCP 客户端，您可以调用 'DrawingBoard' 提供的各种工具，例如：
- 调用 'set_brush' 工具设置画笔颜色和粗细。
- 调用 'draw_on_canvas' 工具在画布上绘制线条。
- 调用 'get_image' 工具获取当前画布的 PNG 图像资源。
您可以参考仓库中提供的 'draw_star.py' 示例脚本，了解如何通过 HTTP 请求调用 whiteBoard 的 API 接口进行绘图，MCP 服务器的工具调用最终也是通过类似的方式与 whiteBoard 服务交互的。在实际的 MCP 客户端中，您可以使用客户端提供的界面或命令来调用这些工具，而无需直接编写 HTTP 请求。

示例操作流程 (假设使用支持 MCP 协议的聊天客户端):

用户： “把画笔设置为红色，粗细为5像素” 客户端 (自动调用 MCP 工具): 'call_tool("DrawingBoard", "set_brush", {"color": "#ff0000", "width": 5})' 用户： “在 (100, 100) 的位置开始画一条线到 (200, 200)” 客户端 (自动调用 MCP 工具): 'call_tool("DrawingBoard", "draw_on_canvas", {"x": 100, "y": 100, "state": "start"})' 'call_tool("DrawingBoard", "draw_on_canvas", {"x": 150, "y": 150, "state": "move"})' 'call_tool("DrawingBoard", "draw_on_canvas", {"x": 200, "y": 200, "state": "move"})' 'call_tool("DrawingBoard", "draw_on_canvas", {"x": 200, "y": 200, "state": "end"})' 用户： “获取当前的画作” 客户端 (自动调用 MCP 资源读取): 'read_resource("DrawingBoard", "image:///current_image.png")' 客户端 (显示返回的图像)

通过以上步骤，您就可以体验如何使用 MCP 客户端与 mcp-painter 服务器进行交互，控制在线画板并获取绘图结果。

关键词