Skip to main content

Builder

AppBuilder is the opinionated authoring surface for an AppSpec. It is controlled by a base app plus an AppPatch[]; every gesture, model suggestion and migration uses that same reviewable change format.

Install​

pnpm add @zuilib/builder

React and React DOM are the required peers. For Tailwind v4:

@import "tailwindcss";
@import "@zuilib/primitives/tailwind.css";
@import "@zuilib/apps/tailwind.css";
@import "@zuilib/builder/tailwind.css";
import AppBuilder from '@zuilib/builder/app-builder'

const [patches, setPatches] = useState<AppPatch[]>([])

<AppBuilder
  app={baseApp}
  registry={registry}
  patches={patches}
  onPatchesChange={setPatches}
  datasets={previewData}
  environment="staging"
  presence={collaborators}
  logs={builderLogs}
  runs={actionRuns}
  versions={versions}
  onSave={(app, patches) => saveDraft(app, patches)}
  onShare={(app) => copyReviewLink(app.id)}
  onPublish={(app, request) => publish(app, request)}
  assistant={{
    suggestions: ['Add an executive summary', 'Make this chart full width'],
    propose: (ask, context) => model.proposeAppPatches(ask, context),
  }}
/>

Four stable regions​

  • The top bar owns mode, environment, undo/redo, history, validation, sharing, saving and publishing.
  • The left rail and catalog manage pages, components, data resources, state, actions, theme and permissions.
  • The canvas renders the selected page in design, preview, responsive or data debug mode.
  • The inspector and bottom panel expose component props, bindings, actions, policies, breakpoint layout, results, issues, logs, runs, AI proposals, diffs and versions.

Because the builder receives a ViewRegistry, product teams can add their own typed components without forking the authoring model. The registry is also the source of preview examples, prop editors, validation and model context.

Human and AI changes are peers​

An AI assistant returns an AppChangeTransaction, including actor, risk, description and AppPatch[]. The builder previews the proposal and requires an explicit apply or discard. Applied patches enter the same undo history as drag, insert and property edits.

Use appPromptContext(app, registry) and the JSON schema helpers from @zuilib/apps/ai to ground a model in the current pages, resources, variables, actions, policies and allowed component vocabulary. Validate its transaction before offering it for review.

Library and creation​

AppLibrary supplies search, type/status/team filters, sort, favorites, duplication and archive operations. CreateAppDialog supports a blank app, templates, governed data sources, prompt generation and cloning an existing app. Both are controlled components so product-specific persistence and routing stay with the host.

Try all of these controls in the full playground on the Apps page.