Chat Component

Full conversation interface with message history

← Back

Visual theme for the chat

Follows system preference

Colored cards — developer style

The agent to send messages to

Toggle the chat header visibility

Enable microphone button for voice input

Realtime voice conversations (mic icon when input is empty)

Customize the header title

Input field placeholder text

Container Styling

Key Props

agentIdstring
initialMessagesMessage[]
useMockboolean
showHeaderboolean
headerTitlestring
placeholderstring
onActionfunction
onMessageSentfunction

Examples:

  • • Live Chat: Empty chat for testing real interactions
  • • Welcome Screen: Start screen with suggested prompts (responsive)
  • • Hybrid Mode: Switch between Chat and Command modes
  • • Trip Planner: Pre-populated travel conversation with widgets
  • • Customer Support: Support chat with order tracking widgets
  • • Analytics: Business metrics conversation with data widgets
  • • Widget Mode: Floating chat widget for website integration
  • • Modal: Chat opened in a modal dialog from a button
AI Assistant
Ready

No messages yet. Start a conversation!