For UI Developers

View full project code on Github

This section will walk you through to develop a web application that can render JSON with A2UI standard.

You can clone the code directly via the button above. The following is the walk through.

Prerequisites

• React 18+

• Tailwind CSS v3 or v4 (necessary to have component's default styling)

GLChat A2UI React Renderer

1

Add the package to your React project:

npm install glchat-a2ui-react-renderer

2

Import Types and Renderer

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

3

User actions handler (on button click)

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

You can then pass the handler as props inside the renderer.

4

Display A2UI messages in your application

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

5

(Optional) Customizing components

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>;
}

// Register your own additional node types
const registry = ComponentRegistry.getInstance();
registry.register('MyNodeType', { component: MyNodeComponent as any });

6

Tailwind Setup

To have the default styling, you can add these import in your tailwind configuration.

Tailwind v4

Add the following imports to your main CSS file (e.g. 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

Include preset and package in your tailwind configuration tailwind.config.js.

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 file.

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

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

7

(Optional) Customizing colors

Override the tokens in your main CSS file.

:root {
  --primary: 220 90% 45%;
  --background: 0 0% 99%;
}

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

You can also extend the tailwind theme via tailwind.config.js (v3) or @theme in main CSS file (v4).

Sample Screenshots

Simple Component

HITL Component