An AI agent that sees what it builds.
Most AI tools generate code and leave you to check it. Backdraft's agent reads your project files, makes targeted edits across multiple files, then takes a screenshot and compares it to your reference mockup. If it does not match, it keeps going — without you asking.
Other AI tools
Generate code → paste it → check manually → describe the problem again → repeat. The AI never sees what it built.
Backdraft's agent
Edit code → render it → screenshot → compare to mockup → fix what doesn't match → loop automatically.
how it works
A loop, not a prompt.
Backdraft's AI is not a chatbot that generates code on demand. It is an autonomous agent with a structured tool-use loop:
Read
Read your project files to understand the existing code and structure.
Plan
Decide what to change based on your instructions and the current state.
Edit
Make targeted edits with replace and insert_after.
Screenshot
Render the result in a real browser environment and capture it.
Compare
Diff the screenshot against your reference mockup visually.
Iterate
Fix what does not match. Loops until the result matches your vision.
Each step uses real tools — not prompt engineering. Every tool call is logged and visible in the debug console.
tool belt
13+ tools the agent can reach for.
File operations, code editing, web search, image sourcing, fonts, animations, visual verification — all available to the agent in a single conversation.
Read & search files
Scans your project, reads source files, searches for specific code.
Edit code
Targeted replace, insert, and create operations across multiple files.
Web search & fetch
Finds documentation, examples, and reference code from the web.
Images & fonts
Unsplash image search, Google Fonts, animation kits — wired into your project.
CSS variables
Creates and updates design tokens and custom properties.
Animations
Curated snippets for GSAP, Animate.css, AOS, and pure CSS.
Screenshot
Renders your project and captures it at any viewport size.
Visual compare
Diffs the render against your reference mockup visually.
visual verification
The agent checks its own work. With screenshots.
After every round of edits, the agent renders your project in a real browser environment and captures a screenshot — at any viewport size from mobile to desktop. It sees exactly what your users will see.
If you provided a reference mockup, the agent compares the two visually. Wrong colors, misaligned elements, broken layouts — it spots the differences and loops back to fix them. No prompting from you.
multi-file
One conversation. Multiple files.
A layout change might touch a page component, a shared header, and a CSS file. The agent works across your entire project in a single conversation — reading, editing, and verifying across as many files as the task requires. Every change appears on the canvas in real time.
cli agents
Your favorite CLI agent, inside your visual editor.
Backdraft is the first visual editor with native CLI agent integration. Launch Claude Code, Codex, or Gemini CLI directly from within the editor. The CLI agent operates on your project files while you watch the canvas update in real time.
Claude Code
Anthropic's CLI agent. Runs directly on your source files. Sees the same project Backdraft sees.
Codex
OpenAI's CLI agent. Launch it from Backdraft's terminal, and your canvas updates as it works.
Gemini CLI
Google's CLI agent. Same integration — your project files, your canvas, real-time sync.
bring your own model
Your models. Your rules.
Backdraft does not lock you into a single AI provider. Choose the model that fits your needs, your budget, and your privacy requirements.
Ollama
Run models locally on your machine. Fully offline. No data leaves your computer. Works with any Ollama-compatible model — Llama, Mistral, CodeLlama, Phi, and more.
LM Studio
Local model server with a visual interface. Backdraft auto-detects loaded models and shows their capabilities. Load multiple models simultaneously for different tasks.
OpenRouter
Access cloud models (Claude, GPT-4, Gemini, open-source) through a single API. Pay per token. Switch models mid-conversation if you want.
Provider configurations and model preferences are stored locally — never sent to Backdraft's servers. There are no Backdraft servers. The app is local-first.
See also: Import Code Editor · Bidirectional Code ↔ Design
safety
Autonomous, not reckless.
An AI agent that edits your code needs guardrails. Backdraft's agent has them built in:
| Guardrail | What it prevents |
|---|---|
|
Path protection
|
The agent cannot read or write files outside your project directory |
|
Edit validation
|
Ambiguous edits are rejected — the agent must target a unique location in the file |
|
Idempotency
|
Duplicate inserts are skipped — the agent cannot accidentally add the same code twice |
|
Rate limits
|
Screenshots, web searches, and fetches are capped per session |
|
Loop detection
|
If the agent repeats the same action, the loop is broken automatically |
Every tool call is logged in the debug console with timestamps.
Give the agent a task.
Describe what you want. Watch the agent read, edit, screenshot, and iterate — until it matches your vision.