Terminal is a shell command the agent runs, such as a lint, a test run or a build. The line shows the command, and its output streams in underneath while it runs.
Terminal is built with Trace with a TraceCollapsible for each command.
Installation
Terminal is built with the Trace and Code Block components.
Usage
<script setup lang="ts">
import { TerminalIcon } from '@lucide/vue'
import { CodeBlock, CodeBlockContent } from '@/components/ui/code-block'
import {
Trace,
TraceCollapsible,
TraceCollapsibleContent,
TraceCollapsibleTrigger,
TraceIcon,
TraceLine,
TraceTitle,
} from '@/components/ui/trace'
defineProps<{ output: string }>()
</script>
<template>
<Trace>
<TraceCollapsible>
<TraceCollapsibleTrigger>
<TraceLine>
<TraceIcon>
<TerminalIcon />
</TraceIcon>
<TraceTitle>Ran pnpm build</TraceTitle>
</TraceLine>
</TraceCollapsibleTrigger>
<TraceCollapsibleContent>
<CodeBlock size="sm">
<CodeBlockContent wrap class="max-h-64">
{{ output }}
</CodeBlockContent>
</CodeBlock>
</TraceCollapsibleContent>
</TraceCollapsible>
</Trace>
</template>Exit Code
A command that exits with any code other than 0 failed. Set status="error".
> acme-chat@0.1.0 lint
> eslint .
server/api/chat.post.ts
14:7 error 'model' is assigned a value but never used no-unused-vars
components/Chat.vue
42:5 error 'messages' is defined but never used vue/no-unused-vars
✖ 2 problems (2 errors, 0 warnings)
ELIFECYCLE Command failed with exit code 1.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. Leave it open or closed after that, as in Trace.
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 Elements Vue
If you added Terminal from AI Elements Vue, your project has a components/ai-elements/terminal/ folder. 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/ from AI Elements Vue to the shadcn-vue 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. Install the components: npx shadcn-vue@latest add trace code-block
2. Read https://www.shadcn-vue.com/docs/ai-elements/terminal and build Terminal the same way.
3. 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 the clear event.
- 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 class="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.
4. Remove the ANSI renderer from the dependencies if nothing else uses it.
5. Remove the imports the files no longer use.
6. Run vue-tsc and fix any errors.API Reference
See Trace.
