Dev Design Library

AI Elements components

AI Elements is a component library and custom registry built on top of shadcn/ui to help you build AI-native applications faster.

Components
49
Framework
React
Stack
React, TypeScript, Tailwind
License
Apache-2.0
GitHub stars
2,468
Source
https://github.com/vercel/ai-elements
Website
https://elements.ai-sdk.dev
Install
npx ai-elements@latest add {name}

All AI Elements components

  • Agent: A composable component for displaying AI agent configuration with model, instructions, tools, and output schema.
  • Artifact: A container component for displaying generated content like code, documents, or other outputs with built-in actions.
  • Attachments: A flexible, composable attachment component for displaying files, images, videos, audio, and source documents.
  • Audio Player: A composable audio player component built on media-chrome, with shadcn styling and flexible controls.
  • Canvas: A React Flow-based canvas component for building interactive node-based interfaces.
  • Chain Of Thought: A collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step progress indicators.
  • Checkpoint: A simple component for marking conversation history points and restoring the chat to a previous state.
  • Code Block: Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
  • Commit: Display commit information with hash, message, author, and file changes.
  • Confirmation: An alert-based component for managing tool execution approval workflows with request, accept, and reject states.
  • Connection: A custom connection line component for React Flow-based canvases with animated bezier curve styling.
  • Context: A compound component system for displaying AI model context window usage, token consumption, and cost estimation.
  • Controls: A styled controls component for React Flow-based canvases with zoom and fit view functionality.
  • Conversation: Wraps messages and automatically scrolls to the bottom. Also includes a scroll button that appears when not at the bottom.
  • Edge: Customizable edge components for React Flow canvases with animated and temporary states.
  • Environment Variables: Display environment variables with masking and copy functionality.
  • File Tree: Display hierarchical file and folder structure with expand/collapse functionality.
  • Image: Displays AI-generated images from the AI SDK.
  • Inline Citation: A hoverable citation component that displays source information and quotes inline with text, perfect for AI-generated content with…
  • Jsx Preview: A component that dynamically renders JSX strings with streaming support for AI-generated UI.
  • Message: A comprehensive suite of components for displaying chat messages, including message rendering, branching, actions, and markdown responses.
  • Mic Selector: A composable dropdown component for selecting audio input devices with permission handling and device change detection.
  • Model Selector: A searchable command palette for selecting AI models in your chat interface.
  • Node: A composable node component for React Flow-based canvases with Card-based styling.
  • Open In Chat: A dropdown menu for opening queries in various AI chat platforms including ChatGPT, Claude, T3, Scira, and v0.
  • Package Info: Display dependency information and version changes.
  • Panel: A styled panel component for React Flow-based canvases to position custom UI elements.
  • Persona: An animated AI visual component powered by Rive that responds to different states like listening, thinking, and speaking.
  • Plan: A collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations.
  • Prompt Input: Allows a user to send a message with file attachments to a large language model. It includes a textarea, file upload capabilities, a…
  • Question: A composable prompt for collecting choices, freeform text, or both from a user.
  • Queue: A comprehensive queue component system for displaying message lists, todos, and collapsible task sections in AI applications.
  • Reasoning: A collapsible component that displays AI reasoning content, automatically opening during streaming and closing when finished.
  • Sandbox: A collapsible container for displaying AI-generated code and output in chat interfaces.
  • Schema Display: Display REST API endpoint documentation with parameters, request/response bodies.
  • Shimmer: An animated text shimmer component for creating eye-catching loading states and progressive reveal effects.
  • Snippet: Lightweight inline code display for terminal commands and short code references.
  • Sources: A component that allows a user to view the sources or citations used to generate a response.
  • Speech Input: A button component that captures voice input and converts it to text, with cross-browser support.
  • Stack Trace: Displays formatted JavaScript/Node.js error stack traces with syntax highlighting and collapsible frames.
  • Suggestion: A suggestion component that displays a horizontal row of clickable suggestions for user interaction.
  • Task: A collapsible task list component for displaying AI workflow progress, with status indicators and optional descriptions.
  • Terminal: Display streaming console output with full ANSI color support.
  • Test Results: Display test suite results with pass/fail/skip status and error details.
  • Tool: A collapsible component for displaying tool invocation details in AI chatbot interfaces.
  • Toolbar: A styled toolbar component for React Flow nodes with flexible positioning and custom actions.
  • Transcription: A composable component for displaying interactive, synchronized transcripts from AI SDK transcribe() results with click-to-seek…
  • Voice Selector: A composable dialog component for selecting AI voices with metadata display and search functionality.
  • Web Preview: A composable component for previewing the result of a generated UI, with support for live examples and code display.

Browse by category