126k
New

October 2026 - Trace, Code Block and AI Elements

Two new components for the steps an agent takes and the code it writes, and AI Elements, patterns for agentic interfaces built from shadcn/ui components.

Today, we are releasing two new components, Trace and Code Block, and AI Elements, a set of patterns for agentic interfaces built from shadcn/ui components.

Trace and Code Block are available for Base UI, React Aria and Radix across all eight styles.

Trace

Trace is a list of lines for the steps an agent takes. We built it by studying hundreds of components from agentic interfaces and distilling what they share into one composition you can reuse.

Why does pnpm install fail in CI?
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

The last commit bumped a version in package.json without updating pnpm-lock.yaml, so the frozen install fails. Run pnpm install locally and commit the lockfile.

"use client"

import * as React from "react"

Reasoning, tool calls, sources, plans and subagent runs all have the same shape: something the agent did, and what happened. In Trace, each one is a line with an icon, a title, and an optional description and status. A line can expand to show more detail, link to a page, or open a dialog or sheet, so every step looks and behaves the same in your interface.

  • running, error and pending states, with a shimmer while a step runs.
  • Lines that expand, link out, or open a dialog, sheet, drawer or popover.
  • Nested lines, so a summary expands into steps and a step into its output.
  • Works with the reasoning, tool and source parts from the AI SDK.
  • Keyboard and screen reader support from the trigger that wraps each line.
pnpm dlx shadcn@latest add trace

Code Block

CodeBlock displays code, terminal output, logs and diffs. It has a header with a title and actions, line numbers, wrapping, diff and highlighted lines, and a small size for tool output in a Trace.

app/api/chat/route.ts
import { streamText } from "ai"
export async function POST(request: Request) {  const { messages } = await request.json()
  const result = streamText({    model: "anthropic/claude-sonnet-4.5",    system: "You are a helpful assistant. Answer in one short paragraph.",    messages,  })
  return result.toUIMessageStreamResponse()}
"use client"

import * as React from "react"
pnpm dlx shadcn@latest add code-block

Building agentic interfaces

Trace and Code Block join the components for chat interfaces we released in June. Together, they cover every part of an agentic interface:

  • Message Scroller holds the thread. It anchors each turn, follows the reply while it streams and loads history without jumping.
  • Message is one turn, with an avatar, a header and a footer for actions.
  • Bubble holds what the person sends.
  • Trace shows the steps the agent takes inside a turn.
  • Code Block shows the code, commands and output those steps produce.
  • Marker adds notes and dividers between turns.
  • Attachment shows the files that come with a message.
  • Questionnaire asks the person to clarify before the agent continues.

AI Elements

AI Elements are patterns for agentic interfaces built from these components. There is no package to install. Each pattern is a composition you copy into your project, and the code is yours.

New Thread
Ask the agent to change your code.
What should we build?
The agent can read your code, run commands and make changes. Press send to start.
"use client"

import * as React from "react"

There are 21 patterns, from Chat and Prompt Input to Reasoning, Tool, Plan and Subagent. Each page shows how to render the pattern from AI SDK message parts.

Every page is also available as Markdown, so you can point your coding agent at it:

Prompt
Add the Reasoning pattern from https://ui.shadcn.com/docs/ai-elements/base/reasoning.md to my chat.

Migrating from AI SDK Elements

AI Elements replaces AI SDK Elements, and we are going to deprecate AI SDK Elements.

You do not need to migrate right away. The components you installed from AI SDK Elements were copied into your project, so they keep working.

When you are ready, each pattern page has a migration prompt. Paste it into your coding agent, and it rebuilds the wrapper in components/ai-elements on Trace, Code Block and the other shadcn/ui components. Every export keeps its name and props, so the code that uses it does not change.

See Migrating from AI SDK Elements for the element that replaces each file, and for the elements we did not rebuild. If you still need one of those, open an issue and we will help you build it.

Read the Docs