From 963b82a78f1e3a77c98d0cf9c4ffccaf4ac2bbdb Mon Sep 17 00:00:00 2001 From: Tomas Beran Date: Tue, 10 Feb 2026 18:57:51 -0800 Subject: [PATCH 1/3] Add Vibe Coding use case page Document the vibe coding pattern (LLM generates code, E2B sandbox executes it, user sees live preview) using Fragments as the reference implementation. Add navigation entry and home page card. --- docs.json | 1 + docs.mdx | 3 + docs/use-cases/vibe-coding.mdx | 277 +++++++++++++++++++++++++++++++++ 3 files changed, 281 insertions(+) create mode 100644 docs/use-cases/vibe-coding.mdx diff --git a/docs.json b/docs.json index 2cfa63d9..ff78d1a1 100644 --- a/docs.json +++ b/docs.json @@ -45,6 +45,7 @@ { "group": "Use cases", "pages": [ + "docs/use-cases/vibe-coding", "docs/use-cases/computer-use", "docs/use-cases/ci-cd" ] diff --git a/docs.mdx b/docs.mdx index 2909075f..35b25fbf 100644 --- a/docs.mdx +++ b/docs.mdx @@ -63,6 +63,9 @@ The documentation is split into three main sections: ## Examples + + Build AI app generators that turn prompts into running web apps using E2B sandboxes for secure code execution. + Build AI agents that see, understand, and control virtual Linux desktops using E2B Desktop sandboxes. diff --git a/docs/use-cases/vibe-coding.mdx b/docs/use-cases/vibe-coding.mdx new file mode 100644 index 00000000..8b1c8e98 --- /dev/null +++ b/docs/use-cases/vibe-coding.mdx @@ -0,0 +1,277 @@ +--- +title: "Vibe Coding" +description: "Build AI-powered app generators that turn natural language into running code using E2B sandboxes for secure execution and live previews." +icon: "wand-magic-sparkles" +--- + +Vibe coding tools let users describe an app in plain language and get back running code instantly. The challenge is executing AI-generated code safely — it could be buggy, resource-hungry, or malicious. E2B sandboxes solve this by providing isolated environments where generated code runs securely, with [public URLs](/docs/sandbox/internet-access) for live previews that users can open in their browser. + +For a complete working implementation, see [Fragments](https://github.com/e2b-dev/fragments) — an open-source vibe coding platform you can try via the [live demo](https://fragments.e2b.dev). + +## How It Works + +1. **User describes what they want** — e.g., "Build a todo app with dark mode" or "Create a chart of monthly sales data" +2. **Your backend sends the prompt to an LLM** — any model that can generate code (OpenAI, Anthropic, Google, Mistral, etc.) +3. **The LLM returns structured output** — generated code, a list of additional dependencies, and which framework to target +4. **Your backend creates an E2B sandbox** — using a pre-configured [template](/docs/template/quickstart) that matches the target framework (e.g., Next.js, Streamlit, Python) +5. **Dependencies are installed** — `commands.run()` installs any extra packages the LLM requested +6. **Generated code is written to the sandbox** — `files.write()` places the code at the correct file path +7. **The app starts and becomes accessible** — `getHost(port)` / `get_host(port)` returns a public URL the user can open in their browser + +## Install the E2B SDK + +The [E2B SDK](https://github.com/e2b-dev/e2b) lets you create sandboxes, write files, run commands, and retrieve public URLs for running apps. + + +```bash JavaScript & TypeScript +npm i e2b +``` +```bash Python +pip install e2b +``` + + +## Core Implementation + +The following snippets show the key building blocks for a vibe coding backend, adapted from [Fragments](https://github.com/e2b-dev/fragments). + +### Creating a sandbox from a template + +Create a sandbox from a [custom template](/docs/template/quickstart) that has your target framework pre-installed. The template's start command (e.g., `npx next --turbo`) launches the dev server automatically, so the app is ready to serve as soon as the sandbox starts. See the [Next.js template example](/docs/template/examples/nextjs) for a full template definition. + + +```typescript JavaScript & TypeScript +import { Sandbox } from 'e2b' + +// Create a sandbox from a pre-configured Next.js template +// The dev server starts automatically via the template's start command +const sandbox = await Sandbox.create('nextjs-app', { + timeoutMs: 300_000, // 5 minutes +}) + +console.log('Sandbox created:', sandbox.sandboxId) +``` +```python Python +from e2b import Sandbox + +# Create a sandbox from a pre-configured Next.js template +# The dev server starts automatically via the template's start command +sandbox = Sandbox.create("nextjs-app", timeout=300) # 5 minutes + +print("Sandbox created:", sandbox.sandbox_id) +``` + + +### Installing dependencies + +The LLM may request packages that aren't included in the template. Install them at runtime with `commands.run()` before writing the generated code. See [Install custom packages](/docs/quickstart/install-custom-packages) for more details. + + +```typescript JavaScript & TypeScript +import { Sandbox } from 'e2b' + +const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 300_000 }) + +// Install additional packages requested by the LLM +const dependencies = ['recharts', '@radix-ui/react-icons'] +await sandbox.commands.run(`npm install ${dependencies.join(' ')}`) +``` +```python Python +from e2b import Sandbox + +sandbox = Sandbox.create("nextjs-app", timeout=300) + +# Install additional packages requested by the LLM +dependencies = ["recharts", "@radix-ui/react-icons"] +sandbox.commands.run(f"npm install {' '.join(dependencies)}") +``` + + +### Writing generated code + +Once the LLM generates code, write it to the correct file path in the sandbox. The sandbox [filesystem](/docs/filesystem/read-write) works like a standard Linux machine — place the file where the framework expects it. + + +```typescript JavaScript & TypeScript +import { Sandbox } from 'e2b' + +const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 300_000 }) + +// Write the LLM-generated code to the sandbox filesystem +const generatedCode = ` +export default function Home() { + return ( +
+

Hello from AI

+
+ ) +} +` + +await sandbox.files.write('/home/user/pages/index.tsx', generatedCode) +``` +```python Python +from e2b import Sandbox + +sandbox = Sandbox.create("nextjs-app", timeout=300) + +# Write the LLM-generated code to the sandbox filesystem +generated_code = """ +export default function Home() { + return ( +
+

Hello from AI

+
+ ) +} +""" + +sandbox.files.write("/home/user/pages/index.tsx", generated_code) +``` + + +### Getting the preview URL + +After writing the code, the dev server (already running via the template's start command) picks up the changes automatically. Retrieve the sandbox's [public URL](/docs/sandbox/internet-access) and send it to your frontend so the user can see the running app. + + +```typescript JavaScript & TypeScript +import { Sandbox } from 'e2b' + +const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 300_000 }) + +// ... install dependencies and write code ... + +// Get the public URL for the running app +// The Next.js dev server runs on port 3000 (configured in the template) +const host = sandbox.getHost(3000) +const previewUrl = `https://${host}` +console.log('Preview your app at:', previewUrl) +``` +```python Python +from e2b import Sandbox + +sandbox = Sandbox.create("nextjs-app", timeout=300) + +# ... install dependencies and write code ... + +# Get the public URL for the running app +# The Next.js dev server runs on port 3000 (configured in the template) +host = sandbox.get_host(3000) +preview_url = f"https://{host}" +print("Preview your app at:", preview_url) +``` + + +### Putting it all together + +Here is a complete example that demonstrates the full vibe coding flow: prompting an LLM, creating a sandbox, installing dependencies, writing the generated code, and returning a preview URL. This is a simplified version of how [Fragments](https://github.com/e2b-dev/fragments) handles each generation request. + + +```typescript JavaScript & TypeScript expandable +import { Sandbox } from 'e2b' +import OpenAI from 'openai' + +// --- 1. Get code from the LLM --- +const openai = new OpenAI() +const response = await openai.chat.completions.create({ + model: 'gpt-5.2-mini', + messages: [ + { + role: 'system', + content: + 'You are a frontend developer. Generate a single Next.js page component using TypeScript and Tailwind CSS. Return only the code, no markdown.', + }, + { + role: 'user', + content: 'Build a calculator app with a clean design', + }, + ], +}) + +const generatedCode = response.choices[0].message.content +const dependencies = [''] // The LLM could also return a dependency list + +// --- 2. Create a sandbox from the Next.js template --- +const sandbox = await Sandbox.create('nextjs-app', { + timeoutMs: 300_000, +}) + +// --- 3. Install any additional dependencies --- +if (dependencies.length > 0 && dependencies[0] !== '') { + await sandbox.commands.run(`npm install ${dependencies.join(' ')}`) +} + +// --- 4. Write the generated code --- +await sandbox.files.write('/home/user/pages/index.tsx', generatedCode) + +// --- 5. Get the preview URL --- +const host = sandbox.getHost(3000) +const previewUrl = `https://${host}` +console.log('App is live at:', previewUrl) + +// Later, when the user is done: +await sandbox.kill() +``` +```python Python expandable +from e2b import Sandbox +from openai import OpenAI + +# --- 1. Get code from the LLM --- +client = OpenAI() +response = client.chat.completions.create( + model="gpt-5.2-mini", + messages=[ + { + "role": "system", + "content": "You are a frontend developer. Generate a single Next.js page component using TypeScript and Tailwind CSS. Return only the code, no markdown.", + }, + { + "role": "user", + "content": "Build a calculator app with a clean design", + }, + ], +) + +generated_code = response.choices[0].message.content +dependencies = [] # The LLM could also return a dependency list + +# --- 2. Create a sandbox from the Next.js template --- +sandbox = Sandbox.create("nextjs-app", timeout=300) + +# --- 3. Install any additional dependencies --- +if dependencies: + sandbox.commands.run(f"npm install {' '.join(dependencies)}") + +# --- 4. Write the generated code --- +sandbox.files.write("/home/user/pages/index.tsx", generated_code) + +# --- 5. Get the preview URL --- +host = sandbox.get_host(3000) +preview_url = f"https://{host}" +print("App is live at:", preview_url) + +# Later, when the user is done: +sandbox.kill() +``` + + +1. **Get code from the LLM** — send a prompt to any model; the LLM returns generated code and optionally a list of dependencies — swap the model for any provider via [Connect LLMs](/docs/quickstart/connect-llms) +2. **Create a sandbox** — `Sandbox.create('nextjs-app')` spins up an isolated environment from a [custom template](/docs/template/quickstart) with the framework pre-installed and a dev server already running +3. **Install dependencies** — `commands.run()` installs any extra packages the LLM requested at runtime +4. **Write generated code** — `files.write()` places the code in the sandbox [filesystem](/docs/filesystem/read-write) at the path the framework expects +5. **Get the preview URL** — `getHost(3000)` / `get_host(3000)` returns a public hostname; combine with `https://` to form the URL your frontend embeds in an iframe or opens in a new tab + +## Related Guides + + + + Pre-install frameworks and tools so sandboxes start instantly + + + Integrate AI models with sandboxes using tool calling + + + Access sandbox apps via public URLs and control network policies + + From 9cc948db8fc83b6eda21b6a5704c88b62d6dac28 Mon Sep 17 00:00:00 2001 From: Tomas Beran Date: Tue, 10 Feb 2026 19:10:06 -0800 Subject: [PATCH 2/3] Use Code Interpreter SDK and clarify sandbox architecture Switch imports from plain e2b to @e2b/code-interpreter to match Fragments' actual usage. Clarify that the app runs outside the sandbox, using it purely to prepare and serve the generated code. --- docs/use-cases/vibe-coding.mdx | 64 +++++++++++++++++----------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/docs/use-cases/vibe-coding.mdx b/docs/use-cases/vibe-coding.mdx index 8b1c8e98..6671bd3c 100644 --- a/docs/use-cases/vibe-coding.mdx +++ b/docs/use-cases/vibe-coding.mdx @@ -4,44 +4,44 @@ description: "Build AI-powered app generators that turn natural language into ru icon: "wand-magic-sparkles" --- -Vibe coding tools let users describe an app in plain language and get back running code instantly. The challenge is executing AI-generated code safely — it could be buggy, resource-hungry, or malicious. E2B sandboxes solve this by providing isolated environments where generated code runs securely, with [public URLs](/docs/sandbox/internet-access) for live previews that users can open in their browser. +Vibe coding tools let users describe an app in plain language and get back running code instantly. Your application handles the LLM interaction and UI, then uses E2B sandboxes as isolated environments to prepare and serve the generated app — installing dependencies, writing code files, and exposing a [public URL](/docs/sandbox/internet-access) for the live preview. Since the generated code never runs on your infrastructure, it can't cause damage even if it's buggy or malicious. For a complete working implementation, see [Fragments](https://github.com/e2b-dev/fragments) — an open-source vibe coding platform you can try via the [live demo](https://fragments.e2b.dev). ## How It Works 1. **User describes what they want** — e.g., "Build a todo app with dark mode" or "Create a chart of monthly sales data" -2. **Your backend sends the prompt to an LLM** — any model that can generate code (OpenAI, Anthropic, Google, Mistral, etc.) +2. **Your app sends the prompt to an LLM** — any model that can generate code (OpenAI, Anthropic, Google, Mistral, etc.) 3. **The LLM returns structured output** — generated code, a list of additional dependencies, and which framework to target -4. **Your backend creates an E2B sandbox** — using a pre-configured [template](/docs/template/quickstart) that matches the target framework (e.g., Next.js, Streamlit, Python) -5. **Dependencies are installed** — `commands.run()` installs any extra packages the LLM requested +4. **Your app creates an E2B sandbox** — using a pre-configured [template](/docs/template/quickstart) that matches the target framework (e.g., Next.js, Streamlit, Python) +5. **Dependencies are installed in the sandbox** — `commands.run()` installs any extra packages the LLM requested 6. **Generated code is written to the sandbox** — `files.write()` places the code at the correct file path -7. **The app starts and becomes accessible** — `getHost(port)` / `get_host(port)` returns a public URL the user can open in their browser +7. **The sandbox serves the app** — `getHost(port)` / `get_host(port)` returns a public URL your app embeds in an iframe for the user -## Install the E2B SDK +## Install the E2B Code Interpreter SDK -The [E2B SDK](https://github.com/e2b-dev/e2b) lets you create sandboxes, write files, run commands, and retrieve public URLs for running apps. +[Fragments](https://github.com/e2b-dev/fragments) uses the [E2B Code Interpreter SDK](https://github.com/e2b-dev/code-interpreter) — an extension of the base E2B SDK that adds code execution capabilities on top of sandbox management. ```bash JavaScript & TypeScript -npm i e2b +npm i @e2b/code-interpreter ``` ```bash Python -pip install e2b +pip install e2b-code-interpreter ``` ## Core Implementation -The following snippets show the key building blocks for a vibe coding backend, adapted from [Fragments](https://github.com/e2b-dev/fragments). +The following snippets show the key building blocks for a vibe coding backend. Your application (e.g., a Next.js server) runs these on its own infrastructure — the sandbox is used purely as the execution environment for the generated code. These examples are adapted from [Fragments](https://github.com/e2b-dev/fragments). ### Creating a sandbox from a template -Create a sandbox from a [custom template](/docs/template/quickstart) that has your target framework pre-installed. The template's start command (e.g., `npx next --turbo`) launches the dev server automatically, so the app is ready to serve as soon as the sandbox starts. See the [Next.js template example](/docs/template/examples/nextjs) for a full template definition. +Create a sandbox from a [custom template](/docs/template/quickstart) that has your target framework pre-installed. The template's start command (e.g., `npx next --turbo`) launches the dev server automatically, so the sandbox is ready to serve as soon as it starts. See the [Next.js template example](/docs/template/examples/nextjs) for a full template definition. ```typescript JavaScript & TypeScript -import { Sandbox } from 'e2b' +import { Sandbox } from '@e2b/code-interpreter' // Create a sandbox from a pre-configured Next.js template // The dev server starts automatically via the template's start command @@ -52,7 +52,7 @@ const sandbox = await Sandbox.create('nextjs-app', { console.log('Sandbox created:', sandbox.sandboxId) ``` ```python Python -from e2b import Sandbox +from e2b_code_interpreter import Sandbox # Create a sandbox from a pre-configured Next.js template # The dev server starts automatically via the template's start command @@ -64,11 +64,11 @@ print("Sandbox created:", sandbox.sandbox_id) ### Installing dependencies -The LLM may request packages that aren't included in the template. Install them at runtime with `commands.run()` before writing the generated code. See [Install custom packages](/docs/quickstart/install-custom-packages) for more details. +The LLM may request packages that aren't included in the template. Install them in the sandbox with `commands.run()` before writing the generated code. See [Install custom packages](/docs/quickstart/install-custom-packages) for more details. ```typescript JavaScript & TypeScript -import { Sandbox } from 'e2b' +import { Sandbox } from '@e2b/code-interpreter' const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 300_000 }) @@ -77,7 +77,7 @@ const dependencies = ['recharts', '@radix-ui/react-icons'] await sandbox.commands.run(`npm install ${dependencies.join(' ')}`) ``` ```python Python -from e2b import Sandbox +from e2b_code_interpreter import Sandbox sandbox = Sandbox.create("nextjs-app", timeout=300) @@ -93,7 +93,7 @@ Once the LLM generates code, write it to the correct file path in the sandbox. T ```typescript JavaScript & TypeScript -import { Sandbox } from 'e2b' +import { Sandbox } from '@e2b/code-interpreter' const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 300_000 }) @@ -111,7 +111,7 @@ export default function Home() { await sandbox.files.write('/home/user/pages/index.tsx', generatedCode) ``` ```python Python -from e2b import Sandbox +from e2b_code_interpreter import Sandbox sandbox = Sandbox.create("nextjs-app", timeout=300) @@ -132,11 +132,11 @@ sandbox.files.write("/home/user/pages/index.tsx", generated_code) ### Getting the preview URL -After writing the code, the dev server (already running via the template's start command) picks up the changes automatically. Retrieve the sandbox's [public URL](/docs/sandbox/internet-access) and send it to your frontend so the user can see the running app. +After writing the code, the dev server (already running via the template's start command) picks up the changes automatically. Retrieve the sandbox's [public URL](/docs/sandbox/internet-access) and send it to your frontend so the user can see the running app in an iframe. ```typescript JavaScript & TypeScript -import { Sandbox } from 'e2b' +import { Sandbox } from '@e2b/code-interpreter' const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 300_000 }) @@ -149,7 +149,7 @@ const previewUrl = `https://${host}` console.log('Preview your app at:', previewUrl) ``` ```python Python -from e2b import Sandbox +from e2b_code_interpreter import Sandbox sandbox = Sandbox.create("nextjs-app", timeout=300) @@ -165,11 +165,11 @@ print("Preview your app at:", preview_url) ### Putting it all together -Here is a complete example that demonstrates the full vibe coding flow: prompting an LLM, creating a sandbox, installing dependencies, writing the generated code, and returning a preview URL. This is a simplified version of how [Fragments](https://github.com/e2b-dev/fragments) handles each generation request. +Here is a complete example that demonstrates the full vibe coding flow: prompting an LLM, creating a sandbox, installing dependencies, writing the generated code, and returning a preview URL. Your application orchestrates this from its own server — the sandbox handles only the generated app. This is a simplified version of how [Fragments](https://github.com/e2b-dev/fragments) handles each generation request. ```typescript JavaScript & TypeScript expandable -import { Sandbox } from 'e2b' +import { Sandbox } from '@e2b/code-interpreter' import OpenAI from 'openai' // --- 1. Get code from the LLM --- @@ -192,17 +192,17 @@ const response = await openai.chat.completions.create({ const generatedCode = response.choices[0].message.content const dependencies = [''] // The LLM could also return a dependency list -// --- 2. Create a sandbox from the Next.js template --- +// --- 2. Create a sandbox to prepare the generated app --- const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 300_000, }) -// --- 3. Install any additional dependencies --- +// --- 3. Install any additional dependencies in the sandbox --- if (dependencies.length > 0 && dependencies[0] !== '') { await sandbox.commands.run(`npm install ${dependencies.join(' ')}`) } -// --- 4. Write the generated code --- +// --- 4. Write the generated code to the sandbox --- await sandbox.files.write('/home/user/pages/index.tsx', generatedCode) // --- 5. Get the preview URL --- @@ -214,7 +214,7 @@ console.log('App is live at:', previewUrl) await sandbox.kill() ``` ```python Python expandable -from e2b import Sandbox +from e2b_code_interpreter import Sandbox from openai import OpenAI # --- 1. Get code from the LLM --- @@ -236,14 +236,14 @@ response = client.chat.completions.create( generated_code = response.choices[0].message.content dependencies = [] # The LLM could also return a dependency list -# --- 2. Create a sandbox from the Next.js template --- +# --- 2. Create a sandbox to prepare the generated app --- sandbox = Sandbox.create("nextjs-app", timeout=300) -# --- 3. Install any additional dependencies --- +# --- 3. Install any additional dependencies in the sandbox --- if dependencies: sandbox.commands.run(f"npm install {' '.join(dependencies)}") -# --- 4. Write the generated code --- +# --- 4. Write the generated code to the sandbox --- sandbox.files.write("/home/user/pages/index.tsx", generated_code) # --- 5. Get the preview URL --- @@ -256,9 +256,9 @@ sandbox.kill() ``` -1. **Get code from the LLM** — send a prompt to any model; the LLM returns generated code and optionally a list of dependencies — swap the model for any provider via [Connect LLMs](/docs/quickstart/connect-llms) +1. **Get code from the LLM** — your app sends a prompt to any model; the LLM returns generated code and optionally a list of dependencies — swap the model for any provider via [Connect LLMs](/docs/quickstart/connect-llms) 2. **Create a sandbox** — `Sandbox.create('nextjs-app')` spins up an isolated environment from a [custom template](/docs/template/quickstart) with the framework pre-installed and a dev server already running -3. **Install dependencies** — `commands.run()` installs any extra packages the LLM requested at runtime +3. **Install dependencies** — `commands.run()` installs any extra packages the LLM requested inside the sandbox 4. **Write generated code** — `files.write()` places the code in the sandbox [filesystem](/docs/filesystem/read-write) at the path the framework expects 5. **Get the preview URL** — `getHost(3000)` / `get_host(3000)` returns a public hostname; combine with `https://` to form the URL your frontend embeds in an iframe or opens in a new tab From 3d66796cba1e388ce631a87c523b5b42a3762f56 Mon Sep 17 00:00:00 2001 From: Tomas Beran Date: Tue, 10 Feb 2026 19:39:12 -0800 Subject: [PATCH 3/3] Streamline vibe coding page with shorter prose and concise examples Replace verbose How It Works section with a Why E2B bullet list. Merge dependency and code-writing sections. Trim code examples to focus on the essential API calls. --- docs/use-cases/vibe-coding.mdx | 185 +++++++-------------------------- 1 file changed, 39 insertions(+), 146 deletions(-) diff --git a/docs/use-cases/vibe-coding.mdx b/docs/use-cases/vibe-coding.mdx index 6671bd3c..147d9656 100644 --- a/docs/use-cases/vibe-coding.mdx +++ b/docs/use-cases/vibe-coding.mdx @@ -4,23 +4,20 @@ description: "Build AI-powered app generators that turn natural language into ru icon: "wand-magic-sparkles" --- -Vibe coding tools let users describe an app in plain language and get back running code instantly. Your application handles the LLM interaction and UI, then uses E2B sandboxes as isolated environments to prepare and serve the generated app — installing dependencies, writing code files, and exposing a [public URL](/docs/sandbox/internet-access) for the live preview. Since the generated code never runs on your infrastructure, it can't cause damage even if it's buggy or malicious. +Vibe coding tools let users describe an app in plain language and get back running code instantly. Your app handles the LLM interaction and UI, then uses E2B sandboxes to prepare and serve the generated app. Since the generated code never runs on your infrastructure, it can't cause damage even if it's buggy or malicious. For a complete working implementation, see [Fragments](https://github.com/e2b-dev/fragments) — an open-source vibe coding platform you can try via the [live demo](https://fragments.e2b.dev). -## How It Works +## Why E2B -1. **User describes what they want** — e.g., "Build a todo app with dark mode" or "Create a chart of monthly sales data" -2. **Your app sends the prompt to an LLM** — any model that can generate code (OpenAI, Anthropic, Google, Mistral, etc.) -3. **The LLM returns structured output** — generated code, a list of additional dependencies, and which framework to target -4. **Your app creates an E2B sandbox** — using a pre-configured [template](/docs/template/quickstart) that matches the target framework (e.g., Next.js, Streamlit, Python) -5. **Dependencies are installed in the sandbox** — `commands.run()` installs any extra packages the LLM requested -6. **Generated code is written to the sandbox** — `files.write()` places the code at the correct file path -7. **The sandbox serves the app** — `getHost(port)` / `get_host(port)` returns a public URL your app embeds in an iframe for the user +- **Secure execution** — AI-generated code runs in isolated sandboxes, not on your servers +- **Live preview URLs** — each sandbox exposes a [public URL](/docs/sandbox/internet-access) you can embed in an iframe +- **Custom templates** — pre-install frameworks like Next.js, Streamlit, or Gradio so sandboxes start instantly via [templates](/docs/template/quickstart) +- **Multi-framework support** — same API whether the generated app is React, Vue, Python, or anything else -## Install the E2B Code Interpreter SDK +## Install the SDK -[Fragments](https://github.com/e2b-dev/fragments) uses the [E2B Code Interpreter SDK](https://github.com/e2b-dev/code-interpreter) — an extension of the base E2B SDK that adds code execution capabilities on top of sandbox management. +[Fragments](https://github.com/e2b-dev/fragments) uses the [E2B Code Interpreter SDK](https://github.com/e2b-dev/code-interpreter). ```bash JavaScript & TypeScript @@ -33,146 +30,75 @@ pip install e2b-code-interpreter ## Core Implementation -The following snippets show the key building blocks for a vibe coding backend. Your application (e.g., a Next.js server) runs these on its own infrastructure — the sandbox is used purely as the execution environment for the generated code. These examples are adapted from [Fragments](https://github.com/e2b-dev/fragments). +Your app orchestrates the flow from its own server — the sandbox is used purely to prepare and serve the generated code. -### Creating a sandbox from a template +### Create a sandbox from a template -Create a sandbox from a [custom template](/docs/template/quickstart) that has your target framework pre-installed. The template's start command (e.g., `npx next --turbo`) launches the dev server automatically, so the sandbox is ready to serve as soon as it starts. See the [Next.js template example](/docs/template/examples/nextjs) for a full template definition. +Each sandbox starts from a [template](/docs/template/quickstart) with the target framework pre-installed and a dev server already running. See the [Next.js template example](/docs/template/examples/nextjs). ```typescript JavaScript & TypeScript import { Sandbox } from '@e2b/code-interpreter' -// Create a sandbox from a pre-configured Next.js template -// The dev server starts automatically via the template's start command const sandbox = await Sandbox.create('nextjs-app', { - timeoutMs: 300_000, // 5 minutes + timeoutMs: 300_000, }) - -console.log('Sandbox created:', sandbox.sandboxId) -``` -```python Python -from e2b_code_interpreter import Sandbox - -# Create a sandbox from a pre-configured Next.js template -# The dev server starts automatically via the template's start command -sandbox = Sandbox.create("nextjs-app", timeout=300) # 5 minutes - -print("Sandbox created:", sandbox.sandbox_id) -``` - - -### Installing dependencies - -The LLM may request packages that aren't included in the template. Install them in the sandbox with `commands.run()` before writing the generated code. See [Install custom packages](/docs/quickstart/install-custom-packages) for more details. - - -```typescript JavaScript & TypeScript -import { Sandbox } from '@e2b/code-interpreter' - -const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 300_000 }) - -// Install additional packages requested by the LLM -const dependencies = ['recharts', '@radix-ui/react-icons'] -await sandbox.commands.run(`npm install ${dependencies.join(' ')}`) ``` ```python Python from e2b_code_interpreter import Sandbox sandbox = Sandbox.create("nextjs-app", timeout=300) - -# Install additional packages requested by the LLM -dependencies = ["recharts", "@radix-ui/react-icons"] -sandbox.commands.run(f"npm install {' '.join(dependencies)}") ``` -### Writing generated code +### Install dependencies and write code -Once the LLM generates code, write it to the correct file path in the sandbox. The sandbox [filesystem](/docs/filesystem/read-write) works like a standard Linux machine — place the file where the framework expects it. +Install any extra packages the LLM requested, then write the generated code to the sandbox [filesystem](/docs/filesystem/read-write). ```typescript JavaScript & TypeScript -import { Sandbox } from '@e2b/code-interpreter' - -const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 300_000 }) - -// Write the LLM-generated code to the sandbox filesystem -const generatedCode = ` -export default function Home() { - return ( -
-

