Chat Interface

A full ChatGPT-style interface powered by useChat — in ~20 lines of code.

Send a message to start chatting

The code powering this:

const { messages, send, isLoading, abort, streamingContent, error, clear, editAndResend } =
  useChat({ api: "/api/chat", systemPrompt: "You are a helpful assistant." });

return (
  <main className="h-screen flex flex-col bg-zinc-950 text-zinc-100">
    <ChatThread
      chat={{ messages, send, isLoading, abort, streamingContent, error, clear,
              regenerate, appendMessage, updateMessage, deleteMessage, editAndResend }}
      className="flex-1 min-h-0"
    />
    <PromptInput
      onSubmit={send}
      isLoading={isLoading}
      onStop={abort}
      className="border-t border-zinc-800"
    />
  </main>
);

~20 lines. That's a full chat interface with streaming, abort, message history, and error handling.

useChat manages optimistic user messages, SSE stream parsing, and automatic rollback on errors. The streamingContent prop gives you real-time token updates before the message is committed to history.

Provider agnostic. Works with OpenAI, Anthropic, or any endpoint that returns Server-Sent Events. Zero dependencies.

Optimistic UI

Messages appear instantly

Auto rollback

Failed requests undo cleanly

Abort support

Cancel mid-stream

Storage adapters

Persist to localStorage/DB