A2UI Next.js Implementation

This is a Next.js implementation of the A2UI library, using ShadCN components. A2UI is a declarative UI library that allows you to define your UI using a JSON schema, which can be dynamically generated and updated.

Installation

1. Install the required dependencies:

npm install

2. Run the development server:

npm run dev

3. Open http://localhost:3000 to see the demo.

Components

The A2UI library includes the following components:

Layout Components

• Row: Horizontal layout container
• Column: Vertical layout container
• List: Scrollable list of items
• Card: Container with elevation and padding

Display Components

• Text: Display text content with optional styling
• Image: Display images from URLs
• Icon: Display icons (using emoji as fallback)
• Divider: Visual separator line
• Table: Data table with headers and rows (additional component)

Interactive Components

• Button: Clickable button with action support
• TextField: Text input field
• Checkbox: Boolean toggle
• Slider: Range slider input
• MultipleChoice: Dropdown or radio button selection
• DateTimeInput: Date and time picker

Container Components

• Modal: Overlay dialog
• Tabs: Tabbed interface

Media Components

• Video: Video player
• AudioPlayer: Audio player

Usage

To use the A2UI library, you first need to define your UI using a JSON schema. This schema is typically generated by an AI system or created manually.

Here's an example of how to use the A2UI library:

import { Renderer } from '@/components/a2ui/renderer';
import { MessageProcessor } from '@/components/a2ui/processor';
import type { AnyComponentNode } from '@/components/a2ui/types';

const processor = new MessageProcessor();

const myComponents: AnyComponentNode[] = [
  {
    id: 'root',
    type: 'Card',
    properties: {
      child: {
        id: 'content',
        type: 'Column',
        properties: {
          children: [
            {
              id: 'title',
              type: 'Text',
              properties: {
                text: { literalString: 'Hello, World!' },
                usageHint: 'h1',
              },
            },
            {
              id: 'subtitle',
              type: 'Text',
              properties: {
                text: { literalString: 'This is a demo of the A2UI library.' },
              },
            },
          ],
        },
      },
    },
  },
];

function MyComponent() {
  return (
    <Renderer
      processor={processor}
      surfaceId="my-surface"
      component={myComponents.find(c => c.id === 'root')!}
    />
  );
}

Demo

The demo page includes two examples:

1. Chat Interface: A simple chat interface with messages and input field
2. Streams UI: A real-time streams UI with temperature, humidity, and fan speed controls

Architecture

The A2UI library is built around the following core concepts:

• Message Processor: Handles data binding and message dispatch
• Components: React components that render A2UI nodes
• Renderer: Dynamically renders components from the A2UI schema
• Theme: Defines the styling for all components

Customization

You can customize the appearance of A2UI components by modifying the theme in theme.ts. This allows you to override the default styles with your own brand colors and fonts.

License

This implementation is based on the A2UI library from Google, which is licensed under the Apache 2.0 License.