Streaming AI chat
A chat that streams token by token — from a scripted mock with no key, or Claude the moment one is configured.
Before you try it
What it needs
ANTHROPIC_API_KEYWithout them: A deterministic scripted reply streams through the identical route.Mode right now
A safe failure to try
Chat
Ask anything. With no API key configured a scripted mock answers, with one Claude does — either way it streams through the same pipeline. The badge above names the source as soon as the first reply starts.
How this is wired
The same pattern as the mail transport, applied to a model.
The browser talks only to /api/chat. The API key — when one exists — lives on the server and never appears in this page’s source or network tab.
With no key, a deterministic scripted reply streams through the identical route, validation, and rate limit. Adding ANTHROPIC_API_KEY to .env switches the stream source — nothing else changes.
When the real model is active, chatting requires signing in: an open LLM endpoint is a free compute faucet for whoever finds it, so the rule is costs money → needs an account.
The Stop button aborts the fetch, and the server threads that same signal into generation — stopping the response also stops the spend.
What this demonstrates
- Streaming so time-to-first-token is what users feel, read by hand with fetch + TextDecoder
- Provider abstraction: the mock and the real model differ by one env variable
- The API key lives server-side; the browser only ever sees /api/chat
- When the model costs money, the endpoint requires an account
- Stop aborts the fetch AND the generation — ending the response ends the spend
Where the code lives
src/experiments/ai-chat/demo.tsxRegistered in src/experiments/registry.ts and loaded on demand by loader.tsx.