Show HN: Agent Draw: An agent draws while you talk, built on TLDraw

背景

Hacker News 上发布了一个名为 Agent Draw 的开源项目，它基于 tldraw（一个用于 React 的无限画布 SDK）构建。项目的起因是作者团队之前开发了一款叫 2draw 的 Drawful 风格游戏，玩家在共享画布上画画并竞猜彼此的画作。他们开始思考：如果在这个循环中加入一个 AI 智能体（agent）作为对手或竞猜者，会是什么样子？于是他们研究如何让智能体读取并在 tldraw 画布上绘图，最终催生了 Agent Draw 工具。

核心内容

Agent Draw 是一个能在你演示时帮你绘图的智能体。你可以在画布上拖拽一个矩形，说出你希望矩形内呈现的内容，然后继续说话，AI 智能体便会自动完成绘图。如果你连续拖拽多个矩形，它们会排队依次绘制。这一切都发生在 tldraw 提供的无限画布上。

tldraw 是什么？
tldraw 是一个面向 React 的无限画布 SDK，用户可以用鼠标驱动编辑器 API，而智能体则可以通过代码驱动同样的 API，创建形状、移动它们、在它们之间绘制箭头。

项目构建基础
作者并没有从头构建智能体。tldraw 官方已经发布了一个 Agent 入门套件，它通过聊天面板绘制和排列形状，后端由 Cloudflare Worker 支持。Agent Draw 正是基于此构建的。

智能体绘图能力评估
作者测试了不同模型在相同指令下的表现。指令是：画一个决策图，以及画一个正在打板球的人。

• claude-opus-4.8：表现优秀，决策图清晰，使用基础图元构建；板球场景则用钢笔工具画出了完整的动态场景。
• claude-haiku-4.5：决策图与 Opus 相当，但板球任务只用了基础图元，没有使用钢笔工具，且画了一个带标签的静态简单构图。
• google/gemini-2.5-flash-lite：更弱，似乎对两个任务都过早放弃了，输出结果非常简陋。

技术实现细节
整个功能由四个部分组成：一个全新的画布工具、语音管道、序列化绘图队列和提示词模块。

1. 捕获用户拖拽区域：通过继承 tldraw 的 StateNode 实现 AreaCaptureTool，三个状态（idle → pointing → dragging），在 pointer-up 时获取最终矩形边界（页面坐标），并启动捕获会话。
2. 语音录制：捕获开始时打开麦克风，使用浏览器 MediaRecorder 封装 AreaRecorder，提供 start 和 stop 方法，不涉及智能体或转录逻辑。
3. 语音转文字：将音频 blob 发送到 Cloudflare Worker 上的 /transcribe 路由，该路由将音频转发给 Mistral 的 Voxtral 转录模型（voxtral-mini-transcribe-2507），返回文本。默认使用服务器持有的 API 密钥，访客也可自定义自己的密钥。
4. 多任务排队处理：支持同时拖拽多个矩形，它们会排队依次处理。通过模块级状态机管理：一个活跃的录音器、一个 FIFO 队列、一个单消费者 worker 顺序处理会话。新捕获会自动停止当前录音并将其加入队列，然后依次转录、绘图。串行执行是核心——智能体一次只处理一个请求，新捕获等待前一个完成。

关键要点

• Agent Draw 允许用户在演示时通过语音和拖拽矩形区域，让 AI 智能体自动在指定区域内绘制内容，无需手动操作。
• 底层基于 tldraw 的无限画布 SDK，智能体通过代码驱动画布 API 创建、移动、连接形状。
• 智能体绘图能力与后端模型强弱直接相关：强大模型（如 claude-opus-4.8）能生成复杂动态场景；较弱模型（如 claude-haiku-4.5）倾向于简化；最弱模型（如 google/gemini-2.5-flash-lite）可能放弃任务。
• 语音转录使用 Mistral 的 Voxtral 模型，在 Cloudflare Worker 上处理，服务器持有默认 API 密钥。
• 绘图队列采用 FIFO 串行执行，确保多个捕获按顺序处理，不会冲突。
• 捕获工具通过 tldraw 的 StateNode 机制实现，拖拽时显示原生选择刷，边界基于页面坐标，不受平移缩放影响。
• 整个项目代码开源，可在线体验，并提供了详细的实现代码示例。

意义与影响

Agent Draw 展示了将 AI 智能体无缝集成到实时协作画布中的可能性，尤其适用于演示、教学、白板讨论等场景。用户只需自然说话，智能体就能在指定区域生成图形，极大降低了绘图门槛，让非设计师也能快速可视化想法。该项目基于 tldraw 的 Agent 套件构建，体现了现有 SDK 的可扩展性。同时，它对不同模型能力的对比测试也揭示了当前 AI 模型在绘图任务上的差异：更强的模型能理解复杂指令并生成更丰富的构图，而弱模型则可能表现得过于简单或直接放弃。这提示开发者，在构建类似工具时需谨慎选择底层模型，并考虑容错机制。此外，项目采用服务器端语音转录和序列化队列的设计，为构建多用户、实时交互的 AI 绘图工具提供了可参考的架构模式。