Terminal for Vue

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 Vue. 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

<script setup lang="ts">
import { TerminalIcon } from "lucide-vue-next";
import {
  CodeBlock, CodeBlockContent,
} from "@/components/ui/code-block";
import {
  Trace, TraceCollapsible, TraceCollapsibleContent,
  TraceCollapsibleTrigger, TraceIcon, TraceLine, TraceTitle,
} from "@/components/ui/trace";
</script>

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="open ?? (running && output.length > 0)", and sets its state from @open-change. 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 "";
}

The messages come from Chat in @ai-sdk/vue, with the same parts.

Migrating from AI SDK Elements

AI SDK Elements is for React. In Vue, start from the demos above: a Trace line per command, over a Code Block that fills as the output streams, is all there is to Terminal.

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.