---
title: React SDK
description: The React SDK documentation provides comprehensive guidance on utilizing the Chatbotkit React SDK, including installation instructions, detailed explanations of components and hooks, and practical examples for building responsive chat interfaces.
tags:
  - SDK
category: SDKs
source: local
---

The Chatbotkit React SDK provides a suite of React components and hooks for building chat interfaces. It includes everything needed for creating responsive, interactive chat experiences with features like auto-scrolling, dynamic text areas, and conversation management.

## Installation

`````shell
npm install @chatbotkit/react

# or using yarn
yarn add @chatbotkit/react
`````

## Components

### AutoScroller

A component that automatically scrolls to the latest content.

`````typescript
import { AutoScroller } from '@chatbotkit/react'

interface AutoScrollerProps {
  children: React.ReactNode
  enabled?: boolean
  smooth?: boolean
  offset?: number
}

function ChatContainer() {
  return (
    <AutoScroller>
      {/* Chat messages */}
    </AutoScroller>
  )
}
`````

### AutoTextarea

An auto-expanding textarea component that grows with content.

`````typescript
import { AutoTextarea } from '@chatbotkit/react'

interface AutoTextareaProps {
  value: string
  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
  minRows?: number
  maxRows?: number
  placeholder?: string
  className?: string
  style?: React.CSSProperties
}

function ChatInput() {
  return (
    <AutoTextarea
      value={text}
      onChange={handleChange}
      minRows={1}
      maxRows={5}
      placeholder="Type a message..."
    />
  )
}
`````

### ChatInput

A specialized input component for chat interfaces.

`````typescript
import { ChatInput } from '@chatbotkit/react'

interface ChatInputProps {
  value: string
  onChange: (value: string) => void
  onSubmit: () => void
  disabled?: boolean
  placeholder?: string
  className?: string
}

function Chat() {
  return (
    <ChatInput
      value={message}
      onChange={setMessage}
      onSubmit={handleSubmit}
      placeholder="Type your message..."
    />
  )
}
`````

### ChatMessage

A component for rendering individual chat messages.

`````typescript
import { ChatMessage } from '@chatbotkit/react'

interface ChatMessageProps {
  message: {
    id: string
    type: 'user' | 'bot'
    text: string
    metadata?: Record<string, any>
  }
  className?: string
  avatar?: React.ReactNode
}

function Message({ message }) {
  return (
    <ChatMessage
      message={message}
      avatar={<UserAvatar />}
    />
  )
}
`````

### ChatMessages

A container component for rendering a list of chat messages.

`````typescript
import { ChatMessages } from '@chatbotkit/react'

interface ChatMessagesProps {
  messages: Array<{
    id: string
    type: 'user' | 'bot'
    text: string
  }>
  loading?: boolean
  className?: string
}

function MessageList() {
  return (
    <ChatMessages
      messages={messages}
      loading={isLoading}
    />
  )
}
`````

### ConversationManager

A component that manages the chat conversation state.

`````typescript
import { ConversationManager } from '@chatbotkit/react'

interface ConversationManagerProps {
  children: React.ReactNode
  endpoint: string
  initialMessages?: Array<Message>
  onError?: (error: Error) => void
}

function Chat() {
  return (
    <ConversationManager
      endpoint="/api/chat"
      initialMessages={[]}
    >
      {/* Chat interface components */}
    </ConversationManager>
  )
}
`````

## Hooks

### useConversationManager

A hook for managing chat conversation state and interactions.

`````typescript
import { useConversationManager } from '@chatbotkit/react'

interface UseConversationManagerOptions {
  endpoint: string
  initialMessages?: Array<Message>
  onError?: (error: Error) => void
  onStreamStart?: () => void
  onStreamToken?: (token: string) => void
  onStreamComplete?: () => void
}

interface UseConversationManagerResult {
  messages: Array<Message>
  thinking: boolean
  text: string
  setText: (text: string) => void
  submit: () => Promise<void>
  clear: () => void
  error: Error | null
}

function ChatInterface() {
  const {
    messages,
    thinking,
    text,
    setText,
    submit,
    clear,
    error
  } = useConversationManager({
    endpoint: '/api/chat',
    onStreamStart: () => console.log('Stream started'),
    onStreamComplete: () => console.log('Stream completed')
  })

  return (
    // Chat interface implementation
  )
}
`````

## Types

`````typescript
interface SimpleMessage {
  id: string
  type: 'user' | 'bot'
  text: string
}

interface ComplexMessage extends SimpleMessage {
  metadata?: Record<string, any>
  timestamp?: number
  status?: 'pending' | 'sent' | 'error'
}

interface UseConversationManagerOptions {
  endpoint: string
  initialMessages?: Array<SimpleMessage | ComplexMessage>
  onError?: (error: Error) => void
  onStreamStart?: () => void
  onStreamToken?: (token: string) => void
  onStreamComplete?: () => void
}

interface UseConversationManagerResult {
  messages: Array<SimpleMessage | ComplexMessage>
  thinking: boolean
  text: string
  setText: (text: string) => void
  submit: () => Promise<void>
  clear: () => void
  error: Error | null
}
`````

## Examples

### Complete Chat Implementation

`````typescript
import {
  AutoScroller,
  ChatInput,
  ChatMessages,
  useConversationManager
} from '@chatbotkit/react'

function Chat() {
  const {
    messages,
    thinking,
    text,
    setText,
    submit
  } = useConversationManager({
    endpoint: '/api/chat'
  })

  return (
    <div className="chat-container">
      <AutoScroller>
        <ChatMessages
          messages={messages}
          loading={thinking}
        />
      </AutoScroller>

      <ChatInput
        value={text}
        onChange={setText}
        onSubmit={submit}
        disabled={thinking}
        placeholder="Type a message..."
      />
    </div>
  )
}
`````

### Custom Message Rendering

`````typescript
import { ChatMessage, ChatMessages } from '@chatbotkit/react'

function CustomChatMessages({ messages }) {
  return (
    <ChatMessages>
      {messages.map(message => (
        <ChatMessage
          key={message.id}
          message={message}
          avatar={
            message.type === 'user'
              ? <UserAvatar />
              : <BotAvatar />
          }
          className={`message-${message.type}`}
        />
      ))}
    </ChatMessages>
  )
}
`````

This documentation covers all the components and hooks shown in the screenshot. Would you like me to expand on any particular component or add more specific examples?