AI Agents

Plan. Build. Ship. — the three modes of AI in cdbx:

The three stages form a pipeline: the Planning Agent's output (a PRD, an ADR, a system diagram) becomes the Build Agent's input via connectors. The Build Agent's output triggers the Ship layer. No human paste required between stages.

The agents below are the Build layer — they act inside your app, writing code and iterating until the result is correct.

Self-Healing Agent

The Self-Healing Agent watches for errors in your app and fixes them automatically — no button click required.

How it works:

1. You run your code (or the preview auto-bundles).
2. If an error is detected (bundle error, runtime error, or non-zero exit code), the agent fires.
3. It writes a fix, re-runs, and checks the result.
4. If the error is gone, it stops. If not, it retries — up to 3 times.
5. After 3 failed attempts it surfaces a "Couldn't fix" message so you can take over.

Three modes — controlled from Settings → AI, an app's own Settings → AI tab, or the AI Settings panel in Advanced Mode (gear icon in the chat header). All three read and write the same setting.

Approval mode extras:

• Each error row has an individual "Fix with Agent" button.
• A "Fix All (N)" bar appears at the top when multiple errors exist.
• Each row shows a "Fixing…" or "Retrying… (N/3)" badge while the agent works.

The Self-Healing Agent works for both frontend (React, Vue, Svelte, Angular) and backend (Python, Go, Rust, etc.) apps.

Visual Loop Agent

The Visual Loop Agent closes the AI-to-UI feedback loop: after writing code, the agent captures what the preview actually renders and uses that to verify — or keep iterating.

How it works:

1. You describe what you want: "Make the button red and centered".
2. The agent writes the code changes via write_files.
3. The preview bundles automatically.
4. The agent calls get_preview, which returns the live rendered HTML from the iframe.
5. It checks whether the rendered output matches the goal.
6. If not, it writes another fix and repeats — up to 5 rounds.

What get_preview sees:

The rendered component tree — the actual DOM after React/Vue/Svelte has run. For example:

<div class="flex justify-center">
  <button class="bg-red-500 text-white px-4 py-2 rounded">Click me</button>
</div>

This lets the agent verify CSS classes, component structure, and rendered content. It cannot see colors or layout visually (no screenshots), but it can verify logical correctness — which covers the vast majority of UI iteration tasks.

When to use it:

You don't need to do anything special. Any time you ask the AI to build or change a UI component, it has access to get_preview and will use it when it determines verification would help. You can also prompt it explicitly:

"Build a login form and verify it renders correctly" "Make this component match this description and keep iterating until it does"

Availability: Visual Loop Agent is available for all frontend apps on the instant browser runtime — React, Vue, Svelte, Angular, and vanilla JS/HTML.

Help Assistant

The Help Assistant is the floating chat bubble on your dashboard (bottom-right corner). It knows everything about cdbx — features, plans, supported languages, and what's on the roadmap.

What it can answer:

• "What languages does cdbx support?"
• "How do I publish my app?"
• "Does cdbx support MCP?"
• "What's the difference between Free and Pro?"
• "How do AI agents work?"

How it works:

Every question is matched against the cdbx documentation. The most relevant pages are retrieved and used to ground the answer — so you get accurate, specific responses with links to the full docs rather than generic replies.

Source links: After each answer, the assistant shows links to the relevant documentation pages so you can read further.

Scope: The Help Assistant only answers questions about cdbx. For general coding help, use the AI Chat inside the editor.

Planning Agent

A strategic thinking partner on the dashboard — not a help bot, not a coding assistant. A product manager, UX designer, and software architect you can think out loud with.

Six plan types (Plan, Web App, Architecture, Research, Slides, API Spec) each configure the AI with a different focus and produce a different kind of artifact. Five personas (General, PM, Architect, UX, Writer) shift the AI's lens within a plan. Chat branching lets you explore diverging directions without losing prior work. Pinned decisions lock in settled choices so the AI stops re-debating them.

Because it has access to your connectors, the AI's advice can be grounded in your actual situation — reading your Notion docs, your GitHub issues, your Linear backlog — not generic best practices. Artifacts can be pushed back out via connectors: write a strategy doc to Notion, create a GitHub issue, post a planning summary to Slack.

How planning works →

Under the Hood

All agents share the same underlying infrastructure — they call the same Claude API you use in chat. The difference is purpose:

• Chat: you drive the conversation; high-reasoning model; full context
• Agents: autonomously execute a task; loop until done; optimised for the specific goal

Agents are spawned from chat — the AI decides when an agent loop would help, or you can prompt it explicitly.