skills.rest
khiwniti
khiwnitiCOMMUNITY
Explore all skills by this author →
GitHub

Agent Streaming UX

Implements SSE token streaming and WebSocket reconnection patterns for real-time AI agent interfaces.

Updated Apr 2, 2026
Search Tags:#fastapi#next.js#streaming#react hooks#sse#websocket#reconnection
One-click install
npx skills add https://github.com/khiwniti/carbonscope --skill agent-streaming-ux-khiwniti
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Agent Streaming UX
Source: https://github.com/khiwniti/carbonscope/tree/main/ai-agent-saas-expert/skills/agent-streaming-ux
Command: npx skills add https://github.com/khiwniti/carbonscope --skill agent-streaming-ux-khiwniti

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a real-time chat interface for an AI agent involves tricky problems: tokens arriving in bursts, dropped connections, flickering text, and users who want to stop generation mid-stream. This Skill provides production-tested patterns for wiring a Next.js frontend to an AI agent backend over SSE and WebSocket, with reconnection logic and UX feedback built in. ## Core Features & Use Cases - SSE Token Streaming: FastAPI StreamingResponse backend paired with a useSSEStream React hook featuring exponential back-off reconnection and typed chunk handling (token, tool_call, tool_result, done, error). - WebSocket Status Channels: Bidirectional agent status and sandbox lifecycle events with automatic reconnect and heartbeat handling. - Streaming UX Patterns: Thinking/streaming/done state machine, Stop Generation button via AbortController, scroll anchoring with jump-to-bottom, and offline detection banners. - Performance Checklist: Diagnoses common issues like flickering text, scroll jumps, Nginx buffering, and per-token markdown parsing. - Use Case: You are building a chat UI for a LangGraph agent and tokens appear in 30-second bursts instead of streaming smoothly — this Skill identifies the missing X-Accel-Buffering header and provides the corrected FastAPI and React code. ## Quick Start Ask the AI to set up SSE token streaming between your FastAPI agent backend and Next.js chat frontend with automatic reconnection and a stop-generation button.

Frequently Asked Questions about Agent Streaming UX

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

FAQPage Schema
How do I stream LLM tokens to a Next.js frontend?▼

Use Server-Sent Events with a FastAPI StreamingResponse that yields data chunks in SSE format, consumed by an EventSource on the client. Set Cache-Control to no-cache and X-Accel-Buffering to no so proxies do not buffer tokens.

SSE vs WebSocket for AI agent chat — which should I use?▼

Use SSE for LLM token streaming since it is server-to-client only, works over standard HTTP, and reconnects automatically. Use WebSocket for bidirectional needs like agent status events, sandbox lifecycle, and multi-user presence.

Why do my SSE tokens arrive in bursts instead of streaming?▼

Bursts are usually caused by Nginx or proxy buffering. Add the X-Accel-Buffering: no header to the StreamingResponse and increase proxy_read_timeout so tokens flush immediately to the client.

How do I add a stop generation button to a streaming chat?▼

Create an AbortController when starting the fetch request and pass its signal to fetch. The stop button calls controller.abort(), which cancels the stream; show the button only while isStreaming is true.

Why does my chat text flicker while streaming tokens?▼

Flickering happens when each token replaces state instead of appending. Use setState with prev plus token, wrap message components in React.memo, and defer markdown parsing until the done event instead of parsing every token.

How do I handle SSE reconnection after network drops?▼

Implement exponential back-off in the EventSource onerror handler: close the connection, retry with delays doubling up to a 30-second cap, and give up after 5 attempts while showing a connection banner with a manual retry option.

Related Skills

Explore More Software Engineering Skills→
flitzrrrflitzrrr
4

agent-ui-design

Design agent chat UIs with streaming content, tool-call cards, and three-panel layouts.

Community
Advanced
dungle-scrubsdungle-scrubs

react-state-management

Orchestrate React state with useState, TanStack Query, Zustand, and URL parameters.

Community
Intermediate
PostHogPostHog
713

investigating-metric-anomalies

Diagnoses server metric anomalies by correlating metrics, logs, and traces to root causes.

Official
Advanced
Sir-chawakornSir-chawakorn
9

build-realtime-channel

Architect stateful realtime channels with WebSocket or SSE protocols.

Community
Advanced