Agent Integration

Import flabCatalog from the dedicated entry point and serialise it into the LLM's system prompt. The catalog is a plain JavaScript object, so JSON.stringify is all you need.

import { flabCatalog } from '@flabbergasted-ai/a2ui/catalog';
const systemPrompt = [  'You are an AI agent that generates A2UI surfaces.',  'Here is the component catalog you MUST follow:',  JSON.stringify(flabCatalog, null, 2),  '',  'Rules:',  '- ' + flabCatalog.instructions,  '- Every component object must have a "component" discriminator field.',  '- Only use components listed in the catalog.',  '- Data bindings use { path: "/pointer/to/data" } syntax.',].join('\n');
const response = await openai.chat.completions.create({  model: 'gpt-4o',  messages: [    { role: 'system', content: systemPrompt },    { role: 'user', content: userQuery },  ],});

If the agent is not written in JavaScript, use the flab CLI to export the catalog as a static JSON file, then load it in whatever prompt pipeline you use.

# Print to stdoutflab a2ui catalog
# Write to a fileflab a2ui catalog --out flab-a2ui-catalog.json

Then load it in Python:

import json
with open("flab-a2ui-catalog.json") as f:    catalog = json.load(f)
system_prompt = f"""You generate A2UI surfaces. Follow this catalog:{json.dumps(catalog, indent=2)}
Rules: {catalog['instructions']}Only use components listed in the catalog.Every component must have a "component" discriminator field.Data bindings use {{ "path": "/pointer/to/data" }} syntax."""
response = client.chat.completions.create(    model="gpt-4o",    messages=[        {"role": "system", "content": system_prompt},        {"role": "user", "content": user_query},    ],)

The full catalog is ~650 lines of JSON. For token-constrained prompts, you can send only the components and instructions fields — this preserves all component definitions and generation guidance while cutting token usage by roughly 40%.

import { flabCatalog } from '@flabbergasted-ai/a2ui/catalog';
// Lean version — only what the agent needs to generate UIconst leanCatalog = {  instructions: flabCatalog.instructions,  components: flabCatalog.components,};
const systemPrompt =  'Generate A2UI surfaces using these components:\n' +  JSON.stringify(leanCatalog, null, 2);

Beyond prompt injection, the A2UI protocol has first-class catalog support. When the agent sends a createSurface message it can declare which catalog it generated against via catalogId. The renderer matches this against its known catalogs and rejects surfaces with unknown IDs.

{  "version": "v1.0",  "createSurface": {    "surfaceId": "main",    "catalogId": "urn:flab-ui:a2ui:catalog:v1"  }}

Individual components can also carry a catalogId to support mixed-catalog surfaces — for example a Flab base catalog plus a domain-specific extension catalog:

{  "id": "custom-widget",  "component": "DealPipeline",  "catalogId": "https://acme.com/a2ui/crm-catalog.json",  "deals": { "path": "/deals" }}

A complete loop: the agent receives the catalog in its system prompt, generates A2UI messages, and the renderer turns them into live Flab components.

// agent-side: build the prompt with the catalogimport { flabCatalog, FLAB_CATALOG_ID } from '@flabbergasted-ai/a2ui/catalog';
async function runAgent(userMessage: string) {  const response = await llm.chat({    system: [      'You are an A2UI agent. Respond ONLY with a JSON array of A2UI messages.',      'Catalog: ' + JSON.stringify(flabCatalog, null, 2),      'Every envelope MUST set "version" to "v1.0".',      'createSurface MUST set catalogId to ' + FLAB_CATALOG_ID + '.',    ].join('\n'),    user: userMessage,  });
  // Parse the LLM output as A2UI messages  const messages = JSON.parse(response.text);  return messages;  // → [  //   { version: "v1.0", createSurface: { surfaceId: "main", catalogId: FLAB_CATALOG_ID } },  //   { version: "v1.0", updateComponents: { surfaceId: "main", components: [...] } },  //   { version: "v1.0", updateDataModel: { surfaceId: "main", value: {...} } },  // ]}
// renderer-side: feed the messages through a transportimport { A2uiClient, A2UISurface, createMemoryTransport } from '@flabbergasted-ai/a2ui';
const transport = createMemoryTransport();const client = new A2uiClient(transport);client.connect();
const messages = await runAgent('Show a dashboard with 3 KPI stats');for (const msg of messages) {  transport.push(msg);}
// In your React tree:// <A2UISurface//   surface={client.surfaces.getSurface('main')!}//   onAction={(action) => {//     void client.onAction(action).catch((error) => console.error('A2UI action failed', error));//   }}// />