glchat-a2ui-react-renderer

@a2ui-sdk/react with GLChat-specific catalog and styling.

This package provides:

• GlchatA2UIProvider – A2UIProvider wrapper that uses the GLChat catalog by default.
• GlchatA2UIRenderer – thin wrapper around A2UIRenderer.
• glchatStandardCatalog – the standard A2UI catalog with GLChat custom components (Button, Card, Timeout) for manual wiring.
• 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 {
  GlchatA2UIProvider,
  GlchatA2UIRenderer,
  type A2UIMessage,
  type A2UIAction,
} from 'glchat-a2ui-react-renderer';

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

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

  return (
    <GlchatA2UIProvider messages={messages}>
      <GlchatA2UIRenderer onAction={handleAction} />
    </GlchatA2UIProvider>
  );
}

Custom Catalog

To extend catalog, you can use glchatStandardCatalog as the base standard.

import {
  A2UIProvider,
  A2UIRenderer,
  glchatStandardCatalog,
  type A2UIMessage,
  type A2UIAction,
} from 'glchat-a2ui-react-renderer';

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

  const customCatalog = {
    ...glchatStandardCatalog,
    components: {
      ...glchatStandardCatalog.components,
      Button: CustomButtonComponent,
    },
  };

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

  return (
    <GlchatA2UIProvider messages={messages} catalog={glchatStandardCatalog}>
      <GlchatA2UIRenderer onAction={handleAction} />
    </GlchatA2UIProvider>
  );
}

import {
  ComponentRenderer,
  type ButtonComponentProps,
  type CatalogComponent,
  useDispatchAction,
} from "glchat-a2ui-react-renderer";

export const CustomButtonComponent: CatalogComponent = ({
  surfaceId,
  componentId,
  ...props
}) => {
  const { child, action, primary } = props as ButtonComponentProps
  const dispatchAction = useDispatchAction()

  const handleClick = () => {
    if (action) {
      dispatchAction(surfaceId, componentId, action)
    }
  }

  const variant  = primary ? 'primary' : 'outline';

  return (
    <Button onClick={handleClick} variant={variant}>
      <div>masuk custom button</div>
      {child && <ComponentRenderer surfaceId={surfaceId} componentId={child} />}
    </Button>
  )
}

Refer to the upstream docs for full API details: https://a2ui.org/renderers/

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

Override CSS variables after importing globals.css:

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

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

You may also extend the theme via:

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

Exports

GLChat wrappers

• GlchatA2UIProviderProps
• GlchatA2UIRendererProps

GLChat catalog

• glchatStandardCatalog – standard catalog with custom Button, Card, Timeout

Re-exports from @a2ui-sdk/react

Components

• A2UIProvider
• A2UIRenderer
• ComponentRenderer
• standardCatalog

Hooks

• useDispatchAction
• useDataBinding
• useFormBinding
• useSurfaceContext
• useDataModelContext
• useA2UIMessageHandler

Context

• ActionProvider
• useActionContext

Types

• A2UIMessage
• A2UIAction
• Action
• ValueSource
• A2UIProviderProps
• A2UIRendererProps
• A2UIMessageHandler

Styles

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

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

License

MIT