@react-ai-stream/react

Stream AI chat from any backend with a single React hook. Works with Anthropic, OpenAI, Groq, FastAPI, Go, Rails, or any server that speaks HTTP + SSE.

Install

npm install @react-ai-stream/react

Peer dependencies: React 18 or 19.

Quick start

'use client'
import { useAIChat } from '@react-ai-stream/react'

export default function Page() {
  const { messages, sendMessage, loading, stop, error } = useAIChat({
    endpoint: '/api/chat',
  })

  return (
    <div>
      {messages.map((m) => (
        <p key={m.id}><strong>{m.role}:</strong> {m.content}</p>
      ))}
      <button onClick={() => sendMessage('Hello!')} disabled={loading}>Send</button>
      {loading && <button onClick={stop}>Stop</button>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  )
}

Event hooks

const chat = useAIChat({
  endpoint: '/api/chat',
  onToken: (token) => console.log('chunk:', token),
  onComplete: (message) => saveToDatabase(message),
  onError: (err) => Sentry.captureException(err),
})

Hook return values

Value	Type	Description
`messages`	`Message[]`	Full conversation history
`sendMessage`	`(text: string) => Promise<void>`	Send a message
`loading`	`boolean`	True while streaming
`stop`	`() => void`	Abort in-flight stream
`error`	`string \| null`	Last error message
`clearMessages`	`() => void`	Reset conversation

Documentation

Full docs, backend setup, and provider options: github.com/trimooo/react-ai-stream