LLM streaming response handler — production SSE streaming UIs with cancellation and error recovery
Build production-grade LLM streaming UIs with Server-Sent Events — token-by-token display, AbortController cancellation, error recovery, React hooks, Next.js server patterns, and a production checklist
- What
- Build production-grade LLM streaming UIs with Server-Sent Events — token-by-token display, AbortController cancellation, error recovery, React hooks, Next.js server patterns, and a production checklist
- Cost
- Free
- Needs
- a frontend/backend project that calls an LLM streaming API (OpenAI, Anthropic, or similar) — the skill is an implementation guide the agent follows, not software
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — @curiositech's llm-streaming-response-handler skill: a complete guide to building production-grade streaming interfaces for LLM responses that feel instant. Covers why SSE beats WebSockets for one-way LLM streaming (simplicity, auto-reconnect, firewall-friendliness), the streaming formats of OpenAI/Anthropic/Vercel AI SDK, five common anti-patterns with fixes (buffering before display, no stream cancellation, no error recovery, memory leaks from unclosed streams, no typing indicator), and copy-ready implementation patterns — a basic SSE stream handler, a React useStreaming hook (content, isStreaming, error, stream, cancel), and a Next.js edge-runtime API route converting OpenAI streams to SSE — plus a 12-point production checklist (AbortController, error states with retry, typing indicator, cleanup on unmount, rate limiting, token tracking, streaming fallback, accessibility, mobile-friendly stop targets, network recovery, max length, cost estimation). Honest caveats: focused on one-way SSE streaming, not bidirectional WebSocket chat; API details (provider event formats, Vercel AI SDK) can drift over time. MIT licensed. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a frontend/backend project that calls an LLM streaming API (OpenAI, Anthropic, or similar) — the skill is an implementation guide the agent follows, not software Install "LLM streaming response handler — production SSE streaming UIs with cancellation and error recovery" for me. It gives my agent @curiositech's streaming guide: choose SSE for one-way LLM streaming, implement token-by-token display (never buffer before display), add AbortController cancellation, error states with retry, cleanup on unmount to avoid memory leaks, typing indicators, and use the copy-ready patterns — basic SSE stream handler, React useStreaming hook, Next.js edge-runtime API route — then run the 12-point production checklist (rate limiting, token tracking, streaming fallback, accessibility, mobile targets, network recovery, max length, cost estimation). MIT-licensed. Repository: https://github.com/curiositech/some_claude_skills/blob/HEAD/.claude/skills/llm-streaming-response-handler/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "llm-streaming-response-handler". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. wire the useStreaming hook or SSE handler into my chat UI and API route; nothing else — it's a methodology). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.