Ai Elements Chatbot

AI Elements Chatbot Components

Status: Production Ready ✅ | Last Verified: 2025-11-18

---

What Is AI Elements?

Production-ready chat UI components for AI applications:

• Built on shadcn/ui
• 30+ components (Message, Conversation, Response, etc.)
• Works with Vercel AI SDK v5
• Streaming support
• Tool/function call displays
• Reasoning visualization

---

Quick Start (15 Minutes)

Prerequisites

• Next.js 15+ (App Router)
• shadcn/ui initialized
• Tailwind v4
• AI SDK v5+

1. Initialize

pnpm dlx ai-elements@latest init

2. Add Components

pnpm dlx ai-elements@latest add message conversation response prompt-input

3. Create Chat Interface

'use client';

import { useChat } from 'ai/react';
import { Conversation } from '@/components/ui/ai/conversation';
import { Message } from '@/components/ui/ai/message';
import { Response } from '@/components/ui/ai/response';
import { PromptInput } from '@/components/ui/ai/prompt-input';

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat'
  });

  return (
    
      
        {messages.map((msg) => (
          
            
          
        ))}
      

      
    
  );
}

Load references/setup-guide.md for complete setup.

---

Core Components

Message & Conversation

import { Conversation } from '@/components/ui/ai/conversation';
import { Message } from '@/components/ui/ai/message';

  {messages.map((msg) => (
    
      {msg.content}
    
  ))}

Response (Markdown)

import { Response } from '@/components/ui/ai/response';

PromptInput

import { PromptInput } from '@/components/ui/ai/prompt-input';

CodeBlock

import { CodeBlock } from '@/components/ui/ai/code-block';

Reasoning (Thinking)

import { Reasoning } from '@/components/ui/ai/reasoning';

Tool (Function Calls)

import { Tool } from '@/components/ui/ai/tool';

---

Critical Rules

Always Do ✅

1. Install shadcn/ui first (AI Elements requires it)
2. Use Next.js App Router (Pages Router not supported)
3. Use AI SDK v5 (breaking changes from v4)
4. Install via CLI (pnpm dlx ai-elements@latest)
5. Update components.json with registry
6. Use client components ('use client' directive)
7. Stream responses for better UX
8. Handle loading states
9. Add error boundaries
10. Test on mobile

Never Do ❌

1. Never install as npm package (components are copied)
2. Never use Pages Router (only App Router)
3. Never use AI SDK v4 (breaking changes)
4. Never skip prerequisites (shadcn/ui, Tailwind)
5. Never modify core types (extends shadcn types)
6. Never use without streaming (defeats purpose)
7. Never skip accessibility (ARIA labels)
8. Never hardcode styles (use Tailwind)
9. Never skip error handling (API failures)
10. Never ignore mobile (responsive required)

---

Available Components (30+)

Core:

• Message
• Conversation
• Response
• PromptInput

Content:

• CodeBlock
• Markdown
• Tool
• Reasoning
• Sources

Actions:

• Actions
• CopyButton
• ShareButton
• RegenerateButton

Advanced:

• BranchNavigation
• ThinkingDisplay
• WebPreview

---

Common Use Cases

Use Case 1: Basic Chat

const { messages, input, handleInputChange, handleSubmit } = useChat();

return (
  <>
    
      {messages.map(m => (
        
          
        
      ))}
    
    
  
);

Use Case 2: With Tool Calls

{messages.map(m => (
  
    {m.toolInvocations?.map(tool => (
      
    ))}
    
  
))}

Use Case 3: With Reasoning

  {reasoning && }
  

Use Case 4: With Code Blocks

  {(node) => node.type === 'code' ? (
    
  ) : null}

Use Case 5: With Sources

---

API Routes

Basic Streaming

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4'),
    messages
  });

  return result.toDataStreamResponse();
}

With Tools

const result = streamText({
  model: openai('gpt-4'),
  messages,
  tools: {
    search: {
      description: 'Search the web',
      parameters: z.object({ query: z.string() }),
      execute: async ({ query }) => {
        return await search(query);
      }
    }
  }
});

---

When to Use AI Elements

Use when:

• Building ChatGPT-style interface
• Need production-ready components
• Using Vercel AI SDK
• Want streaming responses
• Need tool/function displays
• Want reasoning visualization

Don't use when:

• Not using Next.js App Router
• Don't have shadcn/ui
• Need Pages Router
• Building custom design system

---

Resources

References (references/):

• component-catalog.md - All 8 AI Elements components with examples
• example-reference.md - Complete integration examples and patterns
• setup-guide.md - Step-by-step setup with Next.js 15 and shadcn/ui

Templates (templates/):

• Component examples available in reference files

---

Official Documentation

• AI Elements: https://ai-elements.vercel.app
• Components: https://ai-elements.vercel.app/docs/components
• Examples: https://github.com/ai-elements/ai-elements/tree/main/examples

---

Questions? Issues?

1. Check references/setup-guide.md for complete setup
2. Verify prerequisites (Next.js 15+, shadcn/ui, AI SDK v5)
3. See official examples

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: secondsky
• Source: secondsky/claude-skills
• License: MIT

Install and usage instructions live in the source repository linked above.