Code Editor

The Code tab is the direct-editing surface for a widget. It has three parts: widget settings, the spec editor, and the schema editor.

Widget settings

A collapsible panel exposes:

Field	Description
Name	Used as the LLM tool name. Must match /^[a-zA-Z_][a-zA-Z0-9_]*$/.
Description	Shown to the LLM so it knows when to call this widget.
Content type	remote-dom (default, interactive) or rawHtml (static). See Widgets Overview.

The panel also lists agents the widget is attached to, and lets you attach or detach it from additional agents.

Spec editor

The spec editor edits the widget's ast (component tree) in two interchangeable modes:

• JSON — the canonical ComponentNode tree: { component, props?, onClickAction?, children? }.
• JSX — the same tree written as JSX elements, for a more visual authoring experience.

Switching modes reformats the current value; edits in either mode write back to the same underlying ast. Parse errors (invalid JSON, or JSX that doesn't map to a valid ComponentNode) are shown inline with a line/column location and block the switch until fixed.

JSX is a constrained authoring syntax, not executable React code. Use host component names, literal props, and onClickAction object literals; functions, spread attributes, fragments, and mixed text/element children are not supported. Put text alongside elements in a Text node. Use a quoted string such as value="Hello {customer}" for runtime variable interpolation.

<Col gap={8}>
  <Text value="Hello {customer}" />
  <Button label="View docs" onClickAction={{ functionName: "viewDocs" }} />
</Col>

Declare customer in variables and viewDocs in functions. Parsing the AST does not define those variables or functions for you.

Schema editor

Below the spec editor, the Schema panel edits the widget's declared variables as an input schema, again in two interchangeable modes:

• JSON — a JSON Schema object describing the variables the LLM can supply as tool input.
• Zod — the same schema written as a Zod object.

A Visual editor disclosure below the schema editor exposes the same variables as a form (name, type, default value, and whether the value is sourced from the LLM's tool call input via fromInput) for authors who prefer not to write schema syntax directly.

The schema editor maps top-level properties to variable names, types, and defaults; required properties become fromInput: true. It does not preserve a full arbitrary JSON Schema, including nested validation or enum constraints, in the variable list. Zod syntax is parsed without evaluating JavaScript. Use the supported literals and constructors (string, number, boolean, array, object, literal, enum, any, unknown) with optional, nullable, default, or describe; arbitrary refinements and transforms are not supported.

z.object({ customer: z.string().default("Guest") })

Relationship to the AI builder

The Code tab and the AI builder tab edit the same underlying spec — a proposal applied from the AI builder immediately updates what's shown here, and edits made here are what the AI builder sees as "the current spec" on your next message.