npx tool-agent "integrate the terminal component to show command-line output and logs"npx shadcn@latest add @tool-ui/terminalTerminal renders command output with ANSI colors, exit codes, and stderr separation preserved. Long output can be collapsed with maxCollapsedLines.
Role: Information. For displaying data without user input. See Design Guidelines for how component roles work.
Run this once from your project root.
npx tool-agent "integrate the terminal component to show command-line output and logs"npx shadcn@latest add @tool-ui/terminalRender Terminal in your UI with tool-compatible props.
import { Terminal } from "@/components/tool-ui/terminal";export function MyComponent() { return ( <Terminal id="my-terminal-example" command="ls -la" stdout={`total 16drwxr-xr-x 3 user user 4096 Dec 3 10:23 .drwxr-xr-x 12 user user 4096 Dec 3 10:20 ..-rw-r--r-- 1 user user 220 Dec 3 10:23 package.json`} exitCode={0} durationMs={45} cwd="~/project" /> );}Registration tells assistant-ui which component to render when a tool returns command output. Without it, tool results appear as raw JSON.
// Backend toolimport { tool, jsonSchema } from "ai";const showTerminal = tool({ description: "Show a command result", inputSchema: jsonSchema<{}>({ type: "object", properties: {}, additionalProperties: false, }), async execute() { return { id: "terminal-1", command: "pnpm test", cwd: "~/project", exitCode: 0, durationMs: 1288, stdout: "\u001b[32m✓\u001b[0m 42 tests passed", }; },});// Frontend with assistant-uiimport { type Toolkit } from "@assistant-ui/react";import { Terminal } from "@/components/tool-ui/terminal";import { safeParseSerializableTerminal } from "@/components/tool-ui/terminal/schema";export const toolkit: Toolkit = { showTerminal: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableTerminal(result); if (!parsed) { return null; } return <Terminal {...parsed} />; }, },};Renders colored output exactly as it appears in your shell
Green for success (0), red for any non-zero code
Badge showing how long the command took
Stderr rendered separately with distinct styling
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Use ToolUI.LocalActions to compose external actions next to Terminal.