https://github.com/roonga/a2-react-aria
A2UI JSON to accessible React components for AI-native apps. Agents emit structured JSON; A2Renderer validates and renders it. Own your source shadcn-style.
https://github.com/roonga/a2-react-aria
a11y accessibility ag-ui ai ai-agents copilotkit react react-aria schema-validation shadcn-style typescript
Last synced: about 1 month ago
JSON representation
A2UI JSON to accessible React components for AI-native apps. Agents emit structured JSON; A2Renderer validates and renders it. Own your source shadcn-style.
- Host: GitHub
- URL: https://github.com/roonga/a2-react-aria
- Owner: roonga
- License: mit
- Created: 2026-06-11T21:02:31.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-06-27T00:06:07.000Z (about 1 month ago)
- Last Synced: 2026-06-27T00:07:39.655Z (about 1 month ago)
- Topics: a11y, accessibility, ag-ui, ai, ai-agents, copilotkit, react, react-aria, schema-validation, shadcn-style, typescript
- Language: TypeScript
- Homepage: https://roonga.github.io/a2-react-aria/
- Size: 1.17 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# a2-react-aria
A React component catalog that renders **a2UI JSON** using **React Aria Components**.
Designed for AI-native applications — agents emit a2UI JSON, `A2Renderer` turns it into
accessible, production-ready UI.
Components are distributed **shadcn-style**: consumers own the source via
`npx @a2ra/cli add `. No fighting library internals. Restyle freely.
## How it works
```text
AI Agent (LangGraph, Google ADK, CrewAI, etc.)
│ emits: { "type": "Form", "props": { ... }, "children": [...] }
│ via AG-UI protocol or CopilotKit
▼
│ validates with Zod · resolves component from registry
▼
Accessible React Aria Component
(source lives in your project — you own it)
```
## Packages
| Package | Description |
|---|---|
| `@a2ra/core` | `A2Renderer`, component registry, Zod schemas |
| `@a2ra/cli` | CLI — `init`, `list`, `add`, `diff` components from the registry |
| `@a2ra/vscode` | VS Code extension — IntelliSense, live preview, CLI integration _(planned)_ |
## Quick start
```bash
# 1. install the renderer + React Aria
pnpm add @a2ra/core react-aria-components
# 2. create an a2ra.json config (sets your components directory)
npx @a2ra/cli init
# 3. add components à la carte — the source is copied into your project, you own it
npx @a2ra/cli add button
npx @a2ra/cli add text-field form dialog
```
The CLI copies each component's source (component, styles, schema, barrel) into the directory
configured in `a2ra.json` (default `components/a2ui/`) and prints the npm dependencies to install.
## CLI
| Command | Description |
|---|---|
| `a2ra init` | Create `a2ra.json` (sets `componentsDir` and optional registry override) |
| `a2ra list` | List the components available in the registry |
| `a2ra add ` | Copy one or more components into your project |
| `a2ra diff [component]` | Compare installed components against the registry |
Useful flags: `--dir ` (override target directory), `--overwrite` (replace existing files),
`--registry ` (use an alternative or local registry). The registry location also
honours the `A2RA_REGISTRY` environment variable.
```tsx
import { A2Renderer, defaultRegistry } from "@a2ra/core"
const node = {
type: "Form",
children: [
{ type: "TextField", props: { label: "Email" } },
{ type: "Button", props: { variant: "primary", children: "Submit" } },
],
}
export default function App() {
return
}
```
`defaultRegistry` includes every built-in component. For production apps where you've added components
via the CLI and want a leaner bundle, pass a custom registry instead:
```tsx
import { A2Renderer, createRegistry } from "@a2ra/core"
import { Form } from "./components/a2ui/form"
import { TextField } from "./components/a2ui/text-field"
import { Button } from "./components/a2ui/button"
const registry = createRegistry({
Form: { component: Form },
TextField: { component: TextField },
Button: { component: Button },
})
export default function App() {
return
}
```
## AI agent integration
a2UI JSON is the portable, schema-validated alternative to returning raw JSX from agents.
- **AG-UI protocol** — emit a2UI JSON as a `generative_ui` event over SSE or WebSocket
- **CopilotKit** — use `useCopilotAction` to pass agent payloads directly to ``
- **Any agent framework** — LangGraph, Google ADK, CrewAI, Pydantic AI, AWS Strands, and more
## Development
```bash
pnpm install
pnpm build # build all packages
pnpm test # Vitest
pnpm lint # Biome
pnpm storybook # component explorer on :6006
```
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md) for how to get started, branch and commit conventions,
and the component authoring workflow.
## License
[MIT](LICENSE) — [Ravi Mohan](https://github.com/roonga)