Anthropic的Claude Artifacts的可破解开源版本，AI对话构建程序

介绍

这是 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
    • 🔸 奥拉马

开始使用

先决条件

1. 克隆存储库

在您的终端中：

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

2. 安装依赖项

输入存储库：

1
cd ai-artifacts

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

1
npm i

3. 设置环境变量

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

1
2
3
4
5
6
7
8
9
10
11
12
13
# 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. 启动开发服务器

1
npm run dev

5. 构建 Web 应用程序

1
npm run build

自定义

添加自定义角色

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

  2. 在 sandbox-templates/ 下添加新文件夹

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

    1
    e2b template init

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

  4. 调整e2b.Dockerfile

    下面是一个示例 streamlit 模板：

    1
    2
    3
    4
    5
    6
    7
    8
    # 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

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

  6. 使用 E2B CLI 部署模板

    1
    e2b template build --name <template-name>

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

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    "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 列表添加新条目：

    1
    2
    3
    4
    5
    6
    {
      "id": "mistral-large",
      "name": "Mistral Large",
      "provider": "Ollama",
      "providerId": "ollama"
    }

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

添加自定义 LLM 提供程序

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

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

    烟花示例：

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

  3. （可选）在函数中调整默认结构化输出模式：getDefaultMode

    1
    2
    3
    if (providerId === 'fireworks') {
      return 'json'
    }

  4. （可选）在 public/thirdparty/logos 下添加新徽标