Add React renderer by lukasmoschitz · Pull Request #542 · google/A2UI

lukasmoschitz · 2026-01-23T15:51:09Z

React Renderer for A2UI

Summary

Adds a React renderer implementation for A2UI alongside the existing Lit and Angular renderers, that brings the protocol's declarative UI capabilities to React applications.

Approach

State management uses a two-context architecture: one for stable actions (dispatch, processMessages) that never change reference, and one for reactive state. This prevents unnecessary re-renders when only actions are needed. All components are wrapped with React.memo() for additional performance optimization.
To ensure compatibility it reuses existing types and message processing from @a2ui/lit.
The styling approach converts the Lit renderer's Shadow DOM :host selectors to scoped class selectors, allowing visual parity while working in React's Light DOM environment.

Components

Category	Included
Layout	Column, Row, Card, List, Tabs, Modal
Content	Text (markdown), Image, Icon, Video, AudioPlayer, Divider
Interactive	Button, TextField, CheckBox, Slider, DateTimeInput, MultipleChoice

Core Modules

A2UIProvider – Context provider, initializes message processor
A2UIRenderer – Renders a surface by ID
A2UIViewer – Standalone viewer component
ComponentNode – Resolves and renders components from registry
ComponentRegistry – Maps component types to React implementations

Demo images

google-cla · 2026-01-23T15:51:15Z

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.

gemini-code-assist

Code Review

This pull request introduces a React renderer for A2UI, aiming for consistency with existing Lit, Angular, and Flutter renderers. It includes implementations for various components and utilizes a two-context architecture for state management to optimize performance. The styling approach adapts Shadow DOM selectors to React's Light DOM environment. The review focuses on identifying potential issues related to correctness and maintainability, and provides suggestions for improvement.

renderers/react/src/components/content/Text.tsx

renderers/react/src/core/A2UIProvider.tsx

renderers/react/src/core/A2UIRenderer.tsx

renderers/react/src/core/A2UIViewer.tsx

renderers/react/src/components/content/Text.tsx

ditman · 2026-01-30T23:17:55Z

renderers/react/src/components/content/Text.tsx

+
+  let result = html;
+  for (const [regex, replacement] of replacements) {
+    result = result.replace(regex, replacement);


If I'm understanding this method correctly, it's looking at the rendered markdown and applying classnames to certain tag names through regexes.

This looks quite brittle and a pain to maintain! There's an example in the markdown-it on how to apply CSS classnames to elements through the renderer rules, here:

https://github.com/markdown-it/markdown-it/blob/master/docs/examples/renderer_rules.md#to-add-a-default-css-class-to-an-element

This is a similar approach to what the Lit renderer is doing here:

A2UI/renderers/lit/src/0.8/ui/directives/markdown.ts

Lines 103 to 117 in 9c35418

this.#markdownIt.renderer.rules[key] = (

tokens,

idx,

options,

_env,

self

) => {

const token = tokens[idx];

const tokenClasses = tagClassMap[token.tag] ?? [];

for (const clazz of tokenClasses) {

token.attrJoin("class", clazz);

}

return self.renderToken(tokens, idx, options);

};

I'd suggest this step to be done by leveraging the existing markdown-it API, rather than doing string manipulations.

Thank's for the suggestion! We've replaced applyMarkdownTheme with markdown-it's renderer rules API, using token.attrJoin() on _open tokens before rendering and cleaning up afterward.
This should now mirror the Lit renderer's #applyTagClassMap pattern.

ditman · 2026-01-30T23:24:28Z

renderers/react/src/styles/index.ts

+/* =========================================================================
+ * Card (from Lit card.ts static styles)
+ * ========================================================================= */


Why are these comments part of the output string?

Fair point, they were developer notes explaining the transformation from Lit to React
-> I moved them into the JSDoc above.

ditman

Thanks for the PR! I left some comments about the handling of markdown in the Text widget on my first quick look to this, but more knowledgeable people should actually dive deeper than that :)

There's some brittleness by grabbing the structural styles directly from the lit renderer, but then maintaining a list of the classnames to be added to each markdown element in this repository; I wonder if some of those might make sense to be moved to a shared package somehow (this is not for this PR, of course)

ditman · 2026-02-04T23:30:18Z

I'm actually working on decoupling the Markdown rendering from the lit and angular renderers here, and I'm planning to do the same to the React renderer once it lands:
#595, still a ways to go.

gspencergoog

This looks reasonable to me, but I'm not familiar with React, so I'm going to abstain from approving anything here.

gemini-code-assist

Code Review

This is a substantial pull request that introduces a new React renderer for A2UI, along with significant enhancements to the Python agent's schema management and validation capabilities. The new React renderer is well-architected, using a two-context pattern for performance and providing a comprehensive set of components. The Python agent changes improve schema validation robustness and build process. I've identified a potential bug in a file path for schema loading, a missing CODEOWNERS entry for the new renderer, and a minor architectural improvement to address a circular dependency. Overall, this is an excellent contribution.

