介绍

这是 Anthropic 的 Claude Artifacts 和 Vercel v0 的开源版本，由 E2B 制作的 Code Interpreter SDK 提供支持，你可以理解为模型完全可以自己控制，带来更好的使用体验

演示示例：

Github:https://github.com/e2b-dev/ai-artifacts

演示：https://artifacts.e2b.dev

特征

• 基于 Next.js 14（App Router）、TailwindCSS、Vercel AI SDK。
• 使用 E2B 的 Code Interpreter SDK 安全地执行 AI 生成的代码。
• 在 UI 中流式传输。
• 可以安装和使用 npm、pip 中的任何软件包。
• 支持的堆栈（添加您自己的堆栈）：
  • 🔸 Python 解释器
  • 🔸 Next.js
  • 🔸 Vue.js
  • 🔸 Streamlit （流式）
  • 🔸 建筑
• 支持的 LLM 提供商（添加您自己的）：
  • 🔸 开放人工智能
  • 🔸 人
  • 🔸 谷歌人工智能
  • 🔸 米斯特拉尔
  • 🔸 格罗克
  • 🔸 烟火
  • 🔸 携手 AI
  • 🔸 奥拉马

开始使用

先决条件

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

1. 克隆存储库

在您的终端中：

git clone https://github.com/e2b-dev/ai-artifacts.git

2. 安装依赖项

输入存储库：

cd ai-artifacts

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

npm i

3. 设置环境变量

创建文件并设置以下内容：.env.local

# 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_AI_API_KEY=
GOOGLE_AI_API_KEY=
MISTRAL_API_KEY=

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 模板：

   # 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
   

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

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

6. 使用 E2B CLI 部署模板

   e2b template build --name <template-name>
   

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

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

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

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

   "streamlit-developer": {
     "name": "Streamlit developer",
     "lib": [
       "streamlit",
       "pandas",
       "numpy",
       "matplotlib",
       "request",
       "seaborn",
       "plotly"
     ],
     "file": "app.py",
     "instructions": "A streamlit app that reloads automatically.",
     "port": 8501 // can be null
   },
   

   提供模板 ID（作为密钥）、名称、依赖项列表、入口点和端口（可选）。您还可以添加将提供给 LLM 的其他说明。

8. （可选）在 public/thirdparty/templates 下添加新徽标

添加自定义 LLM 模型

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

2. 向 models 列表添加新条目：

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

   其中 id 是模型 ID，name 是模型名称（在 UI 中可见），provider 是提供程序名称，providerId 是提供程序标记（请参阅下面的添加提供程序）。

添加自定义 LLM 提供程序

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

2. 向列表中添加新条目：providerConfigs

   烟花示例：

   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 下添加新徽标