Material 3 Expressive renderer for A2UI (React, v0.9.1)

[romulloqueiroz]

Hi all,

I built a React renderer for A2UI on top of Google's @a2ui/web_core that maps all 18 Basic Catalog components onto Material 3 Expressive, Google's current Material design language, using the @language-lit/material3-expressive React design system.

Try it: https://m3e.language-lit.com/a2ui/ streams four scripted scenarios live in the browser with no backend or API key: a streaming surface with placeholders, a reservation form with two-way binding, checks validation and an action carrying the resolved values, a card with tabs and a modal, and live data-model updates with a template list and a second surface.

a2ui-demo.mp4

What it does

• Every basic-catalog component renders as a Material 3 Expressive component: Text, Button, TextField, Card, Tabs, Modal/Dialog, Slider, CheckBox, ChoicePicker, DateTimeInput, Image, Video, AudioPlayer, Icon, Divider, Row, Column, List.
• Streaming shows shape early: children the agent names before it sends them render as placeholders and fill in as messages arrive.
• Two-way binding, checks that gate buttons and surface messages after a field is touched, function calls and templates via web_core.
• Actions reach onAction with the surface, source component and resolved context.
• useA2ui hook plus A2uiSurface; the catalog also works under the official @a2ui/react surface if you already use it.
• Token-only CSS, light and dark modes, agent attribution slot, extensible catalog.
• Zero runtime dependencies beyond its peers. MIT.

Install

npm install @language-lit/material3-expressive-a2ui @language-lit/material3-expressive @a2ui/web_core

• Source: https://github.com/Language-Lit/material3-expressive-a2ui
• npm: https://www.npmjs.com/package/@language-lit/material3-expressive-a2ui
• Guides: https://m3e.language-lit.com/docs/a2ui-getting-started/

One thing I ran into that may help other renderer authors: web_core's DataModel.set keeps the updateDataModel value object by reference and writes user input into it, so if you replay the same message objects (tests, demos, fixtures) the second run starts with the first run's input. The renderer copies messages before processing.

Feedback, bug reports and integration stories are very welcome. I have also opened a PR to add it to the ecosystem renderers page.