@ag2b/react-chat

Experimental

This is an experimental package. API shape may drift.

Requirements

@ag2b/react and @ag2b/core
react >= 18
react-markdown >= 9
remark-gfm >= 4

Quickstart

Install

npm i @ag2b/react-chat react-markdown remark-gfm

Import the stylesheet

main.tsx

import '@ag2b/react-chat/styles.css';

main.tsx

import { Ag2bProvider } from '@ag2b/react';
import { Ag2bPopup } from '@ag2b/react-chat';
import { createRoot } from 'react-dom/client';

import { agent } from './agent';
import { App } from './App';

import '@ag2b/react-chat/styles.css';

createRoot(document.getElementById('root')!).render(
  <Ag2bProvider agent={agent}>
    <App />
    <Ag2bPopup mode="streaming" showReasoning />
  </Ag2bProvider>,
);

That's it — the FAB appears in the bottom-right corner, the panel opens on click, and prompts route through the agent.

Ag2bPopup

Props

type Ag2bPopupProps = {
  placement?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  mode?: 'streaming' | 'synchronous';
  showModeToggle?: boolean;
  showClearChat?: boolean;
  showReasoning?: boolean;
  placeholder?: string;
  classNames?: Ag2bPopupClassNames;
};

Prop	Default	Description
`placement`	`'bottom-right'`	Which corner the FAB anchors to. One of `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`.
`mode`	`'streaming'`	One of `'synchronous`, `'streaming'`.
`showModeToggle`	`false`	Renders a header control that flips between streaming and synchronous at runtime.
`showClearChat`	`false`	Renders a header Clear button that resets the conversation history. Disabled while a turn is in flight or when there are no messages.
`showReasoning`	`false`	Renders assistant `reasoning` (when the provider emits it) as a collapsible block above each message.
`placeholder`	—	Composer placeholder text.
`classNames`	—	Per-slot class overrides — see Slots.

The popup closes only via the FAB or its header close button — not on outside-click or Escape — so app overlays the agent triggers (modals, popovers) don't collapse it. The composer autofocuses each time the panel opens.

Slots

Each entry on classNames is appended to the corresponding slot's built-in class.

Tailwind

Suffix utilities with ! (e.g. 'bg-red-500!') so they win over the built-in slot styles.

type Ag2bPopupClassNames = {
  fab?: string;
  panel?: string;
  header?: string;
  body?: string;
  message?: string;
  userMessage?: string;
  assistantMessage?: string;
  toolCall?: string;
  reasoning?: string;
  composer?: string;
  textarea?: string;
  sendButton?: string;
  stopButton?: string;
};

@ag2b/react-chat

On this page