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.

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

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