AgentChat

AgentChat is the primary UI component. It renders a complete chat interface that fills its parent container. Must be used inside AgentProvider.

Usage

<div style={{ height: 600 }}>
  <AgentChat
    branding={{
      title: 'Support Agent',
      subtitle: 'How can I help?',
      description: 'Ask me anything about our product.',
      examplePrompts: ['How do I get started?', 'Show me the pricing'],
      inputPlaceholder: 'Type your question...',
    }}
    onClose={() => setOpen(false)}
    headerActions={<MyFullscreenButton />}
    maxContentWidth={820}
  />
</div>

tip

AgentChat fills its parent with height: 100%. Make sure the parent has a defined height.

tip

Unmounting and remounting AgentChat preserves conversation state. All state is managed by AgentProvider.

Props

Prop	Type	Default	Description
branding	AgentChatBranding	-	Chat branding configuration (see below).
onClose	() => void	-	When provided, shows a close button in the header.
headerActions	ReactNode	-	Additional buttons rendered in the header before the close button.
hideHeader	boolean	false	Hide the built-in header strip (title, new-chat, headerActions, close). Use when the host page already provides its own header chrome. When true, onClose and headerActions have nowhere to render.
maxContentWidth	number	820	Max width for messages and input. Set to 0 to disable. Useful for wide containers.

AgentChatBranding

Field	Type	Default	Description
title	ReactNode	'AI Assistant'	Title shown in the chat header. Accepts plain text or a React element.
subtitle	string	'What can I help with?'	Heading on the empty state.
description	string	-	Description below the subtitle.
examplePrompts	string[]	[]	Clickable starter prompts on the empty state.
inputPlaceholder	string	'Ask a question...'	Placeholder text in the input field.
footerExtra	ReactNode	-	Extra content on the right side of the attribution footer. See Attribution Footer.

Conversation history toggle

When the session was created with external_owner_id, AgentChat shows a history toggle button (clock icon) in the header. Clicking it replaces the chat body with the AgentThreadHistory component, which lists past conversations. Clicking a conversation resumes it and returns to chat view. Clicking the toggle again returns to the current chat.

The toggle is only shown when enableHistory is set to true on AgentProvider. See AgentProvider and Conversation history for details.

Features

• Streaming messages with markdown rendering (GFM tables, code blocks, links)
• Tool call cards with expandable args/response/sources tabs
• Tool approval flow with Allow/Deny buttons
• Custom tool rendering via the render prop on tool definitions
• Auto-scroll during streaming, with scroll-to-bottom button
• Example prompts on empty conversations
• New chat button to reset the conversation
• Dark/light mode. Adapts automatically to the color scheme