JSON-Driven UI Generation

How A2UI Works

A2UI (Agent-to-UI) is a protocol that defines how AI agents describe user interfaces using structured JSON. Instead of generating HTML or framework-specific code, agents output a component tree with types, properties, and children. The A2UIRenderer component takes this JSON and maps each node to a real React component using a pluggable component registry. The default registry uses shadcn/ui components for accessible, styled output out of the box.

Data binding uses JSON Pointer (RFC 6901) for reactive state management. When users interact with rendered components — typing in text fields, toggling checkboxes, moving sliders — the changes are captured and sent back to the agent over WebSocket. This creates a bidirectional loop where agents can update the UI in real time based on user input. The protocol supports 21 standard component types covering layout, text, inputs, data display, and navigation. The core library is framework-agnostic with zero dependencies, while renderer implementations exist for React, Vue, and Flutter.

Use Cases

• Dynamic agent dashboards where AI agents generate monitoring UIs that adapt based on the data they're processing.
• Conversational form builders where an agent creates forms on the fly based on user requirements expressed in natural language.
• Multi-agent workspaces where each agent renders its own control panel and they coordinate through shared state.
• No-code application builders where non-technical users describe interfaces in plain language and the AI generates A2UI schemas.

Integration Guide

Render agent-generated UI with the A2UI renderer:

import { A2UIRenderer } from '@ainative/ai-kit-a2ui';
import { useCoAgent } from '@ainative/ai-kit-a2ui/react';

function AgentUI() {
  const { schema, sendAction } = useCoAgent({
    url: 'wss://api.ainative.studio/agent/ws',
    agentId: 'my-agent',
  });

  return (
    <A2UIRenderer
      schema={schema}
      onAction={(action) => {
        // User clicked button, changed input, etc.
        sendAction(action);
      }}
      components={{
        // Override or extend default components
        CustomChart: MyChartComponent,
      }}
    />
  );
}