Skip to main content

ChatBaseProps

Agent Runtimes

Agent Runtimes / types/chat / ChatBaseProps

Interface: ChatBaseProps

Defined in: types/chat.ts:225

ChatBase props

Properties​

agentRuntimeConfig?​

optional agentRuntimeConfig?: AgentRuntimeConfig

Defined in: types/chat.ts:351

Simplified agent runtime configuration. A convenience wrapper that creates a ProtocolConfig internally. When provided, will automatically set useStore=false and configure protocol mode.

Example​

<ChatBase
  agentRuntimeConfig={{
    url: 'http://localhost:8765',
    agentId: 'my-agent',
    authToken: 'my-token',
  }}
/>

autoFocus?​

optional autoFocus?: boolean

Defined in: types/chat.ts:443

Auto-focus the input on mount

availableModels?​

optional availableModels?: ModelConfig[]

Defined in: types/chat.ts:284

Override the list of available models. When provided, this list replaces the models returned by the config endpoint. Use this to restrict the model selector to a specific subset of models.

avatarConfig?​

optional avatarConfig?: AvatarConfig

Defined in: types/chat.ts:373

Avatar configuration

backgroundColor?​

optional backgroundColor?: string

Defined in: types/chat.ts:413

Panel background color

border?​

optional border?: string

Defined in: types/chat.ts:416

Border style

borderRadius?​

optional borderRadius?: string | number

Defined in: types/chat.ts:410

Border radius for the panel container

boxShadow?​

optional boxShadow?: string

Defined in: types/chat.ts:419

Box shadow

brandIcon?​

optional brandIcon?: ReactNode

Defined in: types/chat.ts:370

Custom brand icon for header

chatViewMode?​

optional chatViewMode?: ChatViewMode

Defined in: types/chat.ts:306

Current chat view mode. When provided, a segmented view-mode toggle is rendered in the header with icons for each mode: floating (popup), floating-small (compact), sidebar (docked).

children?​

optional children?: ReactNode

Defined in: types/chat.ts:407

Children to render in the messages area (for custom content)

className?​

optional className?: string

Defined in: types/chat.ts:293

Custom class name

codemodeEnabled?​

optional codemodeEnabled?: boolean

Defined in: types/chat.ts:274

Indicate tools are accessed via Codemode meta-tools

compact?​

optional compact?: boolean

Defined in: types/chat.ts:422

Compact mode (reduced padding)

connectedIdentities?​

optional connectedIdentities?: object[]

Defined in: types/chat.ts:516

Connected identities to pass to agent tools. When provided, access tokens for these identities are automatically included in tool calls that need them.

accessToken?​

optional accessToken?: string

provider​

provider: string

userId?​

optional userId?: string

Example​

const { identities, getAccessToken } = useIdentity();
<ChatBase connectedIdentities={identities} />

contextSnapshot?​

optional contextSnapshot?: ContextSnapshotData

Defined in: types/chat.ts:246

External context snapshot data for the token usage bar. When provided, this overrides the built-in useContextSnapshot hook (which is a no-op since the REST endpoint was removed). Pass live data received from the monitoring WebSocket.

description?​

optional description?: string

Defined in: types/chat.ts:428

Description shown in empty state (protocol mode)

emptyState?​

optional emptyState?: EmptyStateConfig

Defined in: types/chat.ts:385

Empty state configuration

enableStreaming?​

optional enableStreaming?: boolean

Defined in: types/chat.ts:365

Enable streaming mode for custom message handler. When true, will provide streaming callbacks to onSendMessage.

Default​

false

focusTrigger?​

optional focusTrigger?: number

Defined in: types/chat.ts:469

Trigger to refocus the input field. When this value changes, the input will be focused. Useful for refocusing after view mode changes.

footerContent?​

optional footerContent?: ReactNode

Defined in: types/chat.ts:391

Custom footer content (rendered above input)

frontendTools?​

optional frontendTools?: FrontendToolDefinition<Record<string, unknown>, unknown>[]

Defined in: types/chat.ts:475

Frontend tools to register with the agent. These tools execute in the browser and their results are sent back to the agent.

headerActions?​

optional headerActions?: ReactNode

Defined in: types/chat.ts:299

Header actions

headerButtons?​

optional headerButtons?: HeaderButtonsConfig

Defined in: types/chat.ts:376

Header buttons configuration

headerContent?​

optional headerContent?: ReactNode

Defined in: types/chat.ts:404

Custom header content (rendered below title row)

hideMessagesAfterToolUI?​

optional hideMessagesAfterToolUI?: boolean

Defined in: types/chat.ts:462

Whether to hide assistant messages that follow a rendered tool call UI. When true, assistant messages after tool UI are hidden to avoid duplicate information.

Default​

false

historyAuthToken?​

optional historyAuthToken?: string

Defined in: types/chat.ts:541

Auth token for the history endpoint. If not provided, uses the protocol's authToken.

historyEndpoint?​

optional historyEndpoint?: string

Defined in: types/chat.ts:535

Endpoint URL for fetching conversation history. When runtimeId is provided, this endpoint is called to fetch the conversation history on mount. If not provided, defaults to {protocol.endpoint}/api/v1/history.

initialModel?​

optional initialModel?: string

Defined in: types/chat.ts:277

Initial model ID to select (e.g., 'openai:gpt-4o-mini')

initialSkills?​

optional initialSkills?: string[]

Defined in: types/chat.ts:290

Initial skill IDs to enable

loadingState?​

optional loadingState?: ReactNode

Defined in: types/chat.ts:296

Custom loading state

mcpServers?​

optional mcpServers?: McpServerSelection[]

Defined in: types/chat.ts:287

