E2B 的 Fragments

这是一个开源版本的应用，类似于 Anthropic 的 Claude Artifacts、Vercel 的 v0 或 GPT Engineer。

由 E2B SDK 提供支持。

→ 在 fragments.e2b.dev 上试用

功能特性

• 基于 Next.js 14（App Router、Server Actions）、shadcn/ui、TailwindCSS 和 Vercel AI SDK。
• 使用 E2B SDK 由 E2B 提供，以安全地执行由 AI 生成的代码。
• UI 中的流式传输。
• 可以安装和使用来自 npm、pip 的任何包。
• 支持的栈（添加自定义栈）：
  • 🔸 Python 解释器
  • 🔸 Next.js
  • 🔸 Vue.js
  • 🔸 Streamlit
  • 🔸 Gradio
• 支持的 LLM 提供商（添加自定义提供商）：
  • 🔸 OpenAI
  • 🔸 Anthropic
  • 🔸 Google AI
  • 🔸 Mistral
  • 🔸 Groq
  • 🔸 Fireworks
  • 🔸 Together AI
  • 🔸 Ollama
• 集成 Morph，应用模型以实现高效、准确且更快的代码编辑。

请务必给我们点个赞！

开始使用

先决条件

• git
• 最新版本的 Node.js 和 npm 包管理器
• E2B API 密钥
• LLM 提供商的 API 密钥

1. 克隆仓库

在终端中：

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

2. 安装依赖

进入仓库目录：

cd fragments

运行以下命令以安装所需的依赖：

npm i

3. 设置环境变量

创建一个 .env.local 文件，并设置如下内容：

# 在这里获取你的 API 密钥 - https://e2b.dev/
E2B_API_KEY="your-e2b-api-key"

# OpenAI API 密钥
OPENAI_API_KEY=

# 其他提供商
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=

### 可选环境变量

# （默认开启）在这里获取你的 MORPH 密钥 - https://morphllm.com/dashboard/api-keys
MORPH_API_KEY=

# 网站域名
NEXT_PUBLIC_SITE_URL=

# 速率限制
RATE_LIMIT_MAX_REQUESTS=
RATE_LIMIT_WINDOW=

# Vercel/Upstash KV（短网址、速率限制）
KV_REST_API_URL=
KV_REST_API_TOKEN=

# Supabase（认证）
SUPABASE_URL=
SUPABASE_ANON_KEY=

# PostHog（分析）
NEXT_PUBLIC_POSTHOG_KEY=
NEXT_PUBLIC_POSTHOG_HOST=

### 禁用功能（取消注释时生效）

# 禁用聊天中的 API 密钥和基础 URL 输入
# NEXT_PUBLIC_NO_API_KEY_INPUT=
# NEXT_PUBLIC_NO_BASE_URL_INPUT=

# 从可用模型列表中隐藏本地模型
# NEXT_PUBLIC_HIDE_LOCAL_MODELS=

4. 启动开发服务器

npm run dev

5. 构建 Web 应用

npm run build

自定义

添加自定义角色

1. 确保已安装 E2B CLI，并已登录。

2. 在 sandbox-templates/ 下新建一个文件夹。

3. 使用 E2B CLI 初始化一个新的模板：

   e2b template init
   

   这将创建一个名为 e2b.Dockerfile 的文件。

4. 调整 e2b.Dockerfile。

   以下是 Streamlit 模板的示例：

   # 你可以使用大多数基于 Debian 的基础镜像
   FROM python:3.19-slim
   
   RUN pip3 install --no-cache-dir streamlit pandas numpy matplotlib requests seaborn plotly
   
   # 将代码复制到容器中
   WORKDIR /home/user
   COPY . /home/user
   

5. 在 e2b.toml 中指定自定义启动命令：

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

6. 使用 E2B CLI 部署模板：

   e2b template build --name <template-name>
   

   构建完成后，你应该会收到以下消息：

   ✅ 构建沙盒模板 <template-id> <template-name> 已完成。
   

