Visual Builder
Overview
Section titled “Overview”The Flow-Like Visual Builder is a drag-and-drop interface for creating A2UI pages and widgets. It produces the same A2UI JSON format that AI agents generate—making human and AI work fully interchangeable.
┌─────────────────────────────────────────────────────────────────────┐│ Human + AI Collaboration │├─────────────────────────────────────────────────────────────────────┤│ ││ ┌─────────────────┐ ┌─────────────────┐ ││ │ Visual Builder │ │ AI Agent │ ││ │ (Human) │ │ (Automated) │ ││ └────────┬────────┘ └────────┬────────┘ ││ │ │ ││ └────────────┬───────────────────┘ ││ ▼ ││ ┌─────────────┐ ││ │ A2UI │ ││ │ Format │ ││ └──────┬──────┘ ││ │ ││ ┌─────────────┼─────────────┐ ││ ▼ ▼ ▼ ││ ┌─────────┐ ┌─────────┐ ┌─────────┐ ││ │ Edit │ │ Share │ │ Render │ ││ │ in Both │ │ Export │ │ Live │ ││ └─────────┘ └─────────┘ └─────────┘ ││ │└─────────────────────────────────────────────────────────────────────┘Builder Interface
Section titled “Builder Interface”┌─────────────────────────────────────────────────────────────────────────────┐│ Flow-Like Builder [Page ▾] [Save] │├───────────┬─────────────────────────────────────────────┬───────────────────┤│ │ │ ││ PALETTE │ CANVAS │ INSPECTOR ││ │ │ ││ ─────────│ ┌────────────────────────────────────┐ │ PROPERTIES ││ Layout │ │ ┌──────┐ ┌──────┐ ┌──────┐ │ │ ─────────── ││ ┌──────┐ │ │ │ KPI │ │ KPI │ │ KPI │ │ │ Label: Revenue ││ │ Row │ │ │ └──────┘ └──────┘ └──────┘ │ │ Size: [M ▾] ││ └──────┘ │ │ │ │ ││ ┌──────┐ │ │ ┌────────────────────────────┐ │ │ BINDINGS ││ │Column│ │ │ │ │ │ │ ─────────── ││ └──────┘ │ │ │ Line Chart │ │ │ Value: ││ │ │ │ │ │ │ [/revenue ▾] ││ Display │ │ └────────────────────────────┘ │ │ ││ ┌──────┐ │ │ │ │ ACTIONS ││ │ Text │ │ │ ┌────────────────────────────┐ │ │ ─────────── ││ └──────┘ │ │ │ Orders Table │ │ │ On Click: ││ ┌──────┐ │ │ │ Name | Date | Amount │ │ │ [view-details] ││ │Image │ │ │ │ ─────────────────── │ │ │ ││ └──────┘ │ │ │ John | Dec 1 | $500 │ │ │ STYLE ││ │ │ └────────────────────────────┘ │ │ ─────────── ││ Input │ │ │ │ Padding: 16px ││ ┌──────┐ │ └────────────────────────────────────┘ │ Background: ○ ││ │Button│ │ │ ││ └──────┘ │ │ ││ ┌──────┐ │ │ ││ │ Form │ │ │ ││ └──────┘ │ │ ││ │ │ │├───────────┴─────────────────────────────────────────────┴───────────────────┤│ LAYERS: [Page] > [Header Row] > [KPI Card] 📱 💻 🖥️ [Undo] │└─────────────────────────────────────────────────────────────────────────────┘Key Areas
Section titled “Key Areas”| Area | Purpose |
|---|---|
| Palette | Components you can drag onto the canvas |
| Canvas | Visual representation of your page/widget |
| Inspector | Configure selected component’s properties |
| Layers | Navigate the component hierarchy |
Drag & Drop
Section titled “Drag & Drop”Adding Components
Section titled “Adding Components”- Click a component in the palette
- Drag to the canvas
- Drop where you want it
- Configure in the inspector
Arranging Components
Section titled “Arranging Components”- Drag components to reorder within containers
- Hover on edges to see insertion points
- Drop between siblings to insert
Container Behavior
Section titled “Container Behavior”Containers (Row, Column, Card) accept children:
┌─────────────────────────────────────────┐│ Row Container ││ ┌─────────┐ ┌─────────┐ ┌─────────┐ ││ │ Drop │ │ Child 1 │ │ Child 2 │ ││ │ Here │ │ │ │ │ ││ └─────────┘ └─────────┘ └─────────┘ │└─────────────────────────────────────────┘Inspector Panel
Section titled “Inspector Panel”Properties Tab
Section titled “Properties Tab”Configure the selected component:
┌─────────────────────────────────┐│ PROPERTIES │├─────────────────────────────────┤│ Label ││ [Total Revenue ] ││ ││ Size ││ ○ Small ● Medium ○ Large ││ ││ Show Trend ││ [✓] ││ ││ Icon ││ [chart-line ▾] │└─────────────────────────────────┘Bindings Tab
Section titled “Bindings Tab”Connect to flow data:
┌─────────────────────────────────┐│ BINDINGS │├─────────────────────────────────┤│ Value ││ [/flows/metrics/revenue ▾] ││ ││ Trend ││ [/flows/metrics/trend ▾] ││ ││ Available Data: ││ ├─ /flows/metrics/revenue ││ ├─ /flows/metrics/orders ││ └─ /context/user │└─────────────────────────────────┘Actions Tab
Section titled “Actions Tab”Define user interactions:
┌─────────────────────────────────┐│ ACTIONS │├─────────────────────────────────┤│ On Click ││ [Trigger Flow ▾] ││ Flow: [get-details ▾] ││ ││ On Hover ││ [Show Tooltip ▾] ││ Content: "View details" ││ ││ [+ Add Action] │└─────────────────────────────────┘Preview Mode
Section titled “Preview Mode”Test your creation before saving:
| Mode | Description |
|---|---|
| 📱 Mobile | Phone-sized viewport |
| 💻 Tablet | Tablet-sized viewport |
| 🖥️ Desktop | Full-width preview |
| Live Data | Connect to real flows |
┌─────────────────────────────────────────┐│ Preview: Mobile [×] │├─────────────────────────────────────────┤│ ┌─────────────────────────────────┐ ││ │ 📱 Mobile View │ ││ │ ┌───────────────────────┐ │ ││ │ │ Revenue $124,500 │ │ ││ │ │ ▲ 12.5% │ │ ││ │ └───────────────────────┘ │ ││ │ ┌───────────────────────┐ │ ││ │ │ Orders 1,234 │ │ ││ │ │ ▲ 8.2% │ │ ││ │ └───────────────────────┘ │ ││ │ ┌───────────────────────┐ │ ││ │ │ Chart │ │ ││ │ └───────────────────────┘ │ ││ └─────────────────────────────────┘ │└─────────────────────────────────────────┘Keyboard Shortcuts
Section titled “Keyboard Shortcuts”| Shortcut | Action |
|---|---|
Ctrl/Cmd + S | Save |
Ctrl/Cmd + Z | Undo |
Ctrl/Cmd + Shift + Z | Redo |
Ctrl/Cmd + C | Copy component |
Ctrl/Cmd + V | Paste component |
Ctrl/Cmd + D | Duplicate |
Delete | Remove component |
Escape | Deselect |
AI Assistance
Section titled “AI Assistance”The builder includes AI features:
Ask AI
Section titled “Ask AI”Describe what you want to add:
┌─────────────────────────────────────────┐│ 🤖 Ask AI │├─────────────────────────────────────────┤│ "Add a chart showing revenue by month ││ below the KPI cards" ││ ││ [Generate] │└─────────────────────────────────────────┘AI Suggestions
Section titled “AI Suggestions”Get recommendations based on your design:
┌─────────────────────────────────────────┐│ 💡 Suggestions │├─────────────────────────────────────────┤│ • Add responsive breakpoints ││ • Consider a loading state for chart ││ • Table might benefit from pagination ││ ││ [Apply] [Dismiss] │└─────────────────────────────────────────┘Output Format
Section titled “Output Format”The builder saves your work as A2UI JSON:
{ "surfaceUpdate": { "components": [ {"id": "root", "component": {"Column": {"children": {"explicitList": ["header", "content"]}}}}, {"id": "header", "component": {"Row": {"children": {"explicitList": ["kpi-1", "kpi-2", "kpi-3"]}}}}, {"id": "kpi-1", "component": {"Card": {"child": "kpi-1-content"}}}, ... ] }}This is the same format AI agents produce—meaning you can:
- Open AI-generated UIs in the builder
- Have AI modify what you built manually
- Export for use anywhere A2UI is supported