AiCodeRunner WebContainer Runner

The AiCodeRunner component encapsulates @webcontainer/api, providing a powerful sandbox for running a Node.js environment directly in the browser. It is typically used for real-time previews of AI-generated code, logic validation, and interactive tutorials.

Basic Usage

Pass a code string to execute it in the terminal. The component automatically handles the initialization of the WebContainer.

Auto Run

Set autorun to true to automatically re-execute whenever the code changes.

API

Props

Property	Description	Type	Default
code	Code string to execute	string	''
language	Programming language, determines the runtime command. Supports: javascript/js (node), typescript/ts (npx tsx), python/py (python3), ruby, php, deno	string	'javascript'
height	Height of the terminal display area	string | number	200
autorun	Whether to execute automatically when code changes	boolean	false
themeOverrides	Theme override variables	ComponentThemeVars	undefined

Events

Event Name	Description	Parameters
run	Triggered when code execution starts	(code: string) => void
stop	Triggered when execution is manually stopped	() => void
output	Triggered when there is new terminal output	(data: string) => void
error	Triggered when an error occurs during execution	(error: string) => void
ready	Triggered when the WebContainer environment is ready	(instance: WebContainer) => void

Methods

Method Name	Description	Parameters
run	Manually trigger code execution	() => void
stop	Stop the currently running process	() => void
reset	Reset the WebContainer instance	() => void
clear	Clear the terminal output	() => void

Environment Requirements

WebContainer relies on SharedArrayBuffer. Ensure your server is configured with the necessary security headers (Cross-Origin Isolation):

1. Cross-Origin-Opener-Policy: same-origin
2. Cross-Origin-Embedder-Policy: require-corp