AI导哈

像素画绘制服务

一个通过蓝牙连接iDotMatrix LED显示屏，允许AI助手绘制像素画的服务。

  • by Nailan
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 Nailan/idotmatrix-mcp

使用说明

idotmatrix mcp

MCP（模型上下文协议）服务器，允许AI助手在其上绘制像素艺术 iDotMatrix 蓝牙LED显示屏。

将iDotMatrix显示器连接到Claude、ChatGPT或任何兼容MCP的客户端，并要求它绘制图片、图标、动画、仪表板——任何适合16x16、32x32或64x64像素网格的东西。

运作原理

服务器维护一个与显示器分辨率匹配的内存像素画布。人工智能助手通过MCP工具与画布交互——绘制形状、填充颜色、渲染文本——然后通过BLE将完成的帧推送到物理显示器上。

AI Assistant  ──MCP tools──>  idotmatrix-mcp  ──BLE──>  iDotMatrix Display
                              (canvas buffer)

工作流程：

  1. 助理打来电话 discover_devices 查找附近的iDotMatrix显示器
  2. 它与 connect_device，指定屏幕大小
  3. 它使用绘图工具在画布上绘制（或 draw_batch 同时进行多个操作）
  4. 它召唤 get_preview 在聊天中查看ANSI块艺术预览
  5. 它召唤 send_to_display 将框架推送到物理设备

先决条件

  • Node.js 18+
  • macOS （BLE支持通过 idotmatrix npm包——底层使用Noble）
  • 一 iDotMatrix LED显示屏 已通电且在蓝牙范围内

安装

git clone https://github.com/nailan/idotmatrix-mcp.git
cd idotmatrix-mcp
npm install
npm run build

配置

克劳德桌面版

添加到您的Claude桌面配置(~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "idotmatrix": {
      "command": "node",
      "args": ["/absolute/path/to/idotmatrix-mcp/dist/index.js", "--stdio"]
    }
  }
}

Claude 代码

添加到您的克劳德代码设置(.claude/settings.json 或全球）：

{
  "mcpServers": {
    "idotmatrix": {
      "command": "node",
      "args": ["/absolute/path/to/idotmatrix-mcp/dist/index.js", "--stdio"]
    }
  }
}

HTTP模式（其他客户端）

服务器还支持不使用stdio的客户端的Streamable HTTP传输：

node dist/index.js                  # defaults to http://127.0.0.1:8321/mcp
node dist/index.js --port=9000      # custom port

工具

画布管理

工具 说明
clear_canvas(color) 用一种颜色填充整个画布并重置
get_preview() 返回画布的ANSI块艺术预览
list_colors() 用十六进制值列出所有48种命名颜色

绘图图元

工具 说明
draw_rect(x, y, width, height, color, fill?) 矩形（默认填充）
draw_circle(cx, cy, radius, color, fill?) 圆圈（默认填写）
draw_ellipse(cx, cy, rx, ry, color, fill?) 具有独立半径的椭圆
draw_line(x1, y1, x2, y2, color) 两点之间的线
draw_triangle(x1, y1, x2, y2, x3, y3, color, fill?) 三角形（默认填充）
draw_rounded_rect(x, y, width, height, radius, color, fill?) 圆角矩形
draw_polygon(cx, cy, radius, sides, color, fill?, rotation?) 正多边形（3-12条边）
draw_gradient(x, y, width, height, color_from, color_to, direction?) 线性渐变填充（垂直、水平或对角线）
set_pixel(x, y, color) 设置单个像素
flood_fill(x, y, color) 油漆桶从一个点填充
draw_text(text, x, y, color, font_size?) 位图文本（3x5“小”或5x7“中”）

批量绘图

工具 说明
draw_batch(commands) 在一次调用中执行多个绘图命令

draw_batch 接受命令对象数组。每个对象都有一个 command 字段加上与相应单个工具相同的参数。这是组合场景最有效的方法——一次工具调用，而不是多次往返。

[
  { "command": "clear", "color": "dark_blue" },
  { "command": "gradient", "x": 0, "y": 0, "width": 64, "height": 32, "color_from": "navy", "color_to": "sky_blue" },
  { "command": "circle", "cx": 48, "cy": 8, "radius": 5, "color": "yellow" },
  { "command": "ellipse", "cx": 20, "cy": 16, "rx": 10, "ry": 5, "color": "white" },
  { "command": "rounded_rect", "x": 10, "y": 40, "width": 44, "height": 16, "radius": 4, "color": "green" },
  { "command": "polygon", "cx": 50, "cy": 10, "radius": 6, "sides": 5, "color": "gold" },
  { "command": "text", "text": "HI", "x": 28, "y": 44, "color": "white" }
]

支持的命令： clear, rect, circle, ellipse, line, triangle, rounded_rect, polygon, gradient, pixel, fill, text.

执行在第一个错误时停止，并报告哪个命令失败。

设备管理

工具 说明
discover_devices(timeout_seconds?) 扫描附近的iDotMatrix BLE设备
connect_device(device_id, screen_size) 连接到设备（屏幕大小：16、32或64）
disconnect_device() 断开与当前设备的连接
send_to_display() 将画布缓冲区推到连接的显示器上

调色板

该服务器包括一个针对LED显示器优化的48色调色板。使用 list_colors 查看所有选项。一些亮点：

  • 中立者： black, white, gray, dark_gray, light_gray
  • 温暖： red, orange, yellow, coral, salmon, pink, hot_pink
  • 太酷了！ blue, cyan, green, teal, sky_blue, purple, violet
  • 地球： brown, tan, sand, skin, peach, dark_brown
  • 性质： forest, dark_green, lime, spring, mint, olive

渐变在任何两种调色板颜色之间插值，产生平滑的中间色调，不限于48种调色板。

提示

服务器附带了一个 drawing-guide 提示，为AI助手提供有关坐标系、可用工具、调色板和像素艺术提示的上下文。支持提示的MCP客户端将自动提供此功能。

坐标系

  • 起源 (0, 0) 是 左上 角落
  • X向右增加，Y向下增加
  • 绘制超出界限的图形会被自动剪切

发展

npm run dev          # run with tsx (no build step)
npm run build        # compile TypeScript to dist/
npm run clean        # remove dist/

许可证

麻省理工学院

相关 MCP