@quaylabs/genui

React runtime for structured, streaming AI UIs. Renders OpenAI-compatible streaming responses with ShadCN UI and Tremor charts.

Installation

pnpm add @quaylabs/genui

Usage

Static Response

import GodComponent from '@quaylabs/genui';

const response = {
  text: "Here's the sales data:",
  components: [
    {
      type: 'table',
      title: 'Q1 Sales',
      columns: [{ key: 'region', label: 'Region' }, { key: 'sales', label: 'Sales' }],
      rows: [{ region: 'North', sales: 1200 }, { region: 'South', sales: 980 }],
    },
  ],
};

<GodComponent response={response} />

Streaming Response

import GodComponent from '@quaylabs/genui';

// With EventSource
const eventSource = new EventSource('/api/chat');
<GodComponent stream={eventSource} />

// With fetch
const response = await fetch('/api/chat', { method: 'POST' });
<GodComponent stream={response} />

Supported Components

Table

{
  type: 'table',
  title?: string,
  columns: [{ key: string, label: string, type?: string }],
  rows: Record<string, any>[],
  sortable?: boolean,
  paginated?: boolean,
}

Chart

{
  type: 'chart',
  chart_type: 'bar' | 'line' | 'pie' | 'doughnut' | 'area',
  title?: string,
  labels: string[],
  datasets: [{ label: string, data: number[], color?: string }],
  show_legend?: boolean,
  show_grid?: boolean,
}

Card

{
  type: 'card',
  title: string,
  subtitle?: string,
  content?: string,
  image_url?: string,
  actions?: [{ label: string, action: string, variant?: 'primary' | 'secondary' | 'danger' }],
  variant?: 'default' | 'outlined' | 'elevated',
}

Extending with New Components

1. Define schema in schemas/:

export interface MyComponent {
  type: 'my-component';
  // ...fields
}

2. Create renderer in components/:

export function MyComponentRenderer({ component }) {
  return <div>{/* render */}</div>;
}

3. Register in registry/componentRegistry.ts:

registerComponent('my-component', MyComponentRenderer);

API Reference

GodComponent

| Prop | Type | Description | |------|------|-------------| | response | GenUIResponse | Static response object | | stream | EventSource \| ReadableStream \| Response | Streaming input | | onAction | (action: string) => void | Callback for card actions | | onComplete | () => void | Called when streaming completes | | onError | (error: Error) => void | Called on error | | className | string | Container class | | gap | 'sm' \| 'md' \| 'lg' | Gap between nodes |

useGenUI Hook

const { state, reset, dispatch } = useGenUI({ response, stream, onComplete, onError });

License

MIT