Hello from AI

-
- ) -} -` +// Install additional packages requested by the LLM +await sandbox.commands.run('npm install recharts @radix-ui/react-icons') +// Write the generated code await sandbox.files.write('/home/user/pages/index.tsx', generatedCode) ``` ```python Python -from e2b_code_interpreter import Sandbox - -sandbox = Sandbox.create("nextjs-app", timeout=300) - -# Write the LLM-generated code to the sandbox filesystem -generated_code = """ -export default function Home() { - return ( -
-

Hello from AI

-
- ) -} -""" +# Install additional packages requested by the LLM +sandbox.commands.run("npm install recharts @radix-ui/react-icons") +# Write the generated code sandbox.files.write("/home/user/pages/index.tsx", generated_code) ``` -### Getting the preview URL +### Get the preview URL -After writing the code, the dev server (already running via the template's start command) picks up the changes automatically. Retrieve the sandbox's [public URL](/docs/sandbox/internet-access) and send it to your frontend so the user can see the running app in an iframe. +The dev server picks up changes automatically. Retrieve the sandbox's [public URL](/docs/sandbox/internet-access) and embed it in your frontend. ```typescript JavaScript & TypeScript -import { Sandbox } from '@e2b/code-interpreter' - -const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 300_000 }) - -// ... install dependencies and write code ... - -// Get the public URL for the running app -// The Next.js dev server runs on port 3000 (configured in the template) const host = sandbox.getHost(3000) const previewUrl = `https://${host}` -console.log('Preview your app at:', previewUrl) +// Embed previewUrl in an iframe for the user ``` ```python Python -from e2b_code_interpreter import Sandbox - -sandbox = Sandbox.create("nextjs-app", timeout=300) - -# ... install dependencies and write code ... - -# Get the public URL for the running app -# The Next.js dev server runs on port 3000 (configured in the template) host = sandbox.get_host(3000) preview_url = f"https://{host}" -print("Preview your app at:", preview_url) +# Embed preview_url in an iframe for the user ``` -### Putting it all together +### Full example -Here is a complete example that demonstrates the full vibe coding flow: prompting an LLM, creating a sandbox, installing dependencies, writing the generated code, and returning a preview URL. Your application orchestrates this from its own server — the sandbox handles only the generated app. This is a simplified version of how [Fragments](https://github.com/e2b-dev/fragments) handles each generation request. +A complete flow: LLM generates code, sandbox prepares and serves it. Simplified from [Fragments](https://github.com/e2b-dev/fragments). ```typescript JavaScript & TypeScript expandable import { Sandbox } from '@e2b/code-interpreter' import OpenAI from 'openai' -// --- 1. Get code from the LLM --- +// 1. Get code from the LLM const openai = new OpenAI() const response = await openai.chat.completions.create({ model: 'gpt-5.2-mini', @@ -180,34 +106,19 @@ const response = await openai.chat.completions.create({ { role: 'system', content: - 'You are a frontend developer. Generate a single Next.js page component using TypeScript and Tailwind CSS. Return only the code, no markdown.', - }, - { - role: 'user', - content: 'Build a calculator app with a clean design', + 'Generate a single Next.js page component using TypeScript and Tailwind CSS. Return only code, no markdown.', }, + { role: 'user', content: 'Build a calculator app' }, ], }) - const generatedCode = response.choices[0].message.content -const dependencies = [''] // The LLM could also return a dependency list - -// --- 2. Create a sandbox to prepare the generated app --- -const sandbox = await Sandbox.create('nextjs-app', { - timeoutMs: 300_000, -}) - -// --- 3. Install any additional dependencies in the sandbox --- -if (dependencies.length > 0 && dependencies[0] !== '') { - await sandbox.commands.run(`npm install ${dependencies.join(' ')}`) -} -// --- 4. Write the generated code to the sandbox --- +// 2. Create a sandbox and prepare the app +const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 300_000 }) await sandbox.files.write('/home/user/pages/index.tsx', generatedCode) -// --- 5. Get the preview URL --- -const host = sandbox.getHost(3000) -const previewUrl = `https://${host}` +// 3. Return the preview URL +const previewUrl = `https://${sandbox.getHost(3000)}` console.log('App is live at:', previewUrl) // Later, when the user is done: @@ -217,38 +128,26 @@ await sandbox.kill() from e2b_code_interpreter import Sandbox from openai import OpenAI -# --- 1. Get code from the LLM --- +# 1. Get code from the LLM client = OpenAI() response = client.chat.completions.create( model="gpt-5.2-mini", messages=[ { "role": "system", - "content": "You are a frontend developer. Generate a single Next.js page component using TypeScript and Tailwind CSS. Return only the code, no markdown.", - }, - { - "role": "user", - "content": "Build a calculator app with a clean design", + "content": "Generate a single Next.js page component using TypeScript and Tailwind CSS. Return only code, no markdown.", }, + {"role": "user", "content": "Build a calculator app"}, ], ) - generated_code = response.choices[0].message.content -dependencies = [] # The LLM could also return a dependency list -# --- 2. Create a sandbox to prepare the generated app --- +# 2. Create a sandbox and prepare the app sandbox = Sandbox.create("nextjs-app", timeout=300) - -# --- 3. Install any additional dependencies in the sandbox --- -if dependencies: - sandbox.commands.run(f"npm install {' '.join(dependencies)}") - -# --- 4. Write the generated code to the sandbox --- sandbox.files.write("/home/user/pages/index.tsx", generated_code) -# --- 5. Get the preview URL --- -host = sandbox.get_host(3000) -preview_url = f"https://{host}" +# 3. Return the preview URL +preview_url = f"https://{sandbox.get_host(3000)}" print("App is live at:", preview_url) # Later, when the user is done: @@ -256,12 +155,6 @@ sandbox.kill() ``` -1. **Get code from the LLM** — your app sends a prompt to any model; the LLM returns generated code and optionally a list of dependencies — swap the model for any provider via [Connect LLMs](/docs/quickstart/connect-llms) -2. **Create a sandbox** — `Sandbox.create('nextjs-app')` spins up an isolated environment from a [custom template](/docs/template/quickstart) with the framework pre-installed and a dev server already running -3. **Install dependencies** — `commands.run()` installs any extra packages the LLM requested inside the sandbox -4. **Write generated code** — `files.write()` places the code in the sandbox [filesystem](/docs/filesystem/read-write) at the path the framework expects -5. **Get the preview URL** — `getHost(3000)` / `get_host(3000)` returns a public hostname; combine with `https://` to form the URL your frontend embeds in an iframe or opens in a new tab - ## Related Guides