Drawing as I speak? 'Agent Draw', an AI collaborating with you in real-time

The Agent Draw interface screen where AI is drawing on an infinite canvas in real-time.
AI Summary

Agent Draw is an interactive tool that allows an AI agent to understand user voice commands and draw or place shapes directly on an infinite canvas in real-time.

Imagine this: you’re staring at a blank sheet of paper and say, “Draw me a delicious pizza here,” and right before your eyes, the AI starts drawing lines, sketching out cheese and pepperoni. This magical scenario is getting ready to become part of our daily lives. The recently released ‘Agent Draw’ is completely changing the way we collaborate with AI.

Why is this tool getting attention?

Until now, when we asked AI to draw something, we would usually input a prompt, wait a moment, and simply ‘receive’ the finished result. In other words, the AI was more of an entity that unilaterally handed us an output. But Agent Draw is completely different. It demonstrates a process of ‘collaboration’ where it constantly communicates with the user on the canvas and draws together in real-time 2.

This means that creative work is no longer a solitary process. Just as you would finish a drawing by exchanging ideas with a colleague in front of a whiteboard in a conference room, human and AI can now work together in the same space. AI is moving beyond its role as a mere ‘tool’ that generates results and is being reborn as an active ‘colleague’ standing on the canvas with you 13.

How does it work?

The working principle of Agent Draw is more sophisticated than you might think. To put it simply, imagine there is a ‘smart AI robotic arm’ on the canvas that acts as an extension of your hand, drawing for you even if you don’t draw it yourself.

AD
  1. Infinite Canvas (tldraw SDK): This is the foundational canvas environment. It uses ‘tldraw’, a React-based infinite canvas SDK, to create a space where the AI can freely place shapes and draw 1, 15.
  2. Agent Starter Kit (Basic training course): This acts as the ‘fundamentals’ that teach the AI how to draw and handle shapes. Through this kit, the AI can read and place basic shapes like rectangles, diamonds, and arrows, and manipulate canvas elements in detail, moving beyond simple images 6, 12.
  3. Traffic Control System (State Machine): This ensures the system doesn’t get tangled up even if the user throws multiple requests at once. By using a FIFO (First-In, First-Out) queue and a state machine, it manages the AI so it can focus on and solve one work session at a time sequentially 8.

Through this process, the AI understands the meaning of voice commands within the canvas area specified by the user, draws shapes in real-time, and immediately reflects the user’s intent 2, 3.

Where are we currently?

Agent Draw is currently built upon the official ‘Agent Starter Kit’ for developers 2, 5. Users converse with the agent through the chat panel on the right side of the screen. Here, they can add necessary background information or communicate while checking the history of tasks the agent has performed so far 6, 11.

The AI is quite adept at performing basic shape combinations and compositions. It’s not just about drawing; it can also provide complex task assistance, such as creating to-do lists or instantly updating them when requested 12. Of course, it is currently much more optimized for systematic diagram creation or as a real-time visual aid tool rather than complex artistic creation 9, 11.

How will we work in the future?

The emergence of Agent Draw is a small preview of how we will be working with AI in the not-too-distant future. In the future, AI agents will perform deeper reasoning on the canvas, grasp the user’s subtle intentions, and develop to a level where they can revise blueprints or suggest ideas on their own.

We will soon have a ‘true visual colleague’ by our side that not only creates static images but also thinks and draws with us in the physical space of the canvas. The canvas on the screen is no longer just a digital sketchbook; it will become a new venue for collaboration where humans and AI align their thoughts in real-time.


MindTickleBytes AI Reporter’s View

There have been many AIs that can draw, but AIs that understand the ‘space’ of a canvas and build up results while interacting with the user have been rare. The process itself, where AI breathes with our thoughts and completes something together, is changing the very essence of the creative experience.

References

  1. Show HN: Agent Draw: An agent draws while you talk, built on TLDraw
  2. Agent Draw — Speak, and an AI Agent Draws It Live on Canvas
  3. Agent Draw: drag a box, speak, an AI agent draws inside it
  4. Agent Draw: An agent draws while you talk, built on TLDraw
  5. Show HN:Agent Draw,基于 TLDraw 构建,在你说话时自动绘图。
  6. GitHub - tldraw/agent-template: Enable AI agents to interpret …
  7. Better HN - bhn.vercel.app
  8. [Agent Draw: An agent draws while you talk, built on TLDraw Tech Stackups](https://techstackups.com/articles/tldraw-agent-draw/)
  9. Agent starter kit • tldraw Docs
  10. Starter kits • tldraw Docs
  11. tldraw × AI Agent: Exploring the Mechanics with the Agent Starter Kit
  12. tldraw/apps/docs/content/starter-kits/agent.mdx at main · tldraw/tldraw
  13. Agents on the Canvas With tldraw by Max Drake
  14. Build a Real-Time tldraw Whiteboard with Velt Comments inside ChatGPT🤯🔥 - DEV Community
  15. tldraw MCP App: Letting your agents draw
  16. [Show Hacker News - nhn.yuu.is](https://nhn.yuu.is/show)
AD
Test Your Understanding
Q1. What technology is Agent Draw built upon?
  • Figma
  • TLDraw SDK
  • Adobe Photoshop
Agent Draw is built on tldraw, an infinite canvas SDK based on React.
Q2. How does the user send commands to the agent?
  • Dedicated keyboard input
  • Voice and text conversation via the right-hand chat panel
  • Uploading image files
Users can converse with the agent and provide context via voice or text through the chat panel on the right side of the screen.
Q3. How does Agent Draw handle multiple requests?
  • Processed in random order
  • State machine processing using a FIFO (First-In, First-Out) queue
  • All requests are processed in parallel simultaneously
When multiple requests come in, it uses a FIFO queue and a state machine to process one session at a time sequentially.
Drawing as I speak? 'Agent ...
0:00