Skip to content
react-sse-chat

Introduction

react-sse-chat is a lightweight React hook for consuming Server-Sent Events (SSE) from AI chat backends. Zero runtime dependencies — it uses native fetch + ReadableStream under the hood.

What You Get

Section titled “What You Get”

A single hook — useChat — that handles everything needed to build a streaming chat UI:

  • Messages state — user and assistant messages with structured parts managed for you
  • Streaming — real-time token-by-token rendering as the AI responds
  • SSE parsing — built-in parser for data: {JSON}\n\n formatted events
  • Abort/stop — cancel in-flight requests with one call
  • Error handling — network and stream errors surfaced via state and callbacks
  • Custom events — handle tool_call, text_delta, or any event type you define
  • Structured content — each message contains a parts array (text, tool calls, etc.) for flexible rendering

Features

Section titled “Features”

Zero Dependencies

Uses native fetch + ReadableStream. No heavy SDKs needed.

Simple API

One hook, one line: useChat({ api }). Messages, loading, and streaming handled for you.

Custom Events

Handle text_delta, tool_call, or any custom SSE event with onEvent.

Standalone Parser

The SSE parser is exported separately for advanced use cases outside React.

Next Steps

Section titled “Next Steps”
  • Problem to Solve — understand the pain points this library addresses
  • Quick Example — get up and running in under a minute
  • Features — initial messages, error handling, auth, markdown, and more
  • API Reference — full list of options and return values