chatkit-streaming_skill

Overview

This skill implements real-time streaming UI patterns for ChatKit applications. It provides reusable handlers and events to manage response lifecycles, progress updates, client effects, client tools, and thread state synchronization. Use it to make conversational UIs feel responsive and to keep complex client state and server-driven actions in sync.

How this skill works

The skill exposes lifecycle hooks (onResponseStart/onResponseEnd), streaming events (ProgressUpdateEvent), client effects (fire-and-forget UI updates), and client tools (request/response interactions with the browser). Frontend code registers handlers via useChatKit and reacts to events to lock UI, show progress, apply effects, or return client state to the agent. Backend agents yield ClientEffectEvent, ProgressUpdateEvent, or invoke client tools to orchestrate live interactions during streaming responses.

When to use it

• When locking UI and preventing race conditions while an AI response streams
• When showing live progress messages during long-running tools or searches
• When the server needs to update client UI without waiting for a return value
• When the AI must read client-side state (forms, map selection, viewport)
• When tracking and persisting thread lifecycle and thread title updates

Best practices

• Lock interactive UI elements on onResponseStart and unlock on onResponseEnd or onError
• Treat client effects as fire-and-forget and avoid blocking onEffect handlers
• Use ProgressUpdateEvent to communicate meaningful milestones, not token-level noise
• Implement onError to always restore UI state and avoid stuck interfaces
• Persist last active thread on onThreadChange and clear thread-specific UI state on load

Example use cases

• Interactive map apps: pause interactions during responses, apply add_marker and pan_to effects, and return selected items via client tools
• Form-based workflows: disable form inputs while AI processes submission and use client tool to read form values
• Search and analysis pipelines: stream progress messages like 'Searching...' and 'Processing article 3/12...'
• Games or simulations: pause gameplay during decision-making and apply entity updates through effects
• Automatic thread titling: generate concise thread titles on the first message and save them to thread metadata