使用说明

项目简介

Drawing MCP Server 是一个基于 Model Context Protocol (MCP) 构建的应用后端，旨在为 AI 助手提供绘画功能。通过该服务器，AI 助手可以远程控制画布，绘制图形，并将结果以 PNG 图片或 JSON 数据形式获取。

主要功能点

创建画布: 允许 AI 助手指定画布的宽度和高度来创建新的绘图区域。
绘制矩形: 支持 AI 助手在画布上指定位置、尺寸和颜色绘制填充矩形。
导出 PNG 图片: 可以将当前画布的内容导出为 Base64 编码的 PNG 图片，方便 AI 助手展示或进一步处理。
获取画布数据: 可以将画布的像素数据以 JSON 格式返回，供 AI 助手进行数据分析或其他用途。

安装步骤

方法一：通过 Smithery 安装 (适用于 Claude Desktop)

如果你的 AI 助手客户端是 Claude Desktop，可以使用 Smithery 自动安装 'mcp-painter'：

npx -y @smithery/cli install @flrngel/mcp-painter --client claude

方法二：手动安装

安装 Node.js 和 npm: 确保你的环境中已安装 Node.js 和 npm (Node 包管理器)。
下载仓库代码: 从 GitHub 仓库 https://github.com/flrngel/mcp-painter 下载代码到本地。
安装依赖: 在仓库根目录下打开终端，运行以下命令安装项目依赖：
```
npm install
```
编译 TypeScript 代码 (如果需要): 如果仓库包含 TypeScript 代码，可能需要编译成 JavaScript。查看仓库中是否有编译命令或脚本，例如 'npm run build'。本仓库已提供编译后的 JavaScript 代码，此步骤通常可以跳过。

服务器配置

为了让 MCP 客户端（如 AI 助手）连接到 Drawing MCP Server，需要在客户端的 MCP 配置中添加服务器信息。以下是 'mcp-painter' 的服务器配置示例：

{
  "servers": {
    "painter": {
      "name": "painter",  // 服务器名称，客户端用于标识和调用
      "command": "npx", // 启动服务器的命令，这里使用 npx 运行 npm 包
      "args": ["-y", "github:flrngel/mcp-painter"] // 命令参数，使用 npx 直接从 GitHub 运行 mcp-painter
    }
  }
}

配置参数说明:

'"name"': 服务器的名称，例如 '"painter"'，客户端会使用这个名称来引用该服务器。
'"command"': 启动服务器的可执行命令，通常是 Node.js 环境下的 'node' 或 'npx'。这里使用 'npx' 可以方便地运行 npm 包，无需全局安装。
'"args"': 传递给 'command' 的参数列表。 '["-y", "github:flrngel/mcp-painter"]' 指示 'npx' 运行 GitHub 仓库 'flrngel/mcp-painter' 中的代码。 '-y' 参数表示自动确认安装依赖。

更推荐的配置 (本地运行，假设已在本地仓库根目录执行 'npm install' 和 'npm run build'):

如果你已经将仓库下载到本地并安装了依赖，并且想在本地运行服务器，可以使用以下配置，效率更高且更稳定：

{
  "servers": {
    "painter": {
      "name": "painter",
      "command": "node",
      "args": ["index.js"] // 假设编译后的入口文件是 index.js
    }
  }
}

本地运行配置参数说明:

'"command"': 改为 'node'，直接使用 Node.js 运行 JavaScript 文件。
'"args"': 改为 '["index.js"]'，指定要运行的入口文件为 'index.js' (根据实际情况调整，本仓库入口文件是 'index.js')。 请确保在仓库根目录下运行 MCP 客户端，或者将 'index.js' 的路径配置正确。

基本使用方法

启动 MCP 服务器: 根据你选择的配置方式，启动 Drawing MCP Server。如果使用 'npx' 方式，客户端通常会自动拉取并运行。如果使用本地运行方式，需要在仓库根目录手动执行 'node index.js' (或者配置的 'command' 和 'args')。
在 AI 助手中使用绘画工具: 在支持 MCP 协议的 AI 助手 (例如 Claude) 中，你可以通过自然语言指令调用 Drawing MCP Server 提供的工具。例如：
- '请创建一个 500x300 的画布' (对应 'drawing_generateCanvas' 工具)
- '在 (10, 20) 的位置画一个 100x80 的红色矩形' (对应 'drawing_fillRectangle' 工具，颜色可能需要更精确的格式，例如 RGB 值)
- '导出画布为 PNG 图片' (对应 'drawing_getCanvasPng' 工具)
- '获取画布的 JSON 数据' (对应 'drawing_getCanvasData' 工具)
具体的指令格式和工具调用方式取决于你使用的 AI 助手客户端。你需要参考客户端的文档来了解如何与 MCP 服务器进行交互，以及如何使用 'painter' 服务器提供的 'drawing_generateCanvas', 'drawing_fillRectangle', 'drawing_getCanvasPng', 'drawing_getCanvasData' 等工具。

注意: Drawing MCP Server 维护一个全局画布状态。这意味着后续的绘画操作都会在同一个画布上进行，直到你再次调用 'drawing_generateCanvas' 创建新的画布。

关键词