app_builder
From a single prompt, generate the full app: tables, components, alerts, and a top-level folder. Optional update_document_id to rewrite an existing app instead of creating a new one.
Xuda Developer Studio
AI agents that build the studio for you.
The fifth chapter
Agents are studio automations. They read the project, generate documents, optionally save them, and call back when done.
Xuda ships an AI app builder as a library plugin
(@xuda.io/xuda-library-plugin-studio-ai-app-builder). It exposes a fixed set of methods,
each of which is a callable agent: generate a table, generate a component, generate a whole app, plan
an app, convert pasted HTML, run a smoke test. You invoke them like any other plugin method, from a
workflow step or a button. They write directly into the project document the studio is editing.
The agent catalog
Eleven methods. Each one outputs a Xuda document, optionally saved.
Every agent shares a core field set: a name, a save toggle (write to the
studio or just return the doc), a parentId (where in the tree the new doc belongs), and
a callback event id plus a callback field id for receiving the result. Agents that produce runnable
documents also accept the live-preview smoke test fields: live_preview_test and
live_preview_timeout_ms.
app_planner
Markdown execution plan grouped by Xuda primitives (tables, components, APIs, folders, globals). Useful as the first step of a multi-turn build.
table_builder
One table from instructions. Picks fields, types, and indexes. Lands under the database root or a sub-folder via parentId.
component_builder
One component (program). Generates progFields, optional progDataSource, progEvents, and a progUi tree. Components can call other components.
ui_generator
Just the progUi tree. Styled with the Tailwind framework plugin. Useful when you want to write the fields and events yourself but skip the layout work.
alert_builder
A toast, modal, browser, or console alert. Choose alert_display, alert_type (success/error/warning/info), alert_title, and an optional description.
folder_builder
A folder node in the studio tree. Non-executable. Pure organization for grouping related programs, tables, APIs, and other folders.
update_studio_doc
Take a document_id and apply natural-language instructions. Preserves the identity of the doc so callers and listeners are not invalidated.
convert_html_to_component
Paste raw HTML, get back a Xuda component. Optional is_mini_app flag for self-contained widgets you want to drop into other components.
save_studio_docs
Bulk save or update. Accepts a single doc or an array. Optional update_document_id for in-place updates. Optional smoke test before commit.
tester
Run the live-preview headless smoke test against a component or set of docs. Returns pass/fail plus diagnostic output.
Invoke from a workflow
Agents are plugin methods. Use the
Agents are plugin methods. Use the plugin action.
Inside any program event, drop a plugin step pointing at the AI app builder. The runtime
fetches the per-app setup (model, API key, defaults), passes the field values, and either saves the
output to the studio (when save: true) or hands it back via the configured callback field.
Generate a table from a button click
<button xu-on:click='[{"workflow":[
{"data":{"action":"plugin",
"plugin":"@xuda.io/xuda-library-plugin-studio-ai-app-builder",
"method":"table_builder",
"fields":{
"name":"\"Invoices\"",
"instructions":"\"customer_id (string), amount (number), status enum draft|open|paid|void, created_at (date). Index on (status, created_at).\"",
"parentId":"\"folder_billing\"",
"save":"true",
"live_preview_test":"true"
},
"resultField":"newTable"
}},
{"data":{"action":"toast",
"name":{"value":"\"Created table \" + @newTable._id"}}}
]}]'>Build invoices table</button>
Smoke testing
Agents that build runnable docs can verify them in a headless live preview before saving.
Set live_preview_test: true and the agent boots a headless browser against the
live-preview server, mounts the generated doc, and waits up to live_preview_timeout_ms
milliseconds for the program to mount cleanly. If the smoke test fails, the agent returns the diagnostic
output instead of saving. This catches the most common failure mode: a generated tree that throws on
first render because of a typo in an expression or a missing field.
Why this works
Generating a Xuda doc is a small target. Generating React is a huge one.
A Xuda program is a JSON document with a fixed shape: a properties bag, a fields list, an events list,
and a UI tree of { type, tagName, attributes, children } nodes. There is no syntax to get
wrong, no imports to resolve, no build step to run. The model writes a small JSON object; the platform
renders it. That is the main reason an agent can produce a working component in one shot, and why a
human reviewer can audit the output in seconds.
Small structured target.
JSON document, fixed shape
No syntax errors. JSON parses or it does not.
Smoke-testable in a headless preview in seconds
Reviewer reads 50 lines, not 500
Saves directly into the live studio
Large open target.
Open-ended source files in a chosen language
Syntax, imports, build, and lint can all break
Verification needs a full local toolchain
Reviewer reads 500 lines across 10 files
Integrating means a separate write-and-bundle step
In the studio
Agents panel: pick a method, fill the fields, run, watch the tree update.
The Agents panel in the studio is a thin wrapper over the same plugin methods documented above. You
pick a method, the studio renders the field schema as a form, you fill it in, and the agent runs.
Output appears in the project tree (when save is on) or in a side panel (when it is off).
The same agents are callable from inside your own programs: every agent is just a plugin method, after
all.