Terminal for React

A shell command the agent runs shows up as one line, a lint, a test run, a build, and its output streams in underneath while it runs.

Use it when the output arrives line by line and the reader wants to watch it. The line is a Trace line that opens on a Code Block, so there is no Terminal component to install in React. Open the line once the first output arrives, say the exit in the title, "pnpm lint exited with code 1", and don't put buttons inside the line: a copy or clear button sits next to it, since the line itself is the button that opens it.

Installation

Terminal is a pattern. The command adds the parts it's built from, Trace and Code Block, and the code to copy is the demo's.

Anatomy

Trace
└── TraceCollapsible (one per command)
    ├── TraceCollapsibleTrigger
    │   └── TraceLine (status from the exit code)
    │       ├── TraceIcon
    │       └── TraceTitle (the command)
    └── TraceCollapsibleContent
        └── CodeBlock (size="sm")
            └── CodeBlockContent (wrap, the output)

Usage

import { TerminalIcon } from "lucide-react";
import {
  CodeBlock, CodeBlockContent,
} from "@/components/ui/code-block";
import {
  Trace, TraceCollapsible, TraceCollapsibleContent,
  TraceCollapsibleTrigger, TraceIcon, TraceLine, TraceTitle,
} from "@/components/ui/trace";

export function TerminalCommand(props: { output: string }) {
  return (
    <Trace>
      <TraceCollapsible>
        <TraceCollapsibleTrigger>
          <TraceLine>
            <TraceIcon>
              <TerminalIcon aria-hidden="true" />
            </TraceIcon>
            <TraceTitle>Ran pnpm build</TraceTitle>
          </TraceLine>
        </TraceCollapsibleTrigger>
        <TraceCollapsibleContent>
          <CodeBlock size="sm">
            <CodeBlockContent className="max-h-64" wrap>
              {props.output}
            </CodeBlockContent>
          </CodeBlock>
        </TraceCollapsibleContent>
      </TraceCollapsible>
    </Trace>
  );
}

Demos

Exit Code

An install that ran and a lint that exited with code 1, open on its errors. A command that exits with any code other than 0 failed: set status="error" and say the code in the title.

The command is a tool call, so its states map the same way as in Tool.

Open While Running

Open the line once the first output arrives, so the output is visible while the command runs, and let it close when the command exits. Hold the open state as undefined until the reader opens or closes the line; after that, their choice wins, as in Trace. The demo passes open ?? (running && output.length > 0), and sets its state from onOpenChange. CodeBlockContent with wrap and a max-h-64 keeps a long run inside the line, scrolling, so the transcript below it doesn't jump with each line.

AI SDK

A tool result arrives only once the command exits. To stream the output while it runs, write it from the tool as a data part with the tool call's id. The AI SDK replaces a data part that has the same id, so the output grows in place.

writer.write({
  type: "data-terminal",
  id: toolCallId,
  data: { output },
});

On the client, find the data part that matches each tool part.

function getOutput(message: ChatMessage, toolCallId: string) {
  for (const part of message.parts) {
    if (part.type === "data-terminal" && part.id === toolCallId) {
      return part.data.output;
    }
  }

  return "";
}

Migrating from AI SDK Elements

If you added Terminal from AI SDK Elements (opens in a new tab), your project has a components/ai-elements/terminal.tsx wrapper. Paste this prompt into your coding agent to rebuild it on Trace and Code Block. Every export keeps its name and props, so the code that uses it keeps working.

Migrate components/ai-elements/terminal.tsx from AI SDK Elements to the shadcn.io Trace and Code Block components.

Keep every export, with the same name and props, so the code that imports it keeps working. Only change how each part renders.

1. Read https://kit.dev/ui/terminal.md and build Terminal the same way. If the project hasn't got Trace and Code Block, run the command in its Installation section.
2. Rebuild each part:
   - Import CodeBlock and CodeBlockContent from @/components/ui/code-block, not from ./code-block.
   - Terminal renders a Trace with a TraceCollapsible. Keep output, isStreaming, autoScroll and onClear.
   - TerminalHeader renders a TraceCollapsibleTrigger with a TraceLine. Set status="running" while isStreaming is true.
   - TerminalTitle renders a TraceIcon with a TerminalIcon and a TraceTitle, like "Ran pnpm build".
   - TerminalContent renders a TraceCollapsibleContent with a CodeBlock with size="sm", and a CodeBlockContent with wrap and className="max-h-64" for the output.
   - Open the line once output arrives while the command runs.
   - Buttons cannot sit inside a trigger. Render TerminalStatus, TerminalActions and the copy and clear buttons next to the TraceCollapsibleTrigger, not inside it.
3. Remove ansi-to-react from the dependencies if nothing else uses it.
4. Remove the imports the file no longer uses.
5. Run the type checker and fix any errors.

FAQ

API Reference

Terminal has no props of its own. Each command is a Trace collapsible, and its output a Code Block with size="sm" and CodeBlockContent's wrap.