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。
  • 使用 E2BCode 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 下添加新徽标