7. 在代码编辑器中打开 lib/templates.json。

   将你的新模板添加到列表中。以下是 Streamlit 的示例：

   "streamlit-developer": {
     "name": "Streamlit 开发者",
     "lib": [
       "streamlit",
       "pandas",
       "numpy",
       "matplotlib",
       "requests",
       "seaborn",
       "plotly"
     ],
     "file": "app.py",
     "instructions": "一个自动重新加载的 Streamlit 应用。",
     "port": 8501 // 可以为 null
   },
   

   提供模板 ID（作为键）、名称、依赖项列表、入口点以及端口（可选）。你还可以添加额外的说明，这些说明将被传递给 LLM。

8. 选择性地，在 public/thirdparty/templates 下添加新的 logo。

添加自定义 LLM 模型

1. 在代码编辑器中打开 lib/models.json。

2. 在模型列表中添加一个新的条目：

   {
     "id": "mistral-large",
     "name": "Mistral Large",
     "provider": "Ollama",
     "providerId": "ollama"
   }
   

   其中，id 是模型 ID，name 是模型名称（在 UI 中可见），provider 是提供商名称，providerId 是提供商标签（参见下方的 添加自定义 LLM 提供商）。

添加自定义 LLM 提供商

1. 在代码编辑器中打开 lib/models.ts。

2. 在 providerConfigs 列表中添加一个新的条目：

   例如，对于 fireworks：

   fireworks: () => createOpenAI({ apiKey: apiKey || process.env.FIREWORKS_API_KEY, baseURL: baseURL || 'https://api.fireworks.ai/inference/v1' })(modelNameString),
   

3. 选择性地调整 getDefaultMode 函数中的默认结构化输出模式：

   if (providerId === 'fireworks') {
     return 'json'
   }
   

4. 选择性地，在 public/thirdparty/logos 下添加新的 logo。

贡献

作为一个开源项目，我们欢迎社区的贡献。如果您遇到任何 bug 或希望添加一些改进，请随时提交 issue 或 pull request。

Fragments 快速上手指南

Fragments 是由 E2B 开发的开源项目，功能类似 Anthropic Claude Artifacts 或 Vercel v0。它允许用户通过自然语言生成代码，并在安全的沙箱环境中实时运行和预览（支持 Python、Next.js、Vue、Streamlit 等）。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Linux, macOS 或 Windows (WSL2 推荐)
• Git：已安装并配置好。
• Node.js：建议安装最新 LTS 版本（包含 npm 包管理器）。
• API Keys：
  • E2B API Key：用于代码沙箱执行（必填）。
  • LLM Provider API Key：至少需要一个大型模型服务商的密钥（如 OpenAI, Anthropic, Google AI, Groq, Ollama 等）。

提示：国内开发者若访问 GitHub 或 npm 较慢，可配置国内镜像源加速下载：

• npm 镜像：npm config set registry https://registry.npmmirror.com

安装步骤

1. 克隆项目

在终端中执行以下命令拉取源代码：

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

2. 安装依赖

进入项目目录并安装所需依赖：

cd fragments
npm i

3. 配置环境变量

在项目根目录下创建 .env.local 文件，并填入您的 API 密钥。

# E2B API Key (必填) - 获取地址：https://e2b.dev/
E2B_API_KEY="your-e2b-api-key"

# LLM API Key (至少配置一个，例如 OpenAI)
OPENAI_API_KEY="sk-..."

# 其他可选提供商
# ANTHROPIC_API_KEY=
# GROQ_API_KEY=
# FIREWORKS_API_KEY=
# TOGETHER_API_KEY=
# GOOGLE_AI_API_KEY=
# MISTRAL_API_KEY=
# XAI_API_KEY=

# 可选：Morph 模型优化 (默认开启)
# MORPH_API_KEY=

# 可选：站点域名
# NEXT_PUBLIC_SITE_URL=

注意：只需保留您实际使用的模型对应的 Key，未使用的可以留空或删除。

基本使用

启动开发服务器

完成配置后，运行以下命令启动本地开发服务：

npm run dev

访问与体验

1. 打开浏览器访问 http://localhost:3000。
2. 在聊天界面输入您的需求，例如：“用 Python 画一个正弦波”或“创建一个简单的待办事项 Vue 应用”。
3. 系统将调用配置的 LLM 生成代码，并通过 E2B 沙箱自动运行，您可以在右侧直接预览结果。

生产构建

如果您需要部署到生产环境，请执行：

npm run build

构建完成后，可使用 npm start 运行生产版本。