# Fragments by E2B: Self-Hosted AI Code Generation in Sandboxed Environments

> Fragments is an open-source Next.js 14 template for building conversational apps where a language model generates and executes code inside secure cloud sandboxes managed by the E2B SDK. It targets developers who want to ship a Claude Artifacts-style or v0-style interface under their own infrastructure and model configuration, without relying on a hosted product with fixed model choices.

**e2b-dev/fragments** — Open-source Next.js template for building apps that are fully generated by AI. By E2B.

- Repository: https://github.com/e2b-dev/fragments
- Website: https://fragments.e2b.dev
- Stars: 6,380 · Forks: 864
- Language: TypeScript
- License: Apache-2.0
- Published: 2026-09-09 · Updated: 2026-09-09 · Language: en
- Canonical page: https://hysenlabs.com/projects/e2b-dev-fragments

## What Fragments Solves and Who Uses It

Fragments addresses a specific gap: teams that want to deploy a conversational AI app where the model generates, edits, and executes code, but cannot or do not want to rely on a hosted SaaS product for that execution layer. Claude Artifacts, Vercel v0, and GPT Engineer all offer this capability as managed products with their own model choices and usage pricing. Fragments transfers that responsibility to the operator.

The intended user is a developer who wants to prototype or ship a product with AI-driven code generation without building the underlying execution environment from scratch. The repository is a template, not a library. The expectation is that a team clones it, sets API keys, and then modifies the frontend, personas, or model configuration to match their product.

The five supported execution environments out of the box are Python interpreter, Next.js, Vue.js, Streamlit, and Gradio. Each maps to an E2B sandbox template that the platform spins up when a user triggers code generation. For the LLM side, the template ships with connectors for OpenAI, Anthropic, Google AI, Mistral, Groq, Fireworks, Together AI, and Ollama, covering both hosted and local model providers.

## How E2B Sandboxes Handle Code Execution

The README describes Fragments as powered by the E2B SDK, specifically the `@e2b/code-interpreter` package (version `^1.0.2` in package.json). When a user submits a natural-language prompt and the language model returns code, Fragments sends that code to the E2B service, which runs it in an isolated cloud microVM. The result streams back to the Next.js frontend in real time.

The isolation matters because AI-generated code can produce arbitrary output, make network requests, or attempt to access system resources. Running it locally in the browser or on the Next.js server would expose the operator to those risks. E2B handles that by providing ephemeral, disposable sandboxes. Each sandbox can install packages from npm or pip, which is how Fragments handles dependencies that the model might reference in generated code.

The architecture also integrates the Morph Apply model, described in the README as providing token-efficient and accurate code editing. Morph is enabled by default when its API key is present; it operates on the code that the primary LLM produces, applying diffs rather than regenerating the full output each time. This is a separate external service on top of the LLM and E2B layers.

## Cloning, Configuring, and Running Fragments

The README documents a four-step setup: clone the repository, install dependencies, set environment variables, and start the development server.

Clone the repository and install dependencies:

```bash
git clone https://github.com/e2b-dev/fragments.git
cd fragments
npm i
```

The required environment variables go in a `.env.local` file at the project root. At minimum, an E2B API key and at least one LLM provider key are needed:

```sh
E2B_API_KEY="your-e2b-api-key"
OPENAI_API_KEY=
ANTHROPIC_API_KEY=
MORPH_API_KEY=
```

Start the development server:

```bash
npm run dev
```

The project requires Node.js 24.x, as declared in the `engines` field of package.json. For a production build, `npm run build` produces a standard Next.js output. The template also exposes optional rate-limiting configuration via `RATE_LIMIT_MAX_REQUESTS` and `RATE_LIMIT_WINDOW` environment variables, which use Upstash behind the scenes. Leaving those blank disables rate limiting entirely.

The development server starts a Next.js application with the Turbo bundler, based on the `dev` script in package.json: `next dev --turbo`.

## Adding Custom Runtime Stacks via E2B Templates

Beyond the five built-in stacks, Fragments has a documented path for adding custom execution environments. The process uses the E2B CLI to create and build a new sandbox template, then registers the result in `lib/templates.json`.

The custom template starts with an `e2b.Dockerfile`. The README gives this Streamlit example:

```Dockerfile
FROM python:3.19-slim
RUN pip3 install --no-cache-dir streamlit pandas numpy matplotlib requests seaborn plotly
WORKDIR /home/user
COPY . /home/user
```

