Drawgent: Elevate Your Coding with Live Visuals

Imagine sketching your code directly on a canvas and watching it come to life. That's exactly what Drawgent promises—a new way to code by integrating live visual interfaces into programming workflows.

At its core, Drawgent connects coding agents like Claude Code, Codex, or opencode to an Excalidraw whiteboard. You ask for diagrams or make changes directly on the canvas. The agent processes the visuals, executes the code, and marks your tasks as done.

Key Takeaways

• Drawgent integrates coding agents with Excalidraw.
• Supports Claude Code, Codex, and opencode.
• Requires Node.js and Chrome/Chromium setup.
• Enables real-time visual feedback in coding.

How Drawgent Works

Integrating Coding Agents

Drawgent links your chosen coding agent—Claude Code, Codex, or opencode—to an Excalidraw whiteboard. This setup lets you interact with code through a live visual interface. Write AGENT: next to any part of your drawing you want to modify. The agent handles the rest.

Setup Requirements

To start with Drawgent, install and log into one of the supported agents. Both Claude and Codex need Node.js (version ≥ 18) for their bridges. The initial setup checks for all essential components like ACP adapters for Claude Code and Codex or native ACP support for opencode.

• : Required for Claude and Codex bridges.