glchat-a2ui-react-renderer

@a2ui/react with GLChat-specific styling and component overrides.

This package provides:

• Provider – A2UIProvider wrapper that automatically registers GLChat's custom components (Button, Card, Timeout).
• SingleSurfaceRenderer – thin wrapper around A2UIRenderer for a single surfaceId. Must be used inside Provider.
• AllSurfacesRenderer – convenience wrapper that renders every active surfaceId. Must be used inside Provider.
• Tailwind theming – styles/globals.css, styles/theme-v4.css, and tailwind-config.cjs for default tokens and utilities.

This library provides GLChat-specific components and styling while remaining fully compatible with the upstream A2UI renderer.

Prerequisites

• React 18+
• Tailwind CSS v3 or v4

Install

npm install glchat-a2ui-react-renderer

Quick Start

Use the GLChat-aware wrappers:

import {
  Provider,
  SingleSurfaceRenderer,
  AllSurfacesRenderer,
} from 'glchat-a2ui-react-renderer';
import type { A2UIMessage, ActionPayload } from 'glchat-a2ui-react-renderer';

function App() {
  const messages: A2UIMessage[] = [
    // A2UI messages from your backend
  ];

  const handleAction = (action: ActionPayload) => {
    console.log('Action received:', action);
  };

  return (
    <Provider messages={messages} onAction={handleAction}>
      <AllSurfacesRenderer />
    </Provider>
  );
}

To render a single surface explicitly:

<Provider messages={messages} onAction={handleAction}>
  <SingleSurfaceRenderer surfaceId="main" />
</Provider>

Note: onAction is configured on Provider. Both SingleSurfaceRenderer and AllSurfacesRenderer must be rendered inside a Provider.

Custom Components (optional)

Provider automatically registers GLChat's Button, Card, and Timeout overrides — no extra setup needed. To add your own node types on top, register them on the singleton ComponentRegistry before rendering:

import { ComponentRegistry, Types, type A2UIComponentProps } from 'glchat-a2ui-react-renderer';

function MyNodeComponent({ node }: Readonly<A2UIComponentProps<Types.CustomNode>>) {
  const label = (node.properties as any).label as string | undefined;
  return <div>{label}</div>;
}

// GLChat's standard components are already included by Provider.
// Just register your own additional node types here.
const registry = ComponentRegistry.getInstance();
registry.register('MyNodeType', { component: MyNodeComponent as any });

Tailwind Setup

Tailwind v4

Add the following to your main CSS file (globals.css):

@import "tailwindcss";

/* Load design tokens */
@import "glchat-a2ui-react-renderer/styles/globals.css";

/* Register tokens with Tailwind */
@import "glchat-a2ui-react-renderer/styles/theme-v4.css";

/* Optional: ensure Tailwind scans this package */
@source "../node_modules/glchat-a2ui-react-renderer";

Tailwind v3

Use the provided preset and include the package in content.

const glchatPreset = require('glchat-a2ui-react-renderer/tailwind-config.cjs');

module.exports = {
  presets: [glchatPreset],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
    './node_modules/glchat-a2ui-react-renderer/dist/**/*.{js,jsx,ts,tsx}',
  ],
};

Import the tokens in your main CSS:

@import "glchat-a2ui-react-renderer/styles/globals.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

Customizing Colors (optional)

The package tokens are declared as plain (unlayered) :root rules. To override them, place a plain :root block after the globals.css import in your CSS file. Source order determines the winner when both are unlayered, so your override must come later.

/* ✅ Works in both Tailwind v3 and v4 */
:root {
  --primary: 220 90% 45%;
  --background: 0 0% 99%;
}

.dark {
  --primary: 220 70% 50%;
}

Button (core variants) uses these tokens by default:

• primary: --primary, --primary-foreground, --ring
• destructive: --destructive, --destructive-foreground, --ring
• outline: --background, --background-alternate, --foreground, --border, --ring

You may also extend the theme via:

• tailwind.config.js (v3)
• @theme (v4)

Exports

Components

• Provider
• SingleSurfaceRenderer
• AllSurfacesRenderer

Types

• ProviderProps
• SingleSurfaceRendererProps
• AllSurfacesRendererProps
• A2UIMessage
• ActionPayload
• ActionHandler

Re-exports from @a2ui/react

• Types
• ComponentRegistry
• ComponentNode
• useA2UIComponent
• useA2UI
• classMapToString
• stylesToObject
• A2UIComponentProps
• Theme
• AnyComponentNode
• StringValue
• NumberValue
• BooleanValue

Styles

• styles/globals.css
• styles/theme-v4.css
• tailwind-config.cjs

Upstream documentation: https://a2ui.org/renderers/

License

MIT