ai-artifacts

Fragments by E2B: A Comprehensive Guide

Fragments by E2B is an open-source project born from the collaboration of various modern AI technologies and frameworks. The project elegantly marries the power of E2B SDK with renowned platforms such as Anthropic's Claude Artifacts, Vercel, and GPT Engineer. Here, we aim to provide a clear understanding of Fragments by E2B, its features, and how one can get started with it.

Features

Fragments by E2B is built on the robust foundation of several cutting-edge web technologies:

• Technology Stack: It leverages Next.js 14 for server actions and routing, along with TailwindCSS for styling and Vercel AI SDK for AI functionalities.
• Secure Code Execution: Through the use of E2B SDK, code generated by AI is executed securely.
• Dynamic UI: Offers streaming capabilities in the user interface, enhancing interaction fluidity.
• Package Installation: Supports package installations from npm and pip, making it highly versatile.
• Stack Support: Includes several programming environments:
  • Python interpreter
  • Next.js
  • Vue.js
  • Streamlit
  • Gradio
• LLM Provider Compatibility: Offers support for multiple large language models, including:
  • OpenAI
  • Anthropic
  • Google AI
  • Mistral
  • Groq
  • Fireworks
  • Together AI
  • Ollama

Getting Started

Prerequisites

To get started, you'll need the following:

• Git for version control.
• A recent version of Node.js with npm package manager.
• An E2B API Key for secure integrations.
• API keys for your chosen LLM providers.

Setup Steps

1. Clone the Repository: Use git clone https://github.com/e2b-dev/fragments.git to clone the project to your local machine.

2. Install Dependencies: Navigate to the cloned repository and run npm i to install the necessary packages.

3. Set Environment Variables: Create a .env.local file. This file should contain your API keys and other configuration settings like rate limits or the domain of your site.

4. Start Development Server: Use npm run dev to start the development server.

5. Build the Web App: For production, build the app using npm run build.

Customization

Adding Custom Personas

To personalize your environment, you can add custom personas:

1. Ensure you have the E2B CLI installed and are logged in.
2. Create a new folder under sandbox-templates/ for your persona.
3. Initialize a new template with e2b template init, which creates an e2b.Dockerfile.
4. Edit the Dockerfile to specify dependencies and setup processes.
5. Set a custom start command in e2b.toml.
6. Deploy your new template with e2b template build --name <template-name>.
7. Update the lib/templates.json to include your template with necessary configurations.

Adding Custom LLM Models and Providers

Custom models and providers can be added with minor code adjustments:

1. Update lib/models.json to include details about the new model.
2. Specify new providers in lib/models.ts with integration details and modify handling for structured outputs.
3. Optionally, add logos for new models and providers under designated directories.

Contributing

Being an open-source initiative, Fragments by E2B thrives on community contributions. If you identify bugs or have ideas for improvements, you are encouraged to open issues or submit pull requests.

By following these steps and guidelines, users can effectively harness the full potential of Fragments by E2B, fostering a dynamic ecosystem for AI-enabled web development.