Welcome to the world of E2B AI Artifacts! This comprehensive guide will walk you through the installation, configuration, and customization of this open-source version of Anthropics Claude Artifacts. If you’re ready to enhance your AI development experience, let’s dive in!

What are E2B AI Artifacts?

E2B AI Artifacts is an innovative toolkit powered by the E2B Sandbox SDK and Code Interpreter SDK, making it easier for developers to integrate various AI technologies. It comes equipped with a clean interface built on Next.js 14 with a stylish touch of TailwindCSS. The platform allows the execution of AI-generated code securely, enabling developers to experiment freely.

Features

• Based on Next.js 14 (App Router) and TailwindCSS
• Integration with the Code Interpreter SDK from E2B for secure code execution
• Real-time streaming in the user interface
• Support for a variety of programming stacks, including Python, Vue.js, and more
• Flexible integration with popular LLM providers like OpenAI, Anthropic, Google AI, and others

Getting Started

To embark on your journey with E2B AI Artifacts, follow these straightforward steps:

Prerequisites

• Git installed on your machine
• Recent version of Node.js and npm package manager
• A valid E2B API Key
• LLM Provider API Key

1. Clone the Repository

Open your terminal and run:

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

2. Install Dependencies

Navigate into the repository and install the required packages:

cd ai-artifacts
npm i

3. Set Environment Variables

Create a .env.local file and configure your API keys:

# Get your API key here - https://e2b.dev
E2B_API_KEY=your-e2b-api-key
OPENAI_API_KEY=
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

Running your application is as simple as typing:

npm run dev

5. Build the Web App

Once you’re ready to go live, build the application using:

npm run build

Customization

To get the most out of E2B AI Artifacts, you can customize it by adding custom personas or LLM models.

Adding Custom Personas

1. Ensure E2B CLI is installed and you are logged in.
2. Create a new folder under sandbox-templates.
3. Initialize a new template:

e2b template init

4. Edit the e2b.Dockerfile and specify your dependencies.
5. Set a custom start command in e2b.toml.
6. Build the template using:

e2b template build --name template-name

7. Update lib/templates.json with your new template details.

Adding Custom LLM Models and Providers

Adding custom models and providers involves editing configuration files like lib/models.json and lib/models.ts. Refer to the documentation for precise instructions on adding new entries!

Troubleshooting

If you encounter any issues while setting up your E2B AI Artifacts, consider the following troubleshooting tips:

• Double-check that your API keys are correctly set in the environment file.
• Ensure that all dependencies have been installed without errors.
• If the server fails to start, check your terminal for error messages indicating missing packages or syntax issues.
• Verify your network connection if you’re facing issues with API calls.
• For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Now you’re ready to explore and innovate with E2B AI Artifacts. Happy coding!