ai-artifacts

ai-artifacts

Hackable open-source version of Anthropic's Claude Artifacts by E2B

Stars: 2381

Visit
 screenshot

AI Artifacts is an open source tool that replicates Anthropic's Artifacts UI in the Claude chat app. It utilizes E2B's Code Interpreter SDK and Core SDK for secure AI code execution in a cloud sandbox environment. Users can run AI-generated code in various languages such as Python, JavaScript, R, and Nextjs apps. The tool also supports running AI-generated Python in Jupyter notebook, Next.js apps, and Streamlit apps. Additionally, it offers integration with Vercel AI SDK for tool calling and streaming responses from the model.

README:

E2B AI Artifacts

This is an open source version of Anthropic's Claude Artifacts and Vercel v0.

Powered by E2B Sandbox SDK and Code Interpreter SDK. Made by the E2B team.

Preview

→ Try on artifacts.e2b.dev

Features

  • Based on Next.js 14 (App Router), TailwindCSS, Vercel AI SDK.
  • Uses Code Interpreter SDK from 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

Make sure to give us a star!

Screenshot 2024-04-20 at 22 13 32

Get started

Prerequisites

1. Clone the repository

In your terminal:

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

2. Install the dependencies

Enter the repository:

cd ai-artifacts

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

4. Start the development server

npm run dev

5. Build the web app

npm run build

Customize

Adding custom personas

  1. Make sure E2B CLI is installed and you're logged in.

  2. Add a new folder under sandbox-templates/

  3. Initialize a new template using E2B CLI:

    e2b template init
    

    This will create a new file called e2b.Dockerfile.

  4. 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
  5. Specify a custom start command in e2b.toml:

    start_cmd = "cd /home/user && streamlit run app.py"
  6. 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.
    
  7. 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",
      "lib": [
        "streamlit",
        "pandas",
        "numpy",
        "matplotlib",
        "request",
        "seaborn",
        "plotly"
      ],
      "file": "app.py",
      "instructions": "A streamlit app that reloads automatically.",
      "port": 8501 // can be null
    },

    Provide a template id (as key), name, list of dependencies, entrypoint and a port (optional). You can also add additional instructions that will be given to the LLM.

  8. Optionally, add a new logo under public/thirdparty/templates

Adding custom LLM models

  1. Open lib/models.json in your code editor.

  2. Add a new entry to the models list:

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

    Where id is the model id, name is the model name (visible in the UI), provider is the provider name and providerId is the provider tag (see adding providers below).

Adding custom LLM providers

  1. Open lib/models.ts in your code editor.

  2. Add a new entry to the providerConfigs list:

    Example for fireworks:

    fireworks: () => createOpenAI({ apiKey: apiKey || process.env.FIREWORKS_API_KEY, baseURL: baseURL || 'https://api.fireworks.ai/inference/v1' })(modelNameString),
  3. Optionally, adjust the default structured output mode in the getDefaultMode function:

    if (providerId === 'fireworks') {
      return 'json'
    }
  4. Optionally, add a new logo under public/thirdparty/logos

Contributing

As an open-source project, we welcome contributions from the community. If you are experiencing any bugs or want to add some improvements, please feel free to open an issue or pull request.

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for ai-artifacts

Similar Open Source Tools

For similar tasks

For similar jobs