Explore topics

Topic

AI Chat Components

The UI half of an AI app is its own problem: streaming text that doesn't jump, reasoning you can collapse, citations that trace to sources, tool calls the user can approve. These components solve exactly that layer. Built on AI Elements and styled with Tailwind, each one drops into a Next.js app with the AI SDK's useChat — open the live preview, copy the source, restyle to match your product.

11 patterns7 featured
Open featured previewSee pricing

Featured patterns

A curated starting point for this topic — open a live preview, then adapt the source.

7 curated
Basic Chat Interface preview
01Beginner

Basic Chat Interface

Chat interface with streaming responses and message history. Includes typing indicators and message status tracking.

  • Stream chat responses with message history in the UI
  • Switch between a user-selected model and Perplexity Sonar for web search
  • Enable source and reasoning parts in the UI message stream
streamTextconvertToModelMessagesaichat
Open live preview
Reasoning preview
02Intermediate

Reasoning

Chat that shows AI's step-by-step reasoning. Includes decision trees, logical breakdowns, and explanatory tooltips.

  • Stream model reasoning parts alongside the final answer
  • Toggle or inspect reasoning in the chat UI
  • Demonstrate sendReasoning in toUIMessageStreamResponse
streamTextconvertToModelMessagesaichat
Open live preview
Sources & Citations preview
03Intermediate

Sources & Citations

Chat with source citations using Perplexity's Sonar model. Answers include clickable links for fact-checking.

  • Answer questions with citation-backed Perplexity Sonar responses
  • Stream clickable source links for fact-checking
  • Smooth word-chunked token streaming for readable answers
streamTextconvertToModelMessagesaichat
Open live preview
Inline Citations Demo preview
04Intermediate

Inline Citations Demo

Generate content with embedded citations and clickable references. Includes source verification and formatting for research writing.

  • Render research answers with inline citation components
  • Map cited sources to clickable references in the UI
  • Support fact-checked writing workflows in chat
streamObjectaicitations
Open live preview
Tool Approval preview
05Beginner

Tool Approval

Demonstrate tool execution with user confirmation. Includes approval workflows, confirmation UI, and state management for safe AI operations.

  • Require user confirmation before a needsApproval tool runs
  • Demonstrate the AI SDK built-in approval mechanism for delete_file
  • Keep pending approval state visible in the chat UI
streamTextconvertToModelMessagesuseChatai
Open live preview
Tool Execution preview
06Intermediate

Tool Execution

Connect AI agents with external APIs and services. Demonstrates tool calling with weather data, error handling, and visual feedback.

  • Render AI SDK tool invocations with dedicated tool UI parts
  • Show tool input, output, and status during streaming
  • Demonstrate tool calling inside an AI Elements chat shell
streamTexttools:convertToModelMessagesai
Open live preview
Chat-Base Clone preview
07Intermediate

Chat-Base Clone

A comprehensive Chatbase clone demo with widget interface, model selection, web search integration, and human-in-the-loop tool approval workflows.

  • Ship a Chatbase-style embeddable chat widget shell
  • Switch models through an AI Gateway router
  • Enable web search with sources and reasoning in the stream
streamTextconvertToModelMessagesuseChatai
Open live preview

More patterns

Additional patterns that fit this topic.

4 more
01
PlanA collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations.
02
Task Management DemoTask management with AI workflow automation. Creates tasks, tracks progress, and assigns work automatically.
03
QueueQueue management assistant using AI agents. Generate structured queues with messages, todos, and attachments through conversation.
04
Image Generation DemoGenerate images using DALL-E 3 with prompt optimization and style presets. Includes real-time preview, downloads, and batch processing.

Related topics

Continue with adjacent topics that share the same building blocks.

AI Artifacts

20

Patterns for AI agents that output real files and rich UI: XLSX spreadsheets, PDF reports, Word docs, slides, charts, tables, mermaid diagrams, and JSON-driven interfaces. Full source included.

Explore topic

AI SDK Examples

52

Complete, running examples for the AI SDK: generateText, streamText, structured output, tool calling, agent loop control, prepareStep, and tool-call repair. Copy the source, keep shipping.

Explore topic

AI Agent Tools

22

Give agents real capabilities: tool() definitions with lifecycle hooks, dynamic tools, tool-call repair, web search (Exa, Firecrawl), scraping, PDF ingestion, and human approval gates.

Explore topic

Browse by category

Jump into the catalog filtered by category.

Chat UI Elements

You’ve reached the end of AI Chat Components.