AI / Agent components

Ten purpose-built components for the agent era — chat threads, reasoning traces, tool calls, source citations, and agent cards. Designed to slot into the Vercel AI SDK, the AI Elements library, and any custom agent runtime.

Live chat demo

A full chat mockup combining Message, Reasoning, Tool, Sources, and PromptInput in a single conversation.

What's the weather in Berlin and what should I pack?

Thought for 600ms

I'll check the current weather, then look up what travelers usually pack for that climate this time of year.

{ "city": "Berlin", "temp_c": 18, "condition": "Partly cloudy", "humidity": 64 }

Berlin is currently 18°C and partly cloudy with light winds. Pack a light jacket, comfortable walking shoes, and an umbrella for the evening.

Sources

Open-MeteoFree weather API for non-commercial use Visit BerlinOfficial tourism site

And a good dinner spot?

Message

User vs assistant messages

Hello, JSN.

Hi there! How can I help today?

System note: tokens remaining 8,192

<Message role="user">
  <MessageAvatar role="user">
    <Avatar><AvatarFallback>You</AvatarFallback></Avatar>
  </MessageAvatar>
  <MessageContent>Hello, JSN.</MessageContent>
</Message>

Reasoning

Collapsible reasoning trace

Reasoning

Step 1: parse the user's question. Step 2: look up the relevant docs. Step 3: synthesize a final answer.

<Reasoning durationMs={800}>
  <ReasoningTrigger />
  <ReasoningContent>...</ReasoningContent>
</Reasoning>

Tool

Collapsible tool call with output

3 results in 0.42s

<Tool>
  <ToolHeader>
    <ToolName name="search_docs" />
  </ToolHeader>
  <ToolOutput output="3 results in 0.42s" />
</Tool>

Sources

Citation list

Sources

React docsOfficial React reference Next.js docsOfficial Next.js reference

<Sources items={[
  { title: "React docs", url: "https://react.dev" },
  { title: "Next.js docs", url: "https://nextjs.org/docs" },
]} />

Agent Card

Status-coded agent tiles

Research Agent

Running

Looks up sources and synthesizes answers.

Code Agent

Done

Edits files and runs tests.

Vision Agent

Error

Reads images and answers questions.

Browse Agent

Idle

Navigates the open web.

<AgentCard
  name="Research Agent"
  description="..."
  status="running"
/>

Code Block

TypeScript with syntax highlighting

TypeScript

import { Button } from "@/components/ui/button";

export function Hello() {
  return <Button>Click me</Button>;
}

<CodeBlock language="ts" code={...} />

Artifact

Preview panel with close button

Generated landing copy

Headline: Ship AI-powered products in days, not months.

<Artifact>
  <ArtifactHeader title="Generated copy" />
  <ArtifactContent>...</ArtifactContent>
</Artifact>

Loaders

Three built-in loader styles

<Loader><LoaderDots /></Loader>
<Loader><LoaderSpinner /></Loader>
<Loader><LoaderBars /></Loader>

Prompt Input

Full input with tools and submit

<PromptInput>
  <PromptInputTools>
    <PromptInputActionMenu />
  </PromptInputTools>
  <PromptInputTextarea placeholder="..." />
  <PromptInputSubmit />
</PromptInput>