E2B Fragments｜AI 代码生成与应用预览开源模板

access：来源确认 · git clone https://github.com/e2b-dev/fragments.git

project_type：来源确认 · Fragments by E2B

![E2B Fragments Preview Light](/readme-assets/fragments-light.png#gh-light-mode-only)
![E2B Fragments Preview Dark](/readme-assets/fragments-dark.png#gh-dark-mode-only)

# Fragments by E2B

This is an open-source version of apps like [Anthropic's Claude Artifacts](https://www.anthropic.com/news/claude-3-5-sonnet), Vercel [v0](https://v0.dev), or [GPT Engineer](https://gptengineer.app).

Powered by the [E2B SDK](https://github.com/e2b-dev/code-interpreter).

[→ Try on fragments.e2b.dev](https://fragments.e2b.dev)

## Features

- Based on Next.js 14 (App Router, Server Actions), shadcn/ui, TailwindCSS, Vercel AI SDK.
- Uses the [E2B SDK](https://github.com/e2b-dev/code-interpreter) by [E2B](https://e2b.dev/?utm_source=github&utm_medium=referral&utm_campaign=readme&utm_content=fragments) 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](#adding-custom-personas)):
  - 🔸 Python interpreter
  - 🔸 Next.js
  - 🔸 Vue.js
  - 🔸 Streamlit
  - 🔸 Gradio
- Supported LLM Providers ([add your own](#adding-custom-llm-models)):
  - 🔸 OpenAI
  - 🔸 Anthropic
  - 🔸 Google AI
  - 🔸 Mistral
  - 🔸 Groq
  - 🔸 Fireworks
  - 🔸 Together AI
  - 🔸 Ollama
- Integrates with [Morph](https://morphllm.com/) Apply model for token efficient, accurate and faster code editing.

**Make sure to give us a star!**

<img width="165" alt="Screenshot 2024-04-20 at 22 13 32" src="https://github.com/mishushakov/llm-scraper/assets/10400064/11e2a79f-a835-48c4-9f85-5c104ca7bb49">

## Get started

### Prerequisites

- [git](https://git-scm.com)
- Recent version of [Node.js](https://nodejs.org) and npm package manager
- [E2B API Key](https://e2b.dev/?utm_source=github&utm_medium=referral&utm_campaign=readme&utm_content=fragments)
- LLM Provider API Key

### 1. Clone the repository

In your terminal:

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

### 2. Install the dependencies

Enter the repository:

```
cd fragments
```

Run the following to install the required dependencies:

```
npm i
```

### 3. Set the environment variables

Create a `.env.local` file and set the following:

```sh
# Get your API key here - https://e2b.dev/?utm_source=github&utm_medium=referral&utm_campaign=readme&utm_content=fragments
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_API_KEY=
GOOGLE_AI_API_KEY=
GOOGLE_VERTEX_CREDENTIALS=
MISTRAL_API_KEY=
XAI_API_KEY=

# Ollama server address, enables Ollama models (e.g. http://localhost:11434/api)
OLLAMA_BASE_URL=

### Optional env vars

# (on by default) Get your MORPH key here - https://morphllm.com/dashboard/api-keys
MORPH_API_KEY=

# Domain of the site
NEXT_PUBLIC_SITE_URL=

# Rate limit
RATE_LIMIT_MAX_REQUESTS=
RATE_LIMIT_WINDOW=

# Vercel/Upstash KV (short URLs, rate limiting)
KV_REST_API_URL=
KV_REST_API_TOKEN=

# Supabase (auth)
SUPABASE_URL=
SUPABASE_ANON_KEY=

# PostHog (analytics)
NEXT_PUBLIC_POSTHOG_KEY=
NEXT_PUBLIC_POSTHOG_HOST=

### Disabling functionality (when uncommented)

# Disable API key input in the chat
# NEXT_PUBLIC_NO_API_KEY_INPUT=

# Hide local models from the list of available models
# NEXT_PUBLIC_HIDE_LOCAL_MODELS=
```

### 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](https://e2b.dev/docs/cli?utm_source=github&utm_medium=referral&utm_campaign=readme&utm_content=fragments) is installed and you're logged in.

2. Add a new folder under [sandbox-templates/](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:

    ```Dockerfile
    # 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`:

    ```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](lib/templates.json) in your code editor.

    Add your new template to the list. Here's an example for Streamlit:

    ```json
    "streamlit-developer": {
      "name": "Streamlit developer",
      "lib": [
        "streamlit",
        "pandas",
        "numpy",
        "matplotlib",
        "requests",
        "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.

4. Optionally, add a new logo under [public/thirdparty/templates](public/thirdparty/templates)

### Adding custom LLM models

1. Open [lib/models.json](lib/models.ts) in your code editor.

2. Add a new entry to the models list:

    ```json
    {
      "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](#adding-custom-llm-providers) below).

### Adding custom LLM providers

1. Open [lib/models.ts](lib/models.ts) in your code editor.

2. Add a new entry to the `providerConfigs` list:

    Example for fireworks:

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

3. Optionally, adjust the default structured output mode in the `getDefaultMode` function:

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

4. Optionally, add a new logo under [public/thirdparty/logos](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.

git；较新版本 Node.js 与 npm；E2B API Key；至少一个 LLM 提供方 API Key（OpenAI、Anthropic、Google AI、Mistral、Groq、Fireworks、Together AI、Ollama 等）；可选 MORPH_API_KEY、Vercel/Upstash KV、Supabase、PostHog 配置；自定义运行栈需 E2B CLI 并登录；各服务费用与国内可用性待核验