Fragments
Open-source Next.js template for building apps that are fully generated by AI. By E2B.
Last verified:
What is Fragments?
Fragments by E2B is an open-source Next.js template for building applications that are fully generated by artificial intelligence. It serves as an open-source alternative to Anthropic's Claude Artifacts, Vercel v0, and GPT Engineer, providing a chat interface where users can generate executable code using AI models. The tool is powered by the E2B SDK, which securely executes AI-generated code in isolated sandbox environments, protecting the host system while running untrusted code.
Key features include support for multiple programming stacks (Python interpreter, Next.js, Vue.js, Streamlit, Gradio), integration with numerous LLM providers (OpenAI, Anthropic, Google AI, Mistral, Groq, Fireworks, Together AI, Ollama), real-time streaming UI, and the ability to install any package from npm or pip. The tool is built on Next.js 14 with App Router, Server Actions, shadcn/ui, TailwindCSS, and Vercel AI SDK. It also integrates with the Morph Apply model for more token-efficient and accurate code editing.
Fragments is designed for developers who want to leverage AI for rapid prototyping, accelerate their development workflow, or build their own AI-powered code generation tools. It is particularly useful for those who want an open-source, self-hostable solution for AI-driven application development with secure code execution capabilities.
Fragments pricing
Pricing model: Freemium
Fragments is fully open-source under Apache-2.0 license with no cost for the software itself. However, users need to obtain their own E2B API key from https://e2b.dev/ and an LLM provider API key (OpenAI, Anthropic, etc.). There is no built-in paid plan - users pay directly for API usage from E2B and their chosen LLM provider. The hosted demo is available at fragments.e2b.dev for testing. Optional Morph API key can be obtained from https://morphllm.com/dashboard/api-keys for enhanced code editing.
Fragments pros
- Fully open-source and self-hostable
- Secure sandbox execution with E2B SDK
- Supports multiple programming stacks (Python, Next.js, Vue.js, Streamlit, Gradio)
- Compatible with 8+ LLM providers including OpenAI and Anthropic
- Real-time streaming UI for responsive interactions
- Can install any npm or pip package
- Based on modern Next.js 14 with App Router and Server Actions
- Uses shadcn/ui and TailwindCSS for clean UI
- Integrates Morph Apply model for efficient code editing
- Customizable with custom personas and sandboxes
- Custom LLM models and providers can be added easily
- 6k GitHub stars with active community
- Apache-2.0 license allows free commercial use
- Supports local models via Ollama
- Has Supabase integration for authentication
- Includes PostHog analytics integration
- Rate limiting support with Vercel/Upstash KV
Fragments cons
- Requires E2B API key for functionality
- Requires separate LLM provider API key
- Self-hosting requires Node.js and git setup
- No built-in hosting - must deploy yourself
- Environment variable configuration can be complex
- Custom sandbox templates require E2B CLI knowledge
- Primary language is TypeScript (97.1%)
- No official pricing - you pay for API usage
- Limited to 5 supported stacks out of the box
- Documentation assumes developer knowledge
Frequently asked questions about Fragments
What is Fragments by E2B?
Fragments is an open-source Next.js template for building apps that are fully generated by AI. It is an open-source version of apps like Anthropic's Claude Artifacts, Vercel v0, or GPT Engineer, powered by the E2B SDK for secure code execution in isolated sandboxes.
What programming languages does Fragments support?
Fragments supports Python interpreter, Next.js, Vue.js, Streamlit, and Gradio out of the box. Users can also add completely custom stacks with custom libraries by creating new sandbox templates.
Which LLM providers are supported?
Fragments supports OpenAI, Anthropic, Google AI, Mistral, Groq, Fireworks, Together AI, and Ollama. Users can easily add custom LLM providers by modifying the lib/models.ts file.
How do I get started with Fragments?
You need git, a recent version of Node.js and npm, an E2B API key, and an LLM Provider API key. Clone the repository with 'git clone https://github.com/e2b-dev/fragments.git', install dependencies with 'npm i', set environment variables in .env.local, and start the development server with 'npm run dev'.
Is Fragments free to use?
Yes, Fragments is fully open-source under the Apache-2.0 license. However, you need your own E2B API key and LLM provider API key, so you will pay for API usage from those services directly.
How does secure code execution work?
Fragments uses the E2B SDK to execute AI-generated code in isolated sandbox environments. This protects your host system while running untrusted code generated by AI models.
Can I add custom sandbox templates?
Yes, you can add custom personas by creating a new folder under sandbox-templates/, initializing a template with E2B CLI (e2b template init), adjusting the e2b.Dockerfile, specifying a start command in e2b.toml, and deploying with 'e2b template build --name <template-name>'.
What packages can I use in generated code?
Fragments can install and use any package from npm for JavaScript/TypeScript projects and any package from pip for Python projects, giving you access to the entire ecosystem of both package managers.
Can I use local models with Fragments?
Yes, Fragments supports Ollama for local models. You can also hide local models from the list by setting NEXT_PUBLIC_HIDE_LOCAL_MODELS in your environment variables if you prefer not to use them.