<Terminal
  command="pnpm test"
  stdout={`✓ src/utils.test.ts (5 tests) 23ms
✓ src/api.test.ts (12 tests) 156ms
✓ src/components.test.ts (8 tests) 89ms

Test Files  3 passed (3)
     Tests  25 passed (25)
  Start at  10:23:45
  Duration  312ms`}
  exitCode={0}
  durationMs={312}
  cwd="~/project"
/>

pnpm dlx shadcn@latest add button

pnpm add @radix-ui/react-collapsible

pnpm add ansi-to-react

import { Terminal } from "@/components/tool-ui/terminal";

export function MyComponent() {
  return (
    <Terminal
      id="my-terminal-example"
      command="ls -la"
      stdout={`total 16
drwxr-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"
    />
  );
}

// Backend tool
import { 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-ui
import { makeAssistantToolUI } from "@assistant-ui/react";
import {
  Terminal,
  TerminalErrorBoundary,
  parseSerializableTerminal,
} from "@/components/tool-ui/terminal";

function ParsedTerminal({ result }: { result: unknown }) {
  const props = parseSerializableTerminal(result);
  return <Terminal {...props} />;
}

export const ShowTerminalUI = makeAssistantToolUI({
  toolName: "showTerminal",
  render: ({ result }) => {
    // Tool outputs stream in; `result` will be `undefined` until the tool resolves.
    if (result === undefined) {
      return <Terminal id="loading" command="…" exitCode={0} isLoading />;
    }

    return (
      <TerminalErrorBoundary>
        <ParsedTerminal result={result} />
      </TerminalErrorBoundary>
    );
  },
});

import { Terminal } from "@/components/tool-ui/terminal";

const coloredOutput = "\x1b[32m✔\x1b[0m Success\n\x1b[31m✗\x1b[0m Error";

<Terminal
  id="my-terminal"
  command="npm test"
  stdout={coloredOutput}
  exitCode={0}
/>;