Fragments by E2B

This is an open-source version of apps like Anthropic's Claude Artifacts, Vercel v0, or GPT Engineer.

Features

Based on Next.js 14 (App Router, Server Actions), shadcn/ui, TailwindCSS, Vercel AI SDK.
Uses the E2B SDK by E2B to securely execute code generated by AI.
Streaming in the UI.
Can install and use any package from npm, pip.
Supported stacks (add your own):
- 🔸 Python interpreter
- 🔸 Next.js
- 🔸 Vue.js
- 🔸 Streamlit
- 🔸 Gradio
Supported LLM Providers (add your own):
- 🔸 OpenAI
- 🔸 Anthropic
- 🔸 Google AI
- 🔸 Mistral
- 🔸 Groq
- 🔸 Fireworks
- 🔸 Together AI
- 🔸 Ollama
Integrates with Morph Apply model for token efficient, accurate and faster code editing.

Make sure to give us a star!

Get started

Prerequisites

git
Recent version of Node.js and npm package manager
E2B API Key
LLM Provider API Key

1. Clone the repository

In your terminal:

git clone https://github.com/e2b-dev/fragments.git

2. Install the dependencies

Enter the repository:

cd fragments

Run the following to install the required dependencies:

npm i

3. Set the environment variables

Create a .env.local file and set the following:

# Get your API key here - https://e2b.dev/
E2B_API_KEY="your-e2b-api-key"

# OpenAI API Key
OPENAI_API_KEY=

# Other providers
ANTHROPIC_API_KEY=
GROQ_API_KEY=
FIREWORKS_API_KEY=
TOGETHER_API_KEY=
GOOGLE_AI_API_KEY=
GOOGLE_VERTEX_CREDENTIALS=
MISTRAL_API_KEY=
XAI_API_KEY=

### Optional env vars

# (on by default) Get your MORPH key here - https://morphllm.com/dashboard/api-keys
MORPH_API_KEY=

# Domain of the site
NEXT_PUBLIC_SITE_URL=

# Rate limit
RATE_LIMIT_MAX_REQUESTS=
RATE_LIMIT_WINDOW=

# Vercel/Upstash KV (short URLs, rate limiting)
KV_REST_API_URL=
KV_REST_API_TOKEN=

# Supabase (auth)
SUPABASE_URL=
SUPABASE_ANON_KEY=

# PostHog (analytics)
NEXT_PUBLIC_POSTHOG_KEY=
NEXT_PUBLIC_POSTHOG_HOST=

### Disabling functionality (when uncommented)

# Disable API key and base URL input in the chat
# NEXT_PUBLIC_NO_API_KEY_INPUT=
# NEXT_PUBLIC_NO_BASE_URL_INPUT=

# Hide local models from the list of available models
# NEXT_PUBLIC_HIDE_LOCAL_MODELS=

4. Start the development server

npm run dev

5. Build the web app

npm run build

Customize

Adding custom personas

Make sure E2B CLI is installed and you're logged in.
Add a new folder under sandbox-templates/
Initialize a new template using E2B CLI:
```
e2b template init
```
This will create a new file called e2b.Dockerfile.

Adjust the e2b.Dockerfile

Here's an example streamlit template:

# You can use most Debian-based base images
FROM python:3.19-slim

RUN pip3 install --no-cache-dir streamlit pandas numpy matplotlib requests seaborn plotly

# Copy the code to the container
WORKDIR /home/user
COPY . /home/user

Specify a custom start command in e2b.toml:

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

Deploy the template with the E2B CLI

e2b template build --name <template-name>

After the build has finished, you should get the following message:

✅ Building sandbox template <template-id> <template-name> finished.

Open lib/templates.json in your code editor.

Add your new template to the list. Here's an example for Streamlit:
```
"streamlit-developer": {
  "name": "Streamlit developer\
```

Open Source AI Artifacts and Code Execution

Description

文档