streaming-llm-responses

Implement real-time streaming UI patterns for ChatKit-based AI chat applications.

9|2|Updated Jan 31, 2026
One-click install
npx skills add https://github.com/AbdullahMalik17/Hacathan_5 --skill streaming-llm-responses-abdullahmalik17
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: streaming-llm-responses
Source: https://github.com/AbdullahMalik17/Hacathan_5/tree/main/.claude/skills/streaming-llm-responses
Command: npx skills add https://github.com/AbdullahMalik17/Hacathan_5 --skill streaming-llm-responses-abdullahmalik17

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? AI chat interfaces feel unresponsive when users see no feedback during long LLM operations, and race conditions occur when the UI stays interactive while a response streams. This Skill provides the patterns to wire response lifecycle handlers, progress indicators, client effects, and client tools into ChatKit applications. ## Core Features & Use Cases - Response Lifecycle Handlers: Lock and unlock UI with onResponseStart/onResponseEnd/onError to prevent race conditions during streaming. - Client Effects and Progress Updates: Emit fire-and-forget ClientEffectEvent and ProgressUpdateEvent from Python backends to show "Searching..." states and update UI without round trips. - Client Tools: Let the AI query browser-side state (selections, viewport, form values) via onClientTool handlers. - Use Case: While building a support chat with a map canvas, use onResponseStart to lock the canvas, stream ProgressUpdateEvent messages from a search tool, and fire an add_marker effect to place results on the map. ## Quick Start Add streaming lifecycle handlers, progress updates, and client effects to my ChatKit chat component using this skill.

Frequently Asked Questions about streaming-llm-responses

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add streaming progress indicators to a ChatKit chat app?▼

Yield ProgressUpdateEvent messages from Python function tools during long operations, such as "Searching articles...". ChatKit renders these updates inline while the response streams, giving users live feedback without extra frontend code.

How to lock the UI while an LLM response is streaming?▼

Use the onResponseStart and onResponseEnd handlers in useChatKit to set an isResponding state and call lock/unlock functions for maps, canvases, or forms. Always unlock in onError as well so the UI never stays frozen after a failure.

What is the difference between client effects and client tools in ChatKit?▼

Client effects are fire-and-forget server-to-client messages handled by onEffect to update UI without a reply. Client tools are server-initiated calls handled by onClientTool that must return a value, letting the AI read browser state like selections or viewport.

Can ChatKit client tools read React component state?▼

Yes. Define a function_tool on the Python backend with a name override, then handle that name in the frontend onClientTool callback and return values from refs or stores, such as selected item IDs or form values.

Why does my chat UI freeze after a streaming error?▼

The UI stays locked when onError does not reset the responding state. Always set isResponding to false and call your unlock function inside onError, and optionally show a toast and report the error to monitoring.