MCP servers to enable (others will be disabled)

mcpStatusData?​

optional mcpStatusData?: McpToolsetsStatusResponse | null

Defined in: types/chat.ts:253

External MCP toolsets status data for the MCP indicator. When provided, the data is forwarded to the McpStatusIndicator so it shows live status instead of "No MCP Server defined".

onAuthorizationRequired?​

optional onAuthorizationRequired?: (provider, scopes, context?) => Promise<string | null>

Defined in: types/chat.ts:499

Callback when the agent requests authorization for an external service. This is called when a tool needs OAuth access to a service like GitHub.

Parameters​

provider​

string

The OAuth provider name (e.g., 'github', 'google')

scopes​

string[]

The requested OAuth scopes

context?​

Additional context about why authorization is needed

reason?​

string

toolName?​

string

Returns​

Promise<string | null>

Promise resolving to the access token, or null if user cancels

Example​

<ChatBase
  onAuthorizationRequired={async (provider, scopes, context) => {
    // Show UI to user to authorize
    const token = await showAuthDialog(provider, scopes);
    return token;
  }}
/>

onChatViewModeChange?​

optional onChatViewModeChange?: (mode) => void

Defined in: types/chat.ts:311

Callback when the user clicks a different view mode in the header toggle.

Parameters​

mode​

ChatViewMode

Returns​

void

onClear?​

optional onClear?: () => void

Defined in: types/chat.ts:437

Callback when messages are cleared

Returns​

void

onInformationClick?​

optional onInformationClick?: () => void

Defined in: types/chat.ts:401

Callback when the information icon is clicked

Returns​

void

onMessagesChange?​

optional onMessagesChange?: (messages) => void

Defined in: types/chat.ts:440

Callback when messages change (for tracking message count)

Parameters​

messages​

ChatMessage[]

Returns​

void

onNewChat?​

optional onNewChat?: () => void

Defined in: types/chat.ts:434

Callback when new chat is triggered

Returns​

void

onSendMessage?​

optional onSendMessage?: MessageHandler

Defined in: types/chat.ts:358

Custom message handler (for props-based mode). When provided, uses custom handler instead of store or protocol. Supports streaming via options callbacks.

onStateUpdate?​

optional onStateUpdate?: (state) => void

Defined in: types/chat.ts:431

Callback for state updates (for shared state)

Parameters​

state​

unknown

Returns​

void

pendingPrompt?​

optional pendingPrompt?: string

Defined in: types/chat.ts:547

A prompt to append and send after the conversation history is loaded. The message is shown in the chat and sent to the agent exactly once.

placeholder?​

optional placeholder?: string

Defined in: types/chat.ts:425

Input placeholder override

poweredByProps?​

optional poweredByProps?: Partial<PoweredByTagProps>

Defined in: types/chat.ts:382

Powered by tag props

protocol?​

optional protocol?: Protocol | ProtocolConfig

Defined in: types/chat.ts:333

Protocol configuration for connecting to backend. When provided and useStore is false, enables protocol mode.

Accepts either a full ProtocolConfig object or a simple Protocol string (e.g. 'vercel-ai'). When a string is provided, it is used as the protocol type and combined with other props (endpoint, agentRuntimeConfig) to build the full configuration.

Default​

'vercel-ai'

renderToolResult?​

optional renderToolResult?: RenderToolResult

Defined in: types/chat.ts:388

Tool result renderer for tool calls

runtimeId?​

optional runtimeId?: string

Defined in: types/chat.ts:527

Runtime ID for conversation persistence. When provided, messages are fetched from the server API on page reload and prevents message mixing between different agent runtimes.

showErrors?​

optional showErrors?: boolean

Defined in: types/chat.ts:259

Show error messages

showHeader?​

optional showHeader?: boolean

Defined in: types/chat.ts:230

Show header

showInformation?​

optional showInformation?: boolean

Defined in: types/chat.ts:398

Show the information icon in the header. When clicked, fires onInformationClick.

Default​

false

showInput?​

optional showInput?: boolean

Defined in: types/chat.ts:262

Show input area

showLoadingIndicator?​

optional showLoadingIndicator?: boolean

Defined in: types/chat.ts:256

Show loading indicator

showModelSelector?​

optional showModelSelector?: boolean

Defined in: types/chat.ts:265

Show model selector (for protocols that support it)

showPoweredBy?​

optional showPoweredBy?: boolean

Defined in: types/chat.ts:379

Show powered by tag

showSkillsMenu?​

optional showSkillsMenu?: boolean

Defined in: types/chat.ts:271

Show skills menu (for protocols that support it)

showTokenUsage?​

optional showTokenUsage?: boolean

Defined in: types/chat.ts:238

Show token usage bar (input/output token counts from the backend). Rendered independently of showHeader, so usage is visible even without a title bar. Requires the protocol to have enableConfigQuery=true and an agentId.

Default​

true

showToolsMenu?​

optional showToolsMenu?: boolean

Defined in: types/chat.ts:268

Show tools menu (for protocols that support it)

submitOnSuggestionClick?​

optional submitOnSuggestionClick?: boolean

Defined in: types/chat.ts:455

Whether to automatically submit the message when a suggestion is clicked.

Default​

true

suggestions?​

optional suggestions?: Suggestion[]

Defined in: types/chat.ts:449

Suggestions to show in empty state. When clicked, the suggestion message is sent to the chat.

title?​

optional title?: string

Defined in: types/chat.ts:227

Chat title

useStore?​

optional useStore?: boolean

Defined in: types/chat.ts:320

Use Zustand store for state management. When true, uses the shared store. When false with protocol, uses protocol mode.

Default​

true