A2UI Renderer

import { A2UIRenderer } from '@/blocks/agentic/a2ui-renderer'
import type { SurfaceDefinition } from '@/blocks/agentic/a2ui-renderer'

const surface: SurfaceDefinition = {
  surfaceId: 'my-surface-001',
  title: 'My Agent Surface',
  meta: {
    version: '1.0',
    createdBy: 'MyAgent',
    sandboxed: true,
    catalogRestricted: true,
  },
  dataModel: {
    user: { name: 'Alice' },
  },
  components: [
    {
      id: 'greeting',
      type: 'Heading',
      props: { text: 'Hello!', level: 2 },
    },
    {
      id: 'name-display',
      type: 'Text',
      props: {
        text: { $bind: 'user.name', fallback: 'Guest' },
      },
    },
    {
      id: 'action-btn',
      type: 'Button',
      props: { label: 'Continue', variant: 'primary' },
    },
  ],
}

export default function Example() {
  return (
    <A2UIRenderer
      surface={surface}
      onAction={(id, action, value) => {
        console.log('Component action:', id, action, value)
      }}
    />
  )
}