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

Agent Chat UI Patterns

Implements React components for streaming agent chat interfaces with tool-call rendering.

Updated Apr 2, 2026
Search Tags:#react#next.js#streaming#file upload#chat ui#tool calls#virtualization
One-click install
npx skills add https://github.com/khiwniti/carbonscope --skill agent-chat-ui-patterns-khiwniti
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Agent Chat UI Patterns
Source: https://github.com/khiwniti/carbonscope/tree/main/ai-agent-saas-expert/skills/agent-chat-ui-patterns
Command: npx skills add https://github.com/khiwniti/carbonscope --skill agent-chat-ui-patterns-khiwniti

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-virtual, lucide-react.

What problem does it solve? Building a chat UI for AI agents involves tricky problems: rendering mixed message parts (text, tool calls, images, files), keeping streaming output performant, pairing tool calls with their results, and handling large thread histories without DOM bloat. This Skill provides production-grade React/Next.js component patterns that solve each of these problems. ## Core Features & Use Cases - Parts-Based Message Rendering: A MessageRenderer that dispatches each message part type (text, tool-call, tool-result, image, file) to the correct component, pairing tool calls and results by toolCallId into a single ToolCallCard. - Streaming & Performance Patterns: StreamingText with aria-live announcements, React.memo on every message component, and a virtualized MessageList using @tanstack/react-virtual for threads over 50 messages. - Complete Chat Building Blocks: MessageBubble with hover actions (copy, regenerate, feedback), FileUploadZone with drag-and-drop and progress tracking, and a full thread page layout with connection banner and sandbox status badge. - Use Case: You are building a Next.js dashboard where users converse with an AI agent that calls tools. Use these patterns to render streaming tokens, display tool execution status, and let users upload files, all with WCAG-conscious accessibility. ## Quick Start Ask the agent to build a streaming chat message list with tool-call cards for your Next.js app using these patterns.

Frequently Asked Questions about Agent Chat UI Patterns

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

FAQPage Schema
How do I render streaming AI messages in React?▼

Render streaming text with a dedicated StreamingText component that receives the partial content and an isStreaming flag, and wrap the list in a container with aria-live="polite" so screen readers get token updates. Memoize each message component with React.memo to avoid re-rendering the whole list on every token.

How to display tool calls and results in a chat UI?▼

Pair tool-call and tool-result message parts by matching their toolCallId, then render a single ToolCallCard per call. Derive the card status from the result: pending when no result exists, error when isError is set, and success otherwise.

When should I virtualize a chat message list?▼

Virtualize with @tanstack/react-virtual once a thread exceeds roughly 50 messages to avoid DOM bloat. Use measureElement for dynamic message heights and track scroll position so auto-scroll to the bottom only happens when the user has not scrolled up.

How do I add drag-and-drop file upload to a chat input?▼

Use a drop zone label handling onDragOver, onDragLeave, and onDrop events, then upload each file with XMLHttpRequest to track progress via xhr.upload.onprogress. Show per-file tiles with name, size, progress percentage, and error state, enforcing a max file size before uploading.

Why does my chat UI re-render every message on each token?▼

This happens when message components are not memoized, so each streaming token update re-renders the entire list. Wrap MessageBubble and MessageRenderer in React.memo and keep stable keys so only the actively streaming message updates.

Related Skills

Explore More Software Engineering Skills→
compozycompozy
182

assistant-ui

Build interactive AI chat interfaces with React hooks and streaming adapters.

Official
Advanced
PolarCoding85PolarCoding85
17

convex-agent

Build AI agents with persistent threads and tool calling in Convex.

Community
Advanced
anicdhanicdh

typescript-websocket

Guide WebSocket and SSE integration in TypeScript with NestJS and React.

Community
Advanced
compozycompozy
2.7k

assistant-ui

Guides building AI chat interfaces with assistant-ui React primitives and runtime adapters.

Official
Intermediate