184 Components
AI Code Execution Sandbox
CardsInteractive code execution terminal for AI-generated code with Code and Console Output tabs, real-time stdout streaming, execution time telemetry, and run/copy controls.
Exit 0 (138ms)
1async function computeFibonacci(n: number): Promise<number> {
2 const dp: number[] = [0, 1];
3 for (let i = 2; i <= n; i++) {
4 dp[i] = dp[i - 1] + dp[i - 2];
5 }
6 return dp[n];
7}
8
9console.log("Fibonacci(40):", await computeFibonacci(40));
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/ai-code-execution-sandbox.json"
Props
TypeScript props supported by <AICodeExecutionSandbox />.
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | — | Source code to display in the Code tab. |
| language | string | "typescript" | Programming language identifier. |
| output | string[] | — | Array of output terminal stream lines. |
| executionTimeMs | number | 142 | Reported execution duration in milliseconds. |
| onRun | () => void | — | Callback invoked when user presses Run Code. |
Key Features
- Dual-tab interface: Code editor view with line numbers and Console Output.
- Animated line-by-line typewriter output streaming on execution.
- Real-time execution telemetry badge (e.g. 'Exit 0 (142ms)').
- One-click source code copy to clipboard.
- Architectural dark monochrome aesthetics with zero heavy dependencies.
Keyboard & Accessibility
- Tabs accessible with keyboard navigation.
- Monospace font sizing with WCAG compliant text contrast.