A2UI React Native Renderer

January 5, 2026 · View on GitHub

A React Native renderer for Google's A2UI declarative UI specification.

What is A2UI?

A2UI (Agent-to-User Interface) is an open protocol from Google that allows AI agents to generate rich, native user interfaces through declarative JSON descriptions. Instead of returning plain text, agents can describe UI components that render natively on any platform.

This package provides the React Native renderer - allowing A2UI-compliant agents to generate native mobile UIs.

Installation

npm install a2ui-react-native
# or
yarn add a2ui-react-native

Quick Start

import React from 'react';
import { View } from 'react-native';
import { A2UIRenderer } from 'a2ui-react-native';

const App = () => {
  // A2UI JSON from your agent
  const a2uiSpec = {
    components: [
      { id: 'text1', type: 'Text', content: 'Hello from A2UI!' },
      { id: 'btn1', type: 'Button', label: 'Click me', action: 'doSomething' }
    ],
    rootId: 'text1'
  };

  return (
    <View style={{ flex: 1 }}>
      <A2UIRenderer
        spec={a2uiSpec}
        onAction={(actionId, payload) => {
          console.log('Action triggered:', actionId, payload);
        }}
      />
    </View>
  );
};

Supported Components (MVP)

A2UI Component	React Native Equivalent
Text	`<Text>`
Button	`<Pressable>`
Image	`<Image>`
Row	`<View style={{flexDirection: 'row'}}>`
Column	`<View>`
Card	`<View>` with shadow styling
List	`<FlatList>`
TextField	`<TextInput>`

Streaming Support

A2UI uses JSONL (JSON Lines) for streaming updates. This renderer handles real-time UI updates as the agent generates content:

import { useA2UIStream } from 'a2ui-react-native';

const StreamingApp = () => {
  const { spec, isLoading, error } = useA2UIStream('wss://your-agent-server.com/stream');

  if (isLoading) return <LoadingIndicator />;
  if (error) return <ErrorView error={error} />;

  return <A2UIRenderer spec={spec} />;
};

Architecture

┌─────────────────────────────────────────────────────┐
│                    Agent Server                      │
│              (Gemini, OpenAI, etc.)                 │
└─────────────────────┬───────────────────────────────┘
                      │ A2UI JSONL Stream
                      ▼
┌─────────────────────────────────────────────────────┐
│              JSONL Stream Parser                     │
│         (parser/jsonl-parser.ts)                    │
└─────────────────────┬───────────────────────────────┘
                      │
                      ▼
┌─────────────────────────────────────────────────────┐
│              Message Dispatcher                      │
│    (beginRendering, surfaceUpdate, etc.)            │
└─────────────────────┬───────────────────────────────┘
                      │
                      ▼
┌─────────────────────────────────────────────────────┐
│              State Management                        │
│  (surfaces, components, data models)                │
└─────────────────────┬───────────────────────────────┘
                      │
                      ▼
┌─────────────────────────────────────────────────────┐
│              Component Catalog                       │
│    (Text, Button, Image, Row, Column, etc.)         │
└─────────────────────┬───────────────────────────────┘
                      │
                      ▼
┌─────────────────────────────────────────────────────┐
│            React Native Render Tree                  │
└─────────────────────────────────────────────────────┘