diff --git a/docs/template/examples/claude-code.mdx b/docs/template/examples/claude-code.mdx index efb97ffc..03174d22 100644 --- a/docs/template/examples/claude-code.mdx +++ b/docs/template/examples/claude-code.mdx @@ -3,6 +3,11 @@ title: "Claude Code" description: "Claude Code Agent available in a sandbox" --- +Run Claude Code in a sandbox to execute AI-generated code safely. + +## Install Claude Code + +Set up Node.js with Claude Code and the tools it needs: curl for fetching, git for repos, and ripgrep for fast code search. @@ -33,6 +38,9 @@ template = ( +## Build and publish + +Build the template. Claude Code itself is lightweight, so minimal resources work fine. @@ -41,7 +49,7 @@ template = ( import { Template, defaultBuildLogger } from 'e2b' import { template as claudeCodeTemplate } from './template' -Template.build(claudeCodeTemplate, 'claude-code', { +await Template.build(claudeCodeTemplate, 'claude-code', { cpuCount: 1, memoryMB: 1024, onBuildLogs: defaultBuildLogger(), @@ -62,59 +70,47 @@ Template.build(claudeCodeTemplate, 'claude-code', +## Run AI prompts + +Create a sandbox with your Anthropic API key and pipe prompts to Claude. It can write files, run commands, and build whatever you describe. Get your API key from the [Anthropic Console](https://console.anthropic.com/). + +The `-p` flag runs Claude in non-interactive pipe mode. The `--dangerously-skip-permissions` flag allows Claude to execute file and command operations without confirmation prompts—this is safe since the sandbox is isolated. Setting `timeout=0` disables the command timeout, letting Claude run as long as needed. + ```typescript JavaScript & TypeScript -// sandbox.ts import { Sandbox } from 'e2b' -const sbx = await Sandbox.create('claude-code', { +const sandbox = await Sandbox.create('claude-code', { + timeoutMs: 60_000, envs: { ANTHROPIC_API_KEY: '', }, }) -console.log('Sandbox created', sbx.sandboxId) - -// Print help for Claude Code -// const result = await sbx.commands.run('claude --help') -// console.log(result.stdout) - -// Run a prompt with Claude Code -const result = await sbx.commands.run( +const result = await sandbox.commands.run( `echo 'Create a hello world index.html' | claude -p --dangerously-skip-permissions`, { timeoutMs: 0 } ) - console.log(result.stdout) - -sbx.kill() ``` ```python Python -# sandbox.py from e2b import Sandbox -sbx = Sandbox( +sandbox = Sandbox.create( 'claude-code', + timeout=60, envs={ 'ANTHROPIC_API_KEY': '', }, ) -print("Sandbox created", sbx.sandbox_id) - -# Print help for Claude Code -# result = sbx.commands.run('claude --help') -# print(result.stdout) -# Run a prompt with Claude Code -result = sbx.commands.run( +result = sandbox.commands.run( "echo 'Create a hello world index.html' | claude -p --dangerously-skip-permissions", timeout=0, ) print(result.stdout) - -sbx.kill() ``` diff --git a/docs/template/examples/desktop.mdx b/docs/template/examples/desktop.mdx index 2be2e915..703e751f 100644 --- a/docs/template/examples/desktop.mdx +++ b/docs/template/examples/desktop.mdx @@ -3,6 +3,11 @@ title: "Desktop" description: "Sandbox with Ubuntu Desktop and VNC access" --- +Ubuntu Desktop with XFCE, accessible via [noVNC](https://novnc.com/) on port 6080. noVNC provides browser-based access to the desktop through VNC over WebSocket—you can view and interact with the desktop directly in your browser without installing a VNC client. + +## Set up the desktop environment + +Install XFCE with all the essentials: file manager, text editor, LibreOffice, and more. noVNC provides browser-based access without a native VNC client. @@ -48,7 +53,7 @@ export const template = Template() 'apt-get clean', 'rm -rf /var/lib/apt/lists/*', ]) - // Streaming server setup + // noVNC and websockify for browser-based VNC access .runCmd([ 'git clone --branch e2b-desktop https://github.com/e2b-dev/noVNC.git /opt/noVNC', 'ln -s /opt/noVNC/vnc.html /opt/noVNC/index.html', @@ -109,7 +114,7 @@ template = ( "rm -rf /var/lib/apt/lists/*", ] ) - # Setup NoVNC and websockify + # noVNC and websockify for browser-based VNC access .run_cmd( [ "git clone --branch e2b-desktop https://github.com/e2b-dev/noVNC.git /opt/noVNC", @@ -131,6 +136,7 @@ template = ( +The startup script initializes the display server, desktop environment, and VNC stack. It starts Xvfb (a virtual framebuffer), launches the XFCE session, runs x11vnc to share the display, and starts noVNC to bridge VNC to WebSocket for browser access. ```bash start_command.sh #!/bin/bash @@ -156,6 +162,9 @@ cd /opt/noVNC/utils && ./novnc_proxy --vnc localhost:5900 --listen 6080 --web /o sleep 2 ``` +## Build and publish + +Build the template. The desktop environment needs 8 CPUs and 8GB RAM for smooth rendering, window compositing, and running desktop applications like LibreOffice. @@ -184,3 +193,29 @@ Template.build(desktopTemplate, 'desktop', ``` + +## Connect to the desktop + +Create a sandbox and open the URL in your browser. You'll see a full Ubuntu desktop running in your sandbox. + + + +```typescript JavaScript & TypeScript +import { Sandbox } from 'e2b' + +const sandbox = await Sandbox.create('desktop', { timeoutMs: 60_000 }) + +const url = sandbox.getHost(6080) +console.log('Desktop available at:', url) +``` + +```python Python +from e2b import Sandbox + +sandbox = Sandbox.create('desktop', timeout=60) + +url = sandbox.get_host(6080) +print('Desktop available at:', url) +``` + + diff --git a/docs/template/examples/expo.mdx b/docs/template/examples/expo.mdx index c60b6314..29908cc9 100644 --- a/docs/template/examples/expo.mdx +++ b/docs/template/examples/expo.mdx @@ -3,24 +3,25 @@ title: "Expo App" description: "Expo web app running in the sandbox using Node.js" --- -Basic Expo app. +[Expo](https://expo.dev/) app with the dev server running on port 8081. Expo is a React Native framework that simplifies mobile and web app development. - - The development server runs on port 8081 as soon as the sandbox is ready. - +## Create the Expo project + +Scaffold a fresh Expo app. The dev server starts automatically when the sandbox boots. ```typescript JavaScript & TypeScript // template.ts -import { defaultBuildLogger, waitForURL } from "e2b"; +import { Template, waitForURL } from 'e2b' export const template = Template() .fromNodeImage() - .setWorkdir("/home/user/expo-app") - .runCmd("npx create-expo-app@latest . --yes") - .runCmd("mv /home/user/expo-app/* /home/user/ && rm -rf /home/user/expo-app") - .setWorkdir("/home/user") - .setStartCmd("npx expo start", waitForURL("http://localhost:8081")); + .setWorkdir('/home/user/expo-app') + .runCmd('npx create-expo-app@latest . --yes') + // Move project files to /home/user for a cleaner working directory + .runCmd('mv /home/user/expo-app/* /home/user/ && rm -rf /home/user/expo-app') + .setWorkdir('/home/user') + .setStartCmd('npx expo start', waitForURL('http://localhost:8081')) ``` ```python Python @@ -32,6 +33,7 @@ template = ( .from_node_image() .set_workdir("/home/user/expo-app") .run_cmd("npx create-expo-app@latest . --yes") + # Move project files to /home/user for a cleaner working directory .run_cmd("mv /home/user/expo-app/* /home/user/ && rm -rf /home/user/expo-app") .set_workdir("/home/user") .set_start_cmd("npx expo start", wait_for_url('http://localhost:8081')) @@ -39,13 +41,17 @@ template = ( ``` +## Build and publish + +Build the template with enough memory for the Expo bundler. + ```typescript JavaScript & TypeScript // build.ts import { Template, defaultBuildLogger } from 'e2b' import { template as expoTemplate } from './template' -Template.build(expoTemplate, 'expo-app', { +await Template.build(expoTemplate, 'expo-app', { cpuCount: 4, memoryMB: 8192, onBuildLogs: defaultBuildLogger(), @@ -64,3 +70,27 @@ Template.build(expoTemplate, 'expo-app', ) ``` + +## Access the dev server + +Create a sandbox and get the URL. Open it in your browser to see the Expo web preview on port 8081. + + +```typescript JavaScript & TypeScript +import { Sandbox } from 'e2b' + +const sandbox = await Sandbox.create('expo-app', { timeoutMs: 60_000 }) + +const url = sandbox.getHost(8081) +console.log('Expo app running at:', url) +``` + +```python Python +from e2b import Sandbox + +sandbox = Sandbox.create('expo-app', timeout=60) + +url = sandbox.get_host(8081) +print('Expo app running at:', url) +``` + diff --git a/docs/template/examples/nextjs-bun.mdx b/docs/template/examples/nextjs-bun.mdx index 36ea65a8..4e62f445 100644 --- a/docs/template/examples/nextjs-bun.mdx +++ b/docs/template/examples/nextjs-bun.mdx @@ -3,12 +3,16 @@ title: "Next.js App (Bun)" description: "Next.js web app running in the sandbox using Bun" --- -Basic Next.js app with Tailwind and shadcn UI using Bun. +Next.js app with Tailwind and [shadcn/ui](https://ui.shadcn.com/) using [Bun](https://bun.sh/), a fast JavaScript runtime and package manager. The dev server starts automatically on port 3000. - The development server runs on port 3000 as soon as the sandbox is ready. +For an npm-based version, see [Next.js App](/docs/template/examples/nextjs). +## Set up Next.js with Bun + +Use Bun for faster installs and hot reloads. This template includes TypeScript, Tailwind, and all shadcn components. + ```typescript JavaScript & TypeScript // template.ts @@ -47,13 +51,17 @@ template = ( ``` +## Build and publish + +Build the template. Bun makes the initial setup noticeably faster than npm. + ```typescript JavaScript & TypeScript // build.ts import { Template, defaultBuildLogger } from 'e2b' import { template as nextJSTemplate } from './template' -Template.build(nextJSTemplate, 'nextjs-app-bun', { +await Template.build(nextJSTemplate, 'nextjs-app-bun', { cpuCount: 4, memoryMB: 4096, onBuildLogs: defaultBuildLogger(), @@ -72,3 +80,27 @@ Template.build(nextjsTemplate, 'nextjs-app-bun', ) ``` + +## Access your app + +Create a sandbox and grab the URL. The dev server with Turbopack is already running on port 3000. + + +```typescript JavaScript & TypeScript +import { Sandbox } from 'e2b' + +const sandbox = await Sandbox.create('nextjs-app-bun', { timeoutMs: 60_000 }) + +const url = sandbox.getHost(3000) +console.log('Next.js app running at:', url) +``` + +```python Python +from e2b import Sandbox + +sandbox = Sandbox.create('nextjs-app-bun', timeout=60) + +url = sandbox.get_host(3000) +print('Next.js app running at:', url) +``` + diff --git a/docs/template/examples/nextjs.mdx b/docs/template/examples/nextjs.mdx index eb175bb7..924d341f 100644 --- a/docs/template/examples/nextjs.mdx +++ b/docs/template/examples/nextjs.mdx @@ -3,11 +3,11 @@ title: "Next.js App" description: "Next.js web app running in the sandbox using Node.js" --- -Basic Next.js app with Tailwind and shadcn UI +Next.js app with Tailwind and [shadcn/ui](https://ui.shadcn.com/). The dev server starts automatically on port 3000. - - The development server runs on port 3000 as soon as the sandbox is ready. - +## Set up Next.js with shadcn + +Scaffold a Next.js project with TypeScript, Tailwind CSS, and every shadcn component ready to use. We pin specific versions to ensure reproducible builds. ```typescript JavaScript & TypeScript @@ -49,13 +49,17 @@ template = ( ``` +## Build and publish + +Build the template. The first build takes a few minutes since it installs all shadcn components. + ```typescript JavaScript & TypeScript // build.ts import { Template, defaultBuildLogger } from 'e2b' import { template as nextJSTemplate } from './template' -Template.build(nextJSTemplate, 'nextjs-app', { +await Template.build(nextJSTemplate, 'nextjs-app', { cpuCount: 4, memoryMB: 4096, onBuildLogs: defaultBuildLogger(), @@ -74,3 +78,27 @@ Template.build(nextjsTemplate, 'nextjs-app', ) ``` + +## Access your app + +Create a sandbox and grab the URL. The dev server with Turbopack is already running on port 3000. + + +```typescript JavaScript & TypeScript +import { Sandbox } from 'e2b' + +const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 60_000 }) + +const url = sandbox.getHost(3000) +console.log('Next.js app running at:', url) +``` + +```python Python +from e2b import Sandbox + +sandbox = Sandbox.create('nextjs-app', timeout=60) + +url = sandbox.get_host(3000) +print('Next.js app running at:', url) +``` +