streaming-llm-responses
Implement real-time streaming UI patterns for AI chat applications. Use when adding response lifecycle handlers, progress indicators, client effects, or thread state synchronization. Covers onResponseStart/End, onEffect, ProgressUpdateEvent, and client tools. NOT when building basic chat without real-time feedback.
npx skills add majiayu000/claude-skill-registry --skill streaming-llm-responses-abdullahmalik17-digital-fte-2 --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Streaming LLM Responses Build responsive, real-time chat interfaces with streaming feedback. ## Quick Start ```typescript import { useChatKit } from "@openai/chatkit-react"; const chatkit = useChatKit({ api: { url: API_URL, domainKey: DOMAIN_KEY }, onResponseStart: () => setIsResponding(true), onResponseEnd: () => setIsResponding(false), onEffect: ({ name, data }) => { if (name === "update_status") updateUI(data); }, }); ``` --- ## Response Lifecycle ``` User sends message ↓ onResponseStart() fires ↓ [Streaming: tokens arrive, ProgressUpdateEvents shown] ↓ onResponseEnd() fires ↓ UI unlocks, ready for next interaction ``` --- ## Core Patterns ### 1. Response Lifecycle Handlers Lock UI during AI response to prevent race conditions: ```typescript function ChatWithLifecycle() { const [isResponding, setIsResponding] = useState(false); const lockInteraction = useAppStore((s) => s.lockInteraction); const unlockInteraction = useAppStore((s) => s.unlockInteraction); const chatkit = useChatKit({ api: { url: API_URL, domainKey: DOMAIN_KEY }, onResponseStart: () => { setIsResponding(true); lockInteraction(); // Disable map/canvas/form interactions }, onResponseEnd: () => { setIsResponding(f
- Quick Start
- Response Lifecycle
- Core Patterns
- 1. Response Lifecycle Handlers
- 2. Client Effects (Fire-and-Forget)
- 3. Progress Updates
- 4. Thread Lifecycle Events
- 5. Client Tools (State Query)
- Client Effects vs Client Tools
- Common Patterns by Use Case
- Interactive Map/Canvas
- Form-Based UI
- Game/Simulation
- Thread Title Generation
What does the streaming-llm-responses skill do?
Implement real-time streaming UI patterns for AI chat applications. Use when adding response lifecycle handlers, progress indicators, client effects, or thread state synchronization. Covers onResponseStart/End, onEffect, ProgressUpdateEvent, and client tools. NOT when building basic chat without real-time feedback.
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill streaming-llm-responses-abdullahmalik17-digital-fte-2 --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.