ai-sdk-elements/Getting Started

AI SDK Elements Overview

Overview of AI Elements component library

overviewintroductioncomponent-library

AI SDK Elements Overview

What It Is

From llmstxt/docs/index.mdx:

AI Elements is a component library and custom registry built on top of shadcn/ui to help you build AI-native applications faster. It provides pre-built components like conversations, messages and more.

Prerequisites

From llmstxt/docs/index.mdx:

| Requirement | Version | Notes | |-------------|---------|-------| | Node.js | 18+ | | | Next.js | | With AI SDK installed | | shadcn/ui | | Auto-installed by AI Elements CLI | | AI Gateway | Recommended | $5/month free tier available |

Installation Methods

From llmstxt/docs/index.mdx:

Two installation paths via CLI:

  1. AI Elements CLI — dedicated installer for fastest setup
  2. shadcn/ui CLI — for projects already using shadcn workflow

Components are added to @/components/ai-elements/ by default.

Why Use It

From llmstxt/docs/benefits.mdx:

Fully Composable

Components are designed as building blocks:

<Message from="assistant">
  <MessageContent>
    <MessageResponse>{text}</MessageResponse>
  </MessageContent>
</Message>

Deep AI SDK Integration

From llmstxt/docs/benefits.mdx:

| Feature | Implementation | |---------|---------------| | Streaming support | MessageResponse handles partial markdown | | Status awareness | UI adapts to pending/streaming/complete states | | Type safety | Props align with UIMessage type |

Built on shadcn/ui

Inherits from shadcn/ui:

  • WCAG 2.1 AA accessibility baseline
  • CSS variables for theming
  • Dark mode support built-in

Component Categories

From llmstxt/docs/index.mdx:

| Category | Purpose | Path | |----------|---------|------| | Chatbot | Chat UI components | components/(chatbot)/ | | Voice | Audio/speech components | components/(voice)/ | | Code | Code display components | components/(code)/ | | Utilities | Shared utility components | components/(utilities)/ |

Further Reading