gemini-code-assist · 2026-02-26T14:59:17Z

a2a_agents/python/a2ui_agent/src/a2ui/inference/schema/manager.py

+    potential_path = os.path.abspath(
+        os.path.join(
+            os.path.dirname(__file__),
+            "..",


The relative path used in the "Local Assets" fallback logic for loading schemas appears to be incorrect. The path is constructed using os.path.join(os.path.dirname(__file__), "..", "assets", ...).

Given that this file is at src/a2ui/inference/schema/manager.py, going up one level (..) lands in src/a2ui/inference/. The assets directory is a sibling of inference, not a child. The path should likely go up two levels (../..) to reach src/a2ui/ before descending into assets/.

This could cause the fallback loading mechanism to fail when running from source if package resources are not available.

"..", ".."

.github/CODEOWNERS

gemini-code-assist · 2026-02-26T14:59:17Z

a2a_agents/python/a2ui_agent/src/a2ui/inference/schema/catalog.py

+  def validator(self) -> "A2uiValidator":
+    from .validator import A2uiValidator
+
+    return A2uiValidator(self)


The validator property creates a runtime circular dependency between A2uiCatalog and A2uiValidator by using a local import inside the method. While this pattern works, it can make the code harder to reason about and maintain.

Consider refactoring to break the cycle, for example by using dependency injection: the A2uiValidator instance could be created separately and passed to the A2uiCatalog during its initialization, or a factory function could be used to construct both objects.

ava-cassiopeia

Looks like there's a large number of file conflicts, could you please rebase this and fix those?

Move ensureInitialized() into A2UIProvider so users no longer need to manually call initializeDefaultCatalog() and injectStyles() before rendering. Both are idempotent so multiple providers are safe.

Prevents stale 504 errors when file: dependencies are rebuilt by setting optimizeDeps.force in both vite configs.

ditman

I don't see anything that stands out anymore. If @ava-cassiopeia is happy, and you guys believe the API is idiomatic enough for React JS, I think this can land!

Thanks for all the updates! Please, take into consideration that I did a small update to the react rendering on web_core, so once packages publish, we might need to do an update to the dependencies of the test apps here! (I left a link to my PR with the change in comments below)

renderers/react/src/components/content/Icon.tsx

ditman · 2026-03-06T18:41:05Z

renderers/react/visual-parity/lit/src/main.ts

+// provide the theme directly on a component that renders a2ui-surface as a child
+@customElement('themed-a2ui-surface')
+class ThemedA2UISurface extends LitElement {
+  @provide({ context: UI.Context.themeContext })


I changed a little bit the renderMarkdown method (made it async), this might break slightly until all the packages are at the right revisions. If using a NPM dependency, we should be fine for now! Once the new web_core and markdown-it packages update, we might need a dependency on markdown-it 0.0.2 which has the async implementation of the renderMarkdown function.

Apologies for this change, I realized too late that I need the renderMarkdown to be asynchronous for google's markdown rendering to work properly 🤦

See this:

Make MarkdownRenderer async. #787

(Only dep changes would be needed, nothing on the actual code of the app)

renderers/react/visual-parity/package.json

renderers/react/package.json

samples/client/react/shell/public/hero-dark.png

ava-cassiopeia · 2026-03-09T13:16:26Z

I'm going to take one more pass at this, but I think I'm pretty happy with the state of this, and it looks like pretty idiomatic React to me.

ava-cassiopeia

There's a few small changes I want to make to this before we merge it - this needs Google copyright notices in the source code files, and I'll run a few of these markdown files through our formatter.

Otherwise, LGTM. Thanks for your contributions and your patience while we get this landed!

renderers/react/src/components/content/Icon.tsx

renderers/react/src/styles/README.md

ava-cassiopeia · 2026-03-10T15:12:30Z

Oh darn, looks like there's a merge conflict on the codeowners now. @lukasmoschitz can you sort that out so I don't have to create another PR on Copilotkit (lol)?

- Replace require('gts') with ESM import in eslint.config.js - Disable prefer-arrow-callback to preserve React.memo display names - Exclude .d.ts files from linting - Fix floating promise in A2UIProvider dispatch

React renderer PR google#542 is still open and not by CopilotKit. Composer was contributed by maxkorp (@CopilotKit).

- React renderer PR google#542 merged — update status to Stable across all pages - Add React section to client-setup guide - Expand community renderer submission with step-by-step instructions - Replace community showcase placeholder with concrete guidance + sample links - Collapse duplicate partner info in community.md (points to a2ui-in-the-world) - Fix typo (signiciant → significant) - Tighten how-to-use wording, fix Angular install (add @a2ui/web-lib)

…dates (#776) * docs: reorganize files to match nav sections - Move catalogs, transports, client_to_server_actions → concepts/ - Move renderers, agents → reference/ - Move where-is-it-used, community → ecosystem/ - Rewrite agent-ui-ecosystem as concise 'How Does A2UI Compare?' intro page - Move third-party integrations (json-render, OpenClaw) to ecosystem - Fix all cross-references for moved files - Remove duplicate nav entries (each page appears once) * docs: refine How Does A2UI Compare page - native-first → declarative UI, clarify host controls styling - MCP Apps: clarify remote controls content, config via tool calling - AG UI: credit CopilotKit team, React renderer, Composer contributions - ChatKit: note shared design philosophy (basic components, declarative) * docs: restore comparison table as At a Glance section * docs: rename 'Where is A2UI Used?' → 'A2UI in the World' * docs: rename where-is-it-used → a2ui-in-the-world, MCP SEP-1865 citation * docs: add Google ADK section to A2UI in the World ADK Web has native A2UI rendering and A2A↔A2UI message conversion. Links to ADK docs, adk-web repo, and agent development guide. * docs: fix CopilotKit attribution — Composer yes, React renderer no React renderer PR #542 is still open and not by CopilotKit. Composer was contributed by maxkorp (@CopilotKit). * docs: React renderer status — In Review, link to PR #542 * docs: add redirects for all moved files Old URLs now redirect to new locations: - catalogs, transports, actions → concepts/ - renderers, agents → reference/ - community → ecosystem/ - where-is-it-used → ecosystem/a2ui-in-the-world * docs: React renderer merged, contribution guide, writing fixes - React renderer PR #542 merged — update status to Stable across all pages - Add React section to client-setup guide - Expand community renderer submission with step-by-step instructions - Replace community showcase placeholder with concrete guidance + sample links - Collapse duplicate partner info in community.md (points to a2ui-in-the-world) - Fix typo (signiciant → significant) - Tighten how-to-use wording, fix Angular install (add @a2ui/web-lib) * docs: add web_core shared library section to renderer development guide Explains what @a2ui/web-lib (web_core) provides, how Lit/Angular/React renderers use it, and why new web renderers should start from it rather than reimplementing message processing and state management. * docs: link renderer names to source in client-setup table * docs: remove stars and last-updated columns from community renderers table * docs: fix ChatKit link to point to actual docs instead of openai.com homepage * docs: add live shields.io badges for stars and last-commit to community renderers * docs: fix broken React sample link, fix relative path in ecosystem --------- Co-authored-by: Zaf <zaf@0-a.org>

timoslanitis-aisera · 2026-03-12T10:30:29Z

@lukasmoschitz shouldn’t this be published on npm? The README says npm install @a2ui/react, but I can’t find the package on npm registry

lukasmoschitz · 2026-03-12T13:53:49Z

@lukasmoschitz shouldn’t this be published on npm? The README says npm install @a2ui/react, but I can’t find the package on npm registry

Thanks @timoslanitis-aisera for the heads up. We still had a few issues to sort out, but the npm package should be available soon.

francox9 · 2026-03-17T06:31:06Z

@lukasmoschitz
Thanks for the good work! We have the same question for the availability on npm. Would you be able to have a timeline on when it would become available there?

ava-cassiopeia · 2026-03-17T14:05:31Z

I'm planning on publishing this to NPM today (US time, sometime within the next 8 hours after this comment's timestamp, lol)

ava-cassiopeia · 2026-03-17T23:42:46Z

Published: https://www.npmjs.com/package/@a2ui/react

github-project-automation bot added this to A2UI Jan 23, 2026

github-project-automation bot moved this to Todo in A2UI Jan 23, 2026

gemini-code-assist bot reviewed Jan 23, 2026

View reviewed changes

This was referenced Jan 23, 2026

feat: add React renderer and sample clients #367

Closed

Feat: Add React Renderer for A2UI #346

Closed

feat: Add React Renderer for A2UI Protocol #358

Closed

lukasmoschitz force-pushed the add-react-renderer branch from bbaefd0 to 3acfc9b Compare January 30, 2026 14:38

ava-cassiopeia self-requested a review January 30, 2026 18:36

ditman reviewed Jan 30, 2026

View reviewed changes

renderers/react/src/components/content/Text.tsx Show resolved Hide resolved

ditman reviewed Jan 30, 2026

View reviewed changes

lukasmoschitz marked this pull request as ready for review February 1, 2026 22:29

This was referenced Feb 13, 2026

feat: add React client demo for A2UI rendering #300

Closed

feat(renderers): Add React Native renderer #430

Closed

zeroasterisk requested review from dmandar, gspencergoog, jacobsimionato and zeroasterisk as code owners February 20, 2026 15:56

gspencergoog reviewed Feb 20, 2026

View reviewed changes

lukasmoschitz requested a review from nan-yu as a code owner February 25, 2026 12:39

lukasmoschitz force-pushed the add-react-renderer branch 2 times, most recently from 4e6363d to f806ccb Compare February 25, 2026 13:39

lukasmoschitz requested review from crisbeto and paullewis as code owners February 25, 2026 13:39

gemini-code-assist bot reviewed Feb 26, 2026

View reviewed changes

ava-cassiopeia requested changes Feb 26, 2026

View reviewed changes

Add React renderer implementation

d43a146

lukasmoschitz added 3 commits March 6, 2026 15:53

feat(react): auto-initialize styles and catalog in A2UIProvider

5eaa0a5

Move ensureInitialized() into A2UIProvider so users no longer need to manually call initializeDefaultCatalog() and injectStyles() before rendering. Both are idempotent so multiple providers are safe.

chore: update sample app package-lock after web_core migration

a296042

fix(visual-parity): force Vite dep re-optimization on startup

c8e7716

Prevents stale 504 errors when file: dependencies are rebuilt by setting optimizeDeps.force in both vite configs.

ditman approved these changes Mar 6, 2026

View reviewed changes

ava-cassiopeia approved these changes Mar 9, 2026

View reviewed changes

renderers/react/src/components/content/Icon.tsx Show resolved Hide resolved

renderers/react/src/styles/README.md Show resolved Hide resolved

Format main markdown file

d355d6e

ava-cassiopeia mentioned this pull request Mar 9, 2026

Touch up React renderer to merge into main A2UI repo CopilotKit/A2UI#1

Merged

ava-cassiopeia added 5 commits March 9, 2026 14:20

foramt visual parity markdown file

06d0101

Add GH workflow for the React renderer

4342dd1

add Google OSS copyright notices to all relevant files

5752045

Update formatter to match the Google TS style guide

cec2d93

Clarify gts import with a better comment

20c8232

lukasmoschitz added 3 commits March 10, 2026 17:00

fix(lint): fix ESLint config and resolve lint errors

26f4dde

- Replace require('gts') with ESM import in eslint.config.js - Disable prefer-arrow-callback to preserve React.memo display names - Exclude .d.ts files from linting - Fix floating promise in A2UIProvider dispatch

chore: remove CODEOWNERS, deleted upstream in google#803

6ecde0c

chore: add Google OSS copyright notices to sample app

279e799

ava-cassiopeia merged commit 2f717be into google:main Mar 10, 2026
8 checks passed

github-project-automation bot moved this from Todo to Done in A2UI Mar 10, 2026

zeroasterisk pushed a commit to zeroasterisk/A2UI-1 that referenced this pull request Mar 10, 2026

docs: fix CopilotKit attribution — Composer yes, React renderer no

bc372ba

React renderer PR google#542 is still open and not by CopilotKit. Composer was contributed by maxkorp (@CopilotKit).

zeroasterisk pushed a commit to zeroasterisk/A2UI-1 that referenced this pull request Mar 10, 2026

docs: React renderer status — In Review, link to PR google#542

f9514fd

zeroasterisk mentioned this pull request Mar 11, 2026

Feat: Add React Renderer for A2UI #347

Closed

zeroasterisk mentioned this pull request Mar 16, 2026

Publish @a2ui/react to npm #867

Open

	this.#markdownIt.renderer.rules[key] = (
	tokens,
	idx,
	options,
	_env,
	self
	) => {
	const token = tokens[idx];
	const tokenClasses = tagClassMap[token.tag] ?? [];
	for (const clazz of tokenClasses) {
	token.attrJoin("class", clazz);
	}

	return self.renderToken(tokens, idx, options);
	};

Conversation

lukasmoschitz commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Renderer for A2UI

Summary

Approach

Components

Core Modules

Demo images

Uh oh!

google-cla bot commented Jan 23, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ditman Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

lukasmoschitz Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

ditman Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

lukasmoschitz Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

ditman left a comment

Choose a reason for hiding this comment

Uh oh!

ditman commented Feb 4, 2026

Uh oh!

gspencergoog left a comment

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gemini-code-assist bot Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

ava-cassiopeia left a comment

Choose a reason for hiding this comment

Uh oh!

ditman left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ditman Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ava-cassiopeia commented Mar 9, 2026

Uh oh!

ava-cassiopeia left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ava-cassiopeia commented Mar 10, 2026

Uh oh!

Uh oh!

timoslanitis-aisera commented Mar 12, 2026

Uh oh!

lukasmoschitz commented Mar 12, 2026

Uh oh!

francox9 commented Mar 17, 2026

lukasmoschitz commented Jan 23, 2026 •

edited

Loading