AI Elements

AI Elements

Build AI-native applications with pre-built components on shadcn/ui.

Quick Start

# Install all AI Elements components
bunx --bun ai-elements@latest
# or via shadcn CLI
bunx --bun shadcn@latest add @ai-elements/all

# Install AI SDK dependencies
bun add ai @ai-sdk/react zod

Components install to @/components/ai-elements/.

Component Quick Reference

Chatbot Components

Workflow Components

Utility Components

Core Integration Pattern

'use client';
import { useChat } from '@ai-sdk/react';
import { Conversation, ConversationContent } from '@/components/ai-elements/conversation';
import { Message, MessageContent, MessageResponse } from '@/components/ai-elements/message';
import { Reasoning, ReasoningTrigger, ReasoningContent } from '@/components/ai-elements/reasoning';
import { Sources, SourcesTrigger, SourcesContent, Source } from '@/components/ai-elements/sources';

export function Chat() {
  const { messages, sendMessage, status } = useChat();

  return (
    <Conversation>
      <ConversationContent>
        {messages.map((message) => (
          <div key={message.id}>
            {message.parts.map((part, i) => {
              switch (part.type) {
                case 'text':
                  return (
                    <Message key={i} from={message.role}>
                      <MessageContent>
                        <MessageResponse>{part.text}</MessageResponse>
                      </MessageContent>
                    </Message>
                  );
                case 'reasoning':
                  return (
                    <Reasoning key={i} isStreaming={status === 'streaming'}>
                      <ReasoningTrigger />
                      <ReasoningContent>{part.text}</ReasoningContent>
                    </Reasoning>
                  );
                case 'source-url':
                  return <Source key={i} href={part.url} title={part.title} />;
              }
            })}
          </div>
        ))}
      </ConversationContent>
    </Conversation>
  );
}

API Route Pattern

// app/api/chat/route.ts
import { streamText, UIMessage, convertToModelMessages } from 'ai';

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages, model }: { messages: UIMessage[]; model: string } = await req.json();

  const result = streamText({
    model,
    messages: convertToModelMessages(messages),
    system: 'You are a helpful assistant.',
  });

  return result.toUIMessageStreamResponse({
    sendSources: true,
    sendReasoning: true,
  });
}

Key Patterns

Message Parts Switching

Messages have parts array. Switch on part.type:

• text - Regular text content
• reasoning - Model thinking/reasoning
• source-url - Citation with URL
• tool-* - Tool invocations (input, output, error)

Compound Components

Most components use compound pattern:

<Conversation>
  <ConversationContent>{/* messages */}</ConversationContent>
  <ConversationScrollButton />
</Conversation>

<Message from="assistant">
  <MessageContent>
    <MessageResponse>{text}</MessageResponse>
  </MessageContent>
  <MessageActions>
    <MessageAction label="Copy"><CopyIcon /></MessageAction>
  </MessageActions>
</Message>

File Attachments

<PromptInput globalDrop multiple>
  <PromptInputHeader>
    <PromptInputAttachments>
      {(attachment) => <PromptInputAttachment data={attachment} />}
    </PromptInputAttachments>
  </PromptInputHeader>
  <PromptInputBody>
    <PromptInputTextarea />
  </PromptInputBody>
  <PromptInputFooter>
    <PromptInputTools>
      <PromptInputActionMenu>
        <PromptInputActionMenuTrigger />
        <PromptInputActionMenuContent>
          <PromptInputActionAddAttachments />
        </PromptInputActionMenuContent>
      </PromptInputActionMenu>
    </PromptInputTools>
    <PromptInputSubmit status={status} />
  </PromptInputFooter>
</PromptInput>

References

• Chatbot Components - Conversation, Message, PromptInput, Reasoning, Sources, Tool, InlineCitation, Plan, Task, Queue
• Workflow Components - Canvas, Node, Edge, Controls
• Utility Components - CodeBlock, Loader, Shimmer, ModelSelector, OpenIn, WebPreview
• AI SDK Integration - useChat, API routes, message parts

Dependencies

Key dependencies used by AI Elements:

Package Manager

Always use bun, never npm:

• bun add (not npm install)
• bunx --bun (not npx)