Customize the render tool

Every workspace gives the model a tool for A2UI. Out of the box it’s called render_ui and knows the A2UI standard catalog. Everything about it can be changed per workspace, in Settings → Workspaces → Generative UI or in moka.json.

{
  "id": "bank",
  "name": "Acme Bank demo",
  "generativeUi": {
    "toolName": "show_ui",
    "catalogIds": ["banking"],
    "deny": ["Slider", "Tabs"],
    "instructions": "Prefer Cards for results. Only build forms when you need 3+ fields.",
    "theme": { "primaryColor": "#0a5cff", "radius": 14, "font": "Inter", "agentDisplayName": "Acme Assistant" }
  }
}

"generativeUi": false still turns it off, and true (or leaving it out) keeps the defaults.

Options

Field	Default	What it does
`enabled`	`true`	Offer the tool at all
`toolName`	`render_ui`	The name the model calls. Match your production agent so prompts transfer
`standard`	`true`	Include the A2UI standard catalog
`catalogIds`	`[]`	Custom catalogs to add
`allow`	all	Only these component names
`deny`	none	Never these component names
`instructions`		Appended to the tool description
`description`	generated	Replace the whole tool description (advanced)
`examples`	`true`	Put catalog examples into the description
`repair`	`true`	Validate against the catalog and send errors back so the model fixes its UI
`theme`		`primaryColor`, `radius` (px), `font`, `density` (`compact`), `agentDisplayName`, `iconUrl`

The tool’s input schema lists the allowed component names as an enum and declares every component prop (merged by name, with literal-or-{"path"} types). Models that follow schemas closely only pick real components, and providers that drop undeclared arguments, such as Gemini, keep every prop.

Self-repair

With repair on, Moka checks every call against the active catalogs: unknown components, missing required props, wrong enum values or types, duplicate ids and dangling child/children references. If anything is wrong nothing is shown, and the model receives a message like this:

Invalid UI, nothing was shown. Fix these problems and call show_ui again:
- "acct" (AccountCard) is missing required prop "balance"
- "size" uses unknown component "Dropdown". Allowed: Text, Image, …, AccountCard

Most models fix it on the next step. You’ll see both attempts in the chat and the inspector.

Theme

The theme is sent as the A2UI createSurface.theme and applied to that surface only: accent color (buttons, icons, selected choices), corner radius, font and density. agentDisplayName and iconUrl label the surface, which is handy when you demo a product’s assistant.

The playground

Settings → Generative UI → Playground is where you iterate on all of this:

UI JSON: edit render_ui input and see it render live, validated against the chosen workspace’s catalogs.
Ask a model: pick any configured model and send a prompt with only the render tool available. Invalid UI goes back to the model with the errors (up to 3 tries, like in chat), and you see how many tries it took. It’s a quick way to compare how well Gemini, GPT, Claude or a local model use your catalog.
What the model sees: the exact tool name, description and JSON schema the workspace sends to the model, with a copy button.

The bar under the tabs lists every catalog and shows which ones the chosen workspace uses. Click one to turn it on or off for that workspace. If your UI uses a component from a catalog the workspace doesn’t use, the error (uses unknown component "Meter") names the catalog and has an Enable it button. Send to playground on any catalog component opens the playground with that component loaded.