AI SDK Elements

Vercel AI SDK Elements for React - UI components for building chat interfaces

aillmreactui-components

AI SDK Elements

Component library built on shadcn/ui for AI-native applications.

Overview

AI Elements provides pre-built components like conversations, messages, and more that integrate deeply with the AI SDK.

Key Characteristics

  • Built on shadcn/ui (WCAG 2.1 AA, CSS variables, dark mode)
  • Targeting React 19 and Tailwind CSS 4
  • Deep AI SDK integration (streaming, status awareness, type safety)
  • Fully composable architecture

Prerequisites

| Requirement | Version | |------------|---------| | Node.js | 18+ | | Next.js | With AI SDK installed | | shadcn/ui | Auto-installed by CLI |

Graphs

Documentation

  • [[graphs/docs.mdx]] - Full documentation

Components

  • [[graphs/ai-sdk-elements-overview.mdx]] - Overview
  • [[graphs/components/chatbot.mdx]] - Message, PromptInput, Conversation
  • [[graphs/components/chatbot-continued.mdx]] - Attachments, ModelSelector, Suggestion, Reasoning
  • [[graphs/components/chatbot-advanced.mdx]] - ChainOfThought, Task, Confirmation, Queue
  • [[graphs/components/chatbot-remaining.mdx]] - Checkpoint, Shimmer, Tool, Plan
  • [[graphs/components/voice.mdx]] - AudioPlayer, SpeechInput, Transcription
  • [[graphs/components/code.mdx]] - CodeBlock, Snippet, Terminal, FileTree, etc.
  • [[graphs/components/utilities-workflow.mdx]] - Image, OpenInChat, Canvas, Node, Edge

Examples

  • [[graphs/examples.mdx]] - Example implementations

Related Topics

  • [[ai-sdk-v6:index.mdx]] - Core AI SDK
  • [[shadcn:index.mdx]] - UI foundation

Getting Started

AI SDK Elements Overview

Overview of AI Elements component library

overviewintroductioncomponent-library

AI SDK Elements Documentation

Documentation for AI SDK Elements including introduction, benefits, setup, and usage

documentationsetupinstallation

Components

Chatbot Components

Chat UI components including Message, PromptInput, Conversation, and supporting components

chatbotmessageconversation

Chatbot Components (Continued)

Additional chatbot components including Attachments, ModelSelector, Suggestion, Reasoning

attachmentsmodel-selectorsuggestion

Chatbot Components (Advanced)

Advanced chatbot components including ChainOfThought, Task, Confirmation, Queue

chain-of-thoughttaskconfirmation

Chatbot Components (Remaining)

Remaining chatbot components including Checkpoint, Shimmer, Tool, Plan, Context, InlineCitation, Sources

checkpointshimmertool

Voice Components

Voice and audio components including AudioPlayer, SpeechInput, Transcription

voiceaudiospeech

Code Components

Code display components including CodeBlock, Snippet, and related components

codesyntax-highlightingterminal

Utilities and Workflow Components

Utility and workflow components including Image, OpenInChat, Canvas, Node, Edge

workflowcanvasnode

Examples

AI SDK Elements Examples

Example implementations using AI SDK Elements components

exampleschatbotide