ai-sdk-elements/Getting Started

AI SDK Elements Documentation

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

documentationsetupinstallationtroubleshooting

AI SDK Elements Documentation

Overview

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

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

Key Characteristics

Fully Composable

Every component is designed as a building block:

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

Deep AI SDK Integration

  • Streaming support - MessageResponse handles partial markdown
  • Status awareness - UI adapts to pending, streaming, complete states
  • Type safety - Props align with AI SDK types like UIMessage

Built on shadcn/ui

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

Fast, Flexible Installation

Install only what you need:

npx ai-elements@latest add message
  • No hidden dependencies
  • Full source code access
  • Tree-shaking friendly

Installation

Two installation paths:

  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.

Usage

Components work with AI SDK hooks:

import { useChat } from "@ai-sdk/react";
import { Message, MessageContent, MessageResponse } from "@/components/ai-elements/message";

function Chat() {
  const { messages } = useChat();

  return messages.map((message) => (
    <Message from={message.role}>
      <MessageContent>
        <MessageResponse>
          {message.parts.find((p) => p.type === "text")?.text}
        </MessageResponse>
      </MessageContent>
    </Message>
  ));
}

Philosophy

AI Elements is purpose-built for AI applications. Key principles:

  • Components understand streaming responses
  • Built for composability, not rigid structures
  • Full control when you need it, sensible defaults out of the box

Troubleshooting

Common issues and solutions:

  • Streamdown styles missing: Add @source "../node_modules/streamdown/dist/*.js"; to globals.css
  • Browser compatibility: SpeechInput requires HTTPS or localhost
  • Type errors: Ensure React 19 and Tailwind CSS 4

Contributing

See how-to-contribute.mdx for development setup.

Further Reading

  • Setup: [[../llmstxt/docs/setup.mdx]]
  • Philosophy: [[../llmstxt/docs/philosophy.mdx]]