AI Builder

The AI builder tab is a chat interface for authoring a widget's spec. Describe what you want, review the assistant's proposal, and apply it to replace the widget's current spec.

Starting from a template

When a widget has no conversation yet, the tab shows a grid of featured templates. Clicking a template applies its spec to the widget immediately — no chat turn required. Once the widget has any conversation history, the template grid is replaced by the chat thread.

Sending a message

Type a request (for example, "add a button that opens a link" or "make the second field a date picker") and send it. Each turn:

1. Your message is appended to the widget's saved conversation. The server sends it to the assistant along with the saved turn history and the widget's current saved spec.
2. The assistant returns a short reply plus, optionally, a proposedSpec — a complete replacement spec, not a diff.
3. If a proposal is present, it renders below the reply as a JSON preview with an Apply to widget button.

If your request is ambiguous, the assistant may reply with a clarifying question and no proposal.

Applying a proposal

Only the most recent, not-yet-applied proposal in the thread is actionable — older ones are marked "Superseded by a newer proposal". Clicking Apply to widget:

• Replaces the widget's spec with proposedSpec.
• Marks that turn as applied in the conversation history.
• Updates the AST, Variables, Functions, and States shown on the other tabs.

Applying a proposal does not publish the widget — it only updates the working draft. Use Publish in the editor toolbar once you're satisfied.

What the assistant knows

Every request uses the supported widget vocabulary and a structured proposal schema:

• Only the host components listed in the component catalog are valid in ast.
• Use names matching /^[a-zA-Z_][a-zA-Z0-9_]*$/ for variables, functions, and states.
• AI proposals allow at most six component levels, counting the root as level one. For example, Box → Col → Table → TableRow → TableCell → Text fits. This is a proposal-schema limit, not a nesting limit imposed by the code editor.
• Proposal props are scalars (string, number, boolean, or null), plus option arrays of { label, value, disabled? } for Select and RadioGroup. Defaults and setVariable values may be scalars, flat scalar records, or arrays of scalars or flat records. Server args and additionalInputs are scalar records.
• The six function types are server, client, sendMessage, openLink, dismiss, and setVariable. Wire them to supported action components via onClickAction: { functionName, additionalInputs? }; server inputs are literal values.
• States are referenced in the AST as a State component node: { component: "State", props: { name: "..." }, children: [...] }.
• Table children must be TableRow nodes, and TableRow children must be TableCell nodes.
• Chart.data must name a declared variable holding an array of objects — never inline data.
• Icon.name must be one of the curated icon names (see Media).

The assistant is instructed to keep existing behavior intact unless you ask to change it, and to prefer setVariable for client-side UI toggles (like showing/hiding a section) over a server round trip.