A start command goes in `e2b.toml`:

```toml
start_cmd = "cd /home/user && streamlit run app.py"
```

After the CLI builds the template:

```bash
e2b template build --name <template-name>
```

The template ID then goes into `lib/templates.json` with a name, list of dependencies, entrypoint file, and optional port number. Any value in the `instructions` key is passed directly to the language model as context when generating code for that stack. This lets operators add guidance specific to their environment, such as preferred libraries or file structure conventions.

## Three Constraints That Limit Deployment

First, the entire code execution layer depends on E2B's cloud service. The README documents no offline mode and no self-hosted execution alternative. A team deploying Fragments in a regulated environment or one with strict data-egress requirements must accept that all AI-generated code runs on E2B's infrastructure. There is no way to swap the execution backend without rewriting the integration.

Second, LLM provider support is wide but not uniform. The `getDefaultMode` function in `lib/models.ts` controls whether a provider's output is parsed as structured output or as JSON mode. A provider not already in the configuration requires a code change to set the correct mode. Incorrect mode settings cause generation failures at runtime, which the README does not discuss as a fallback case.

Third, the repository ships no authentication system. Rate limiting through Upstash is optional and requires external credentials. A deployment on a public URL with no access control would accept code generation requests from any user. Teams deploying beyond a local or private environment need to implement their own auth before launch. The README mentions none of this as a built-in feature.

## Fragments Compared to Claude Artifacts and Hosted Code Generation Tools

Claude Artifacts, Vercel v0, and GPT Engineer are the specific comparisons the README names. All three are managed services: they handle model selection, execution infrastructure, and billing in a single product with a defined interface. Fragments transfers that entire responsibility to the operator.

The practical difference is ownership of the full stack. An operator using Fragments decides which model runs for each request, chooses the execution runtime for each persona, and pays E2B directly for sandbox usage. The Next.js frontend can be modified without any vendor approval process. That flexibility comes at the cost of operational responsibility: API keys for multiple services, an E2B account, and ongoing maintenance as the underlying SDKs change.

The Vercel AI SDK (`ai` at version `^3.3.8`) provides the streaming infrastructure that connects the LLM output to the UI, which means LLM provider changes generally require only a provider config entry rather than deep code changes. The Morph integration adds a second code-editing pass on top of raw LLM output, which the README describes as producing more accurate and token-efficient edits. Operators who do not want to pay for a separate apply-model can leave `MORPH_API_KEY` empty.

## Conclusion

Fragments is the right starting point for a developer or small team that needs to ship an AI code-generation interface under its own brand, using its own LLM keys, with control over which execution runtimes are available. It is not appropriate for teams operating in environments with strict data-egress policies or that need code to run on internal infrastructure, because all execution goes through E2B's cloud service. Before going to production, confirm that the E2B sandbox environment supports the package set the application will rely on, and decide how access control will be enforced, since the repository ships no authentication layer.

## FAQ

### Does Fragments work with locally hosted models through Ollama?

Yes. The README lists Ollama as one of the supported LLM providers. Configuring a local Ollama model requires adding a model entry to `lib/models.ts` with `providerId` set to `ollama` and setting the appropriate base URL. Code execution still goes through E2B's cloud service regardless of where the LLM runs.

### What API keys are required at minimum to run Fragments?

The README identifies two required keys: an E2B API key (`E2B_API_KEY`) for code execution and at least one LLM provider key such as `OPENAI_API_KEY` or `ANTHROPIC_API_KEY`. The Morph key is listed as optional and enabled by default when present.

### Can Fragments be deployed outside of Vercel?

The repository is a standard Next.js application. The `npm run build` script produces output that can run on any platform supporting Next.js. Rate limiting relies on Upstash rather than Vercel-specific infrastructure, and the optional Vercel Analytics and Vercel KV integrations can be left unconfigured without breaking core functionality.

## Sources

- [e2b-dev/fragments on GitHub](https://github.com/e2b-dev/fragments)
- [Issues](https://github.com/e2b-dev/fragments/issues)
- [License: Apache-2.0](https://github.com/e2b-dev/fragments/blob/main/LICENSE)
- [Project website](https://fragments.e2b.dev)
- [README](https://github.com/e2b-dev/fragments/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/e2b-dev-fragments