Fragments by E2B

Fragments by E2B is an open-source Next.js 14 template for building chat apps that let an LLM write code and run it inside a secure E2B sandbox, producing a live preview of the generated app. It is E2B's open-source take on Anthropic's Claude Artifacts, Vercel v0, and GPT Engineer, and it is powered by the E2B SDK code interpreter.

What is Fragments by E2B?

Fragments by E2B is a Next.js 14 (App Router, Server Actions) web application template that turns a natural-language prompt into running code. The user types a request into a chat interface; the selected LLM streams generated code into the UI, and the E2B SDK executes that code inside a hosted sandbox, returning rendered output such as a web preview, a Python result, or a Streamlit or Gradio app. It is maintained by E2B, ships with shadcn/ui components and TailwindCSS, and a hosted demo runs at fragments.e2b.dev.

What makes Fragments stand out?

• Next.js 14 App Router stack — built on App Router server actions, shadcn/ui components, TailwindCSS, and the Vercel AI SDK, so both the server actions and the streaming chat UI are already wired together.
• Sandboxed code execution — the E2B SDK runs AI-generated code remotely rather than on the host, and the app ships with templates for the Python interpreter, Next.js, Vue.js, Streamlit, and Gradio.
• Package installation inside the sandbox — generated apps can install and use any package from npm or pip at runtime.
• Streaming UI — model output streams into the interface instead of arriving as one block.
• Multi-provider LLM support — OpenAI, Anthropic, Google AI, Mistral, Groq, Fireworks, Together AI, and Ollama are preconfigured in the models list.
• Morph Apply model — optionally integrates the Morph Apply model for token-efficient code editing; it is on by default via a MORPH_API_KEY value.
• Optional Supabase auth, PostHog analytics, and Upstash/Vercel KV — environment variables cover authentication, product analytics, short URLs, and rate limiting.
• Custom personas via E2B CLI — new sandbox templates are built with e2b template init and e2b template build, then registered in lib/templates.json with a name, dependency list, entry file, instructions, and optional port.

Who should use Fragments by E2B?

• Product developers building artifact-style features: teams that want a working reference implementation of prompt-to-app generation instead of starting from an empty Next.js project.
• Engineers comparing model providers: developers who need one codebase where the chat model can be switched between OpenAI, Anthropic, Groq, Mistral, Together AI, Ollama, and others.
• Platform teams extending sandboxes: developers who add their own runtime by creating an e2b.Dockerfile, deploying it with the E2B CLI, and registering it in lib/templates.json.
• Self-hosters who want an open-source alternative to a hosted artifacts product and can supply their own E2B and LLM API keys.

What can you do with Fragments by E2B?

• Generate and preview web apps: prompt the chat, watch code stream in, and see the resulting Next.js or Vue.js app render from inside the sandbox.
• Run Python and data workflows: use the Python interpreter persona to execute scripts, with packages pulled from pip on demand.
• Spin up Streamlit or Gradio dashboards: point the persona at a port such as 8501 and the sandbox serves the running app back to the UI.
• Add a custom stack or provider: register a new sandbox template in lib/templates.json or a new provider in lib/models.ts, including a default structured output mode.

How does Fragments by E2B work?

You clone the repository, run npm i, create a .env.local file with an E2B API key plus at least one LLM provider key, then start the app with npm run dev or build it with npm run build. At runtime an E2B API key is required, and the optional NEXT_PUBLIC_NO_API_KEY_INPUT and NEXT_PUBLIC_HIDE_LOCAL_MODELS variables control whether users can type their own keys or see local models.

Alternatives

Claude Artifacts, Vercel v0, and GPT Engineer cover similar prompt-to-app territory; Fragments is the self-hostable option among them and requires you to bring your own E2B and model API keys.

FAQ

Is Fragments by E2B free?

The code is open source and free to self-host, but running it requires your own E2B API key and at least one LLM provider API key, so usage costs come from those services rather than from the template itself.

Which LLM providers does Fragments support?

OpenAI, Anthropic, Google AI, Mistral, Groq, Fireworks, Together AI, and Ollama are listed as supported providers, and additional ones can be added by editing the provider configuration in lib/models.ts.

Which coding stacks can Fragments run?

Python interpreter, Next.js, Vue.js, Streamlit, and Gradio templates ship by default, and you can add more personas by building a custom sandbox template with the E2B CLI.

Does Fragments install packages automatically?

Yes. Generated code can install and use any package from npm or pip inside the sandbox, which is why the shipped templates list their dependencies such as pandas, numpy, matplotlib, and plotly.