Skip to content

Conversation

@sivamrudram-eng
Copy link

Summary

This PR adds the first React Native implementation of the A2UI renderer, enabling A2UI-compliant agents to generate native mobile UIs on iOS and Android.

Features

Core Components

  • A2UIRenderer - Main component for rendering A2UI specifications
  • useA2UIStream - Hook for real-time streaming from agent servers

MVP Components (8 of 16)

Component React Native Mapping Status
Text <Text>
Button <Pressable>
Image <Image>
Row <View flexDirection="row">
Column <View>
Card <View> with shadow
List <FlatList>
TextField <TextInput>

Infrastructure

  • JSONL stream parser for real-time updates
  • Message dispatcher for A2UI protocol messages
  • Surface registry and component buffer for state management
  • Data binding support with BoundValue resolution
  • Full TypeScript support

Usage Example

import { A2UIRenderer } from "@a2ui/react-native";

const App = () => {
  const spec = {
    surfaceId: "main",
    rootId: "root",
    components: [
      { id: "root", type: "Column", children: ["text1", "btn1"] },
      { id: "text1", type: "Text", content: "Hello A2UI!" },
      { id: "btn1", type: "Button", label: "Click me", action: "doSomething" },
    ],
  };

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

Roadmap

  • Add remaining components (Modal, Tabs, Slider, etc.)
  • Add comprehensive test suite
  • Publish to npm as @a2ui/react-native

Implements #428

Standalone Repository

This renderer is also available as a standalone package at:
https://github.com/sivamrudram-eng/a2ui-react-native

Add first React Native implementation of A2UI renderer with:

- Core A2UIRenderer component for rendering A2UI specs
- 8 MVP components: Text, Button, Image, Row, Column, Card, List, TextField
- JSONL stream parser for real-time updates
- Message dispatcher for A2UI protocol messages
- Surface registry and component buffer for state management
- Data binding support with BoundValue resolution
- useA2UIStream hook for streaming from agent servers
- Full TypeScript support

Implements google#428
@google-cla
Copy link

google-cla bot commented Jan 5, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@sivamrudram-eng
Copy link
Author

I have signed the CLA. Please re-check.

Added new components matching Angular renderer:
- Modal, Tabs, Checkbox, Slider, DateTimeInput
- MultipleChoice, Icon, Divider, Video, AudioPlayer

Added theming system with light/dark themes.
Added example apps demonstrating all components.
Updated README with full documentation.
- Add Jest configuration with ts-jest for TypeScript ESM support
- Add JSONL parser tests (basic parsing, chunked input, error handling)
- Add data model store tests (type guards, path operations, resolvers)
- Add message dispatcher tests (message routing, lifecycle hooks)
- Add component buffer tests (CRUD ops, tree traversal, search)
- Add surface registry tests (surface lifecycle, subscriptions)
- Update ESLint config to recognize Jest test environment
- 130 tests covering all core modules
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant