Sandbox Run for Radix UI

An agent's code run shows up as a card: a header line with what ran and a badge, Running, Completed or Error, over tabs for the code, what it printed and the files it wrote.

Use it for a code interpreter's call, where the agent writes a script, runs it in a sandbox and answers from the result. The header is the button that folds the run, so a long one can be put away once it's done; the code tab holds a Code Block, the other tabs whatever the run made. It shows a run and doesn't run anything: to let people edit and run the code, use Sandbox.

Installation

Anatomy

SandboxRun
├── SandboxRunHeader (title, state)
└── SandboxRunContent
    └── SandboxRunTabs
        ├── SandboxRunTabsBar
        │   └── SandboxRunTabsList
        │       └── SandboxRunTabsTrigger (one per tab)
        └── SandboxRunTabContent (one per tab)

Usage

import {
  SandboxRun, SandboxRunContent, SandboxRunHeader, SandboxRunTabContent,
  SandboxRunTabs, SandboxRunTabsBar, SandboxRunTabsList,
  SandboxRunTabsTrigger,
} from "@/components/ui/sandbox-run";

<SandboxRun>
  <SandboxRunHeader state="completed" title="Code execution" />
  <SandboxRunContent>
    <SandboxRunTabs defaultValue="code">
      <SandboxRunTabsBar>
        <SandboxRunTabsList>
          <SandboxRunTabsTrigger value="code">Code</SandboxRunTabsTrigger>
          <SandboxRunTabsTrigger value="console">Console</SandboxRunTabsTrigger>
        </SandboxRunTabsList>
      </SandboxRunTabsBar>
      <SandboxRunTabContent value="code">
        <pre className="p-3 font-mono text-xs">console.log(fibonacci(10));</pre>
      </SandboxRunTabContent>
      <SandboxRunTabContent value="console">
        <pre className="p-3 font-mono text-xs">55</pre>
      </SandboxRunTabContent>
    </SandboxRunTabs>
  </SandboxRunContent>
</SandboxRun>

Demos

States

Three runs, closed, one per state: running pulses a dot in a blue badge, completed checks in green and error crosses in red. Each opens on its console, the error's in a destructive Code Block with the traceback. Close a run once it's done when the reply below it matters more, and leave a failed one where the reader can open it.

Set defaultOpen={false} on SandboxRun to start closed: it starts open.

Files

Four tabs for one Python run: the code, its output as a table, the console and the files it wrote, with a copy button for the code at the end of SandboxRunTabsBar. Show the tab that answers the question first, here the output, and leave out a tab the run has nothing for: an empty Files tab is a click for nothing.

Streaming

Run again prints the console a line at a time, with state at running until the last line and completed after. Stream into the console tab as the sandbox reports, and switch the state only when the run ends, so the badge doesn't say Completed over a console that's still filling.

AI SDK

A code run is a tool call, runCode in this example, and SandboxRunHeader takes the tool part's state as it is: the badge reads it the way the table below says. Its input has the code, its output what the run printed.

{message.parts.map((part) =>
  part.type === "tool-runCode" ? (
    <SandboxRun key={part.toolCallId}>
      <SandboxRunHeader state={part.state} title={part.input?.filename} />
      <SandboxRunContent>{/* the tabs, from part.input and part.output */}</SandboxRunContent>
    </SandboxRun>
  ) : null
)}

Migrating from AI SDK Elements

If you added Sandbox from AI SDK Elements (opens in a new tab), your project has a components/ai-elements/sandbox.tsx. Here its parts are Sandbox Run's, because Sandbox is the editor that runs code in the page. Run the command in the Installation section, then import from @/components/ui/sandbox-run and rename each part: Sandbox is SandboxRun, SandboxHeader is SandboxRunHeader, SandboxContent is SandboxRunContent, SandboxTabs is SandboxRunTabs, SandboxTabsBar is SandboxRunTabsBar, SandboxTabsList is SandboxRunTabsList, SandboxTabsTrigger is SandboxRunTabsTrigger and SandboxTabContent is SandboxRunTabContent. To leave your JSX as it is, import them under the old names: import { SandboxRun as Sandbox, … }.

The props stay: title and state on the header, which takes a tool part's state as before, and value and defaultValue on the tabs. onValueChange on SandboxRunTabs gets the tab's value.

FAQ

API Reference