Skip to main content

/a2ui - Generate Agent UI

Generate A2UI (Agent-to-User Interface) JSON from descriptions or agent outputs.

Usage​

/a2ui <description>              # Generate UI from description
/a2ui --dashboard <title>        # Quick dashboard template
/a2ui --form <title>             # Quick form template
/a2ui --validate <file>          # Validate A2UI JSON
/a2ui --preview <file>           # Preview in browser

Examples​

Generate Custom UI​

/a2ui "Create a task management interface with a list of tasks, status indicators, and action buttons"

Quick Templates​

# Dashboard with metrics cards
/a2ui --dashboard "Sales Dashboard"

# Multi-step form
/a2ui --form "Customer Onboarding"

# Report layout
/a2ui --report "Monthly Analytics"

Validate Existing UI​

/a2ui --validate ui/dashboard.json

Preview in Browser​

/a2ui --preview ui/dashboard.json
# Opens http://localhost:3000/preview

Output​

{
  "type": "a2ui",
  "version": "0.8",
  "components": [
    {"id": "root", "type": "container", "children": ["header", "content"]},
    {"id": "header", "type": "text", "properties": {"variant": "h1", "content": "Task Manager"}},
    {"id": "content", "type": "list", "properties": {"items": "{{data.tasks}}"}}
  ],
  "data": {
    "tasks": []
  }
}

Integration with CODITECT Agents​

# Generate UI for agent results
/agent senior-architect "Design system" | /a2ui --from-agent

# Use a2ui-generator agent directly
/agent a2ui-generator "Create a code review dashboard with file list, diff viewer, and comment section"

Prerequisites​

  • A2UI submodule: ~/.coditect/submodules/tools/A2UI/
  • For preview: Node.js and npm

Quick Setup​

# Build renderer (one-time)
cd ~/.coditect/submodules/tools/A2UI/renderers/lit
npm install && npm run build
  • Agent: a2ui-generator
  • Skill: a2ui-component-design
  • Repository: google/A2UI

Version: 1.0.0 Created: 2026-01-13