📦 Claude in a Box

A ChatGPT Canvas-style interface for Claude Code running in E2B sandboxes. Build, create, and code anything with AI-powered development in secure, isolated environments.

✨ Features

• 🤖 Claude Code Integration - Full Claude Code AI assistant running in sandboxes
• 🔒 E2B Sandboxes - Secure, isolated development environments
• 🎨 Canvas Interface - Split-screen design inspired by ChatGPT Canvas
• ⚡ Real-time Preview - Live updates of your code in action
• 🎭 Block Design System - Beautiful, chunky UI with Anthropic colors
• 📱 Responsive Layout - Works on desktop and mobile
• 🔄 Smart Session Management - Automatic sandbox creation and cleanup
• 🚀 Streaming Responses - Real-time code execution output

Project Structure

├── apps/
│   ├── frontend/          # Next.js 15 with App Router
│   └── backend/           # Hono.js API with Bun
├── packages/
│   ├── shared/            # Shared types and utilities
│   └── eslint-config/     # Shared ESLint configuration
└── package.json           # Workspace configuration

🏗️ Tech Stack

• Frontend: Next.js 15 (App Router), React, TypeScript, Tailwind CSS v4
• Backend: Hono.js, Bun runtime, TypeScript
• AI: Claude Code (Anthropic) running in E2B sandboxes
• Sandboxes: E2B secure cloud development environments
• Styling: Custom blocks.css design system + shadcn/ui
• Package Manager: Bun with workspaces
• Deployment: Vercel (frontend), Railway/Render (backend)

Getting Started

Prerequisites

• Bun (latest version)
• E2B API Key - Sign up for E2B account
• Anthropic API Key - For Claude Code access

Installation

# Clone the repository
git clone https://github.com/yourusername/claude-in-a-box.git
cd claude-in-a-box

# Install all dependencies
bun install

# Set up environment variables
cp apps/backend/.env.example apps/backend/.env
cp apps/frontend/.env.example apps/frontend/.env.local

# Edit the .env files with your API keys

Development

Start both frontend and backend in development mode:

# Start all apps in development mode
bun run dev

Or start them individually:

# Frontend (http://localhost:3004)
cd apps/frontend && bun run dev

# Backend (http://localhost:3003)
cd apps/backend && bun run dev

Building

# Build all apps
bun run build

# Build individual apps
bun run --filter=frontend build
bun run --filter=backend build

🔧 Configuration

Backend Environment Variables

Create apps/backend/.env:

# E2B Configuration
E2B_API_KEY=your_e2b_api_key_here

# Anthropic Configuration  
ANTHROPIC_API_KEY=your_anthropic_api_key_here

# Server Configuration
PORT=3003
NODE_ENV=development

Frontend Environment Variables

Create apps/frontend/.env.local:

# Backend API URL
NEXT_PUBLIC_API_URL=http://localhost:3003

🔄 API Endpoints

Sandbox Management

• POST /api/sandbox/create - Create a new E2B sandbox session
• GET /api/sandbox/:sessionId/status - Get sandbox status
• DELETE /api/sandbox/:sessionId - Destroy sandbox session

Code Execution

• POST /api/sandbox/:sessionId/execute - Execute code in sandbox
• POST /api/sandbox/:sessionId/execute/stream - Stream code execution (SSE)

🎯 How It Works

1. Welcome Screen: Users start typing to automatically prepare a sandbox
2. Smart Sandbox Creation: E2B sandboxes created proactively when typing begins
3. Claude Code Execution: Messages sent to Claude Code running in the sandbox
4. Live Preview: Generated code immediately visible in canvas iframe
5. Session Management: Sandboxes automatically cleaned up after 30 minutes

🎨 Design System

The project uses a custom "blocks.css" design system featuring:

• Chunky borders (4px) for a bold, modern look
• Block shadows that create a 3D effect
• Claude/Anthropic colors (stone tones with orange accents)
• Hover animations with subtle transforms
• Consistent spacing and typography hierarchy

⚠️ Current Limitations

This is an MVP (Minimum Viable Product) with several important limitations:

• No Database - Messages and conversations are not persisted
• No Session Persistence - Refreshing the page loses all chat history
• No User Authentication - No user accounts or session management
• No File Management - Cannot save/load projects or files permanently
• No Collaborative Features - Single-user experience only
• No Chat History - Previous conversations are lost on page refresh
• No Project Templates - No starter templates or examples
• Limited Error Handling - Basic error states without detailed debugging

🗺️ Roadmap

Phase 1: Core Persistence 🎯

• Database Integration - Add PostgreSQL/Supabase for data persistence
• Message History - Store and retrieve chat conversations
• Session Management - Persist sessions across page refreshes
• Project Saving - Save and load coding projects

Phase 2: User Experience 👤

• User Authentication - Sign up/login with multiple providers
• User Profiles - Personal dashboards and settings
• Project Management - Organize projects into folders/collections
• Template Gallery - Pre-built starter templates and examples

Phase 3: Advanced Features 🚀

• Real-time Collaboration - Multiple users working on same project
• File Explorer - Browse and manage files within sandboxes
• Git Integration - Version control and GitHub synchronization
• Export Options - Download projects as ZIP files

Phase 4: Enterprise 🏢

• Team Workspaces - Shared team environments
• Admin Dashboard - Usage analytics and user management
• Custom Deployments - Deploy projects to various platforms
• API Access - Programmatic access to Claude in a Box

🛠️ Development Scripts

• bun run dev - Start all apps in development mode
• bun run build - Build all apps for production
• bun run start - Start all apps in production mode
• bun run lint - Lint all apps
• bun run type-check - Type check all apps
• bun run clean - Clean all build artifacts

🚢 Deployment

Frontend (Vercel)

1. Connect GitHub repo to Vercel
2. Set environment variables in dashboard
3. Deploy automatically on push

Backend (Railway/Render)

1. Connect GitHub repo to platform
2. Set environment variables
3. Deploy automatically on push

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Anthropic for Claude AI
• E2B for secure sandbox environments
• blocks.css for design inspiration
• ChatGPT Canvas for interface inspiration

🔗 Links

• E2B Documentation
• Anthropic API Documentation
• Next.js Documentation
• Hono.js Documentation

---

Built with ❤️ using Claude Code in E2B Sandboxes