npx ai-elements@latest add message          # MessageResponse for markdown rendering
npx ai-elements@latest add conversation     # Full chat UI (if building a chat app)

import { MessageResponse } from "@/components/ai-elements/message";

// Workflow event with markdown content
<MessageResponse>{event.briefing}</MessageResponse>

// Any AI-generated string
<MessageResponse>{generatedReport}</MessageResponse>

// Streaming text from getWritable events
<MessageResponse>{narrativeText}</MessageResponse>

undefined

**Never install all.json** — it pulls in 48 components including ones with `@base-ui/react` dependencies that may conflict with your shadcn version.

Components are installed into `src/components/ai-elements/` by default.

'use client'
import { useChat } from '@ai-sdk/react'
import { DefaultChatTransport } from 'ai'
import { Conversation } from '@/components/ai-elements/conversation'
import { Message } from '@/components/ai-elements/message'

export function Chat() {
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({ api: '/api/chat' }),
  })

  return (
    <Conversation>
      {messages.map((message) => (
        <Message key={message.id} message={message} />
      ))}
    </Conversation>
  )
}

import { MessageMarkdown } from '@/components/ai-elements/message'

// Inside a custom message renderer
<MessageMarkdown content={part.text} />

import { Tool } from '@/components/ai-elements/tool'

// Renders tool name, input parameters, output, and loading state
<Tool toolInvocation={toolPart} />

import { Reasoning } from '@/components/ai-elements/reasoning'

<Reasoning content={reasoningText} />

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

<CodeBlock language="typescript" code={codeString} />

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

<PromptInput
  onSubmit={(text) => sendMessage({ text })}
  isLoading={status === 'streaming'}
  placeholder="Ask anything..."
/>

undefined

undefined

import { Persona } from '@/components/ai-elements/persona'

<Persona state="listening" variant="orb" />

import { SpeechInput } from '@/components/ai-elements/speech-input'

<SpeechInput onTranscript={(text) => sendMessage({ text })} />

import { Transcription } from '@/components/ai-elements/transcription'

<Transcription segments={segments} currentTime={playbackTime} onSeek={setTime} />

import { AudioPlayer } from '@/components/ai-elements/audio-player'   // media-chrome based, composable controls
import { MicSelector } from '@/components/ai-elements/mic-selector'     // device picker with auto-detection
import { VoiceSelector } from '@/components/ai-elements/voice-selector' // searchable voice list with metadata

undefined

undefined

import { Terminal } from '@/components/ai-elements/terminal'          // ANSI color support, auto-scroll
import { FileTree } from '@/components/ai-elements/file-tree'         // expandable folder hierarchy
import { StackTrace } from '@/components/ai-elements/stack-trace'     // clickable paths, collapsible frames
import { TestResults } from '@/components/ai-elements/test-results'   // suite stats + error details
import { Sandbox } from '@/components/ai-elements/sandbox'            // code + execution output, tabbed view
import { Snippet } from '@/components/ai-elements/snippet'            // lightweight terminal commands with copy
import { Commit } from '@/components/ai-elements/commit'              // git commit metadata display
import { EnvironmentVariables } from '@/components/ai-elements/environment-variables' // masked env vars
import { PackageInfo } from '@/components/ai-elements/package-info'   // dependency versions + badges
import { SchemaDisplay } from '@/components/ai-elements/schema-display' // REST API visualization

// The Message component handles all part types:
// - type: "text" → renders as markdown
// - type: "tool-*" → renders tool call UI with status
// - type: "reasoning" → renders collapsible reasoning
// - type: "image" → renders image
// No manual part.type checking needed!

{messages.map((message) => (
  <Message key={message.id} message={message} />
))}

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

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

  const result = streamText({
    model: gateway('anthropic/claude-sonnet-4.6'),
    messages: modelMessages,
  })

  return result.toUIMessageStreamResponse()
}

// Customize the Message component for your app
import { Message as BaseMessage } from '@/components/ai-elements/message'

function CustomMessage({ message }) {
  // Add custom tool result rendering
  return (
    <BaseMessage
      message={message}
      renderTool={(toolPart) => <MyCustomToolCard tool={toolPart} />}
    />
  )
}