React AI Chat

React AI Chat

Drop-in AI chat components for React apps. Streaming, tool calls, file uploads, markdown — everything you need.

Quick Start

npm install react-ai-chat

Usage

Full chat component

import { Chat } from 'react-ai-chat'

function App() {
  return (
    <Chat
      config={{
        apiEndpoint: '/api/chat',
        systemPrompt: 'You are a helpful assistant.',
        model: 'gpt-4',
      }}
      title="AI Assistant"
      height={600}
    />
  )
}

Custom hook (build your own UI)

import { useChat, MessageBubble, ChatInput } from 'react-ai-chat'

function CustomChat() {
  const { messages, sendMessage, isLoading, error } = useChat({
    apiEndpoint: '/api/chat',
  })

  return (
    <div className="chat-container">
      {messages.map((msg) => (
        <MessageBubble key={msg.id} message={msg} />
      ))}
      {isLoading && <TypingIndicator />}
      <ChatInput onSend={sendMessage} isLoading={isLoading} />
    </div>
  )
}

API endpoint format

The chat component expects your API to return streaming responses in SSE format:

data: {"choices":[{"delta":{"content":"Hello"}}]}
data: {"choices":[{"delta":{"content":" world"}}]}
data: [DONE]

Or a non-streaming JSON response:

{
  "choices": [{
    "message": {
      "content": "Hello world",
      "tool_calls": [...]
    }
  }]
}

Tool calls

// The component automatically renders tool calls with status indicators
// Your API should include tool_calls in the stream delta:

{
  "choices": [{
    "delta": {
      "tool_calls": [{
        "id": "call_123",
        "type": "function",
        "function": {
          "name": "get_weather",
          "arguments": "{\"location\": \"NYC\"}"
        }
      }]
    }
  }]
}

API

Chat

ChatConfig

useChat

const {
  messages,        // ChatMessage[]
  sendMessage,     // (text: string) => Promise<void>
  isLoading,      // boolean
  error,          // Error | null
  clearMessages,  // () => void
  stopGeneration, // () => void
  updateMessage,  // (id, updates) => void
} = useChat(config)