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.
- 🤖 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
├── 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
- 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)
- Bun (latest version)
- E2B API Key - Sign up for E2B account
- Anthropic API Key - For Claude Code access
# 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 keysStart both frontend and backend in development mode:
# Start all apps in development mode
bun run devOr start them individually:
# Frontend (http://localhost:3004)
cd apps/frontend && bun run dev
# Backend (http://localhost:3003)
cd apps/backend && bun run dev# Build all apps
bun run build
# Build individual apps
bun run --filter=frontend build
bun run --filter=backend buildCreate 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=developmentCreate apps/frontend/.env.local:
# Backend API URL
NEXT_PUBLIC_API_URL=http://localhost:3003POST /api/sandbox/create- Create a new E2B sandbox sessionGET /api/sandbox/:sessionId/status- Get sandbox statusDELETE /api/sandbox/:sessionId- Destroy sandbox session
POST /api/sandbox/:sessionId/execute- Execute code in sandboxPOST /api/sandbox/:sessionId/execute/stream- Stream code execution (SSE)
- Welcome Screen: Users start typing to automatically prepare a sandbox
- Smart Sandbox Creation: E2B sandboxes created proactively when typing begins
- Claude Code Execution: Messages sent to Claude Code running in the sandbox
- Live Preview: Generated code immediately visible in canvas iframe
- Session Management: Sandboxes automatically cleaned up after 30 minutes
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
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
- 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
- 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
- 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
- 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
bun run dev- Start all apps in development modebun run build- Build all apps for productionbun run start- Start all apps in production modebun run lint- Lint all appsbun run type-check- Type check all appsbun run clean- Clean all build artifacts
- Connect GitHub repo to Vercel
- Set environment variables in dashboard
- Deploy automatically on push
- Connect GitHub repo to platform
- Set environment variables
- Deploy automatically on push
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Anthropic for Claude AI
- E2B for secure sandbox environments
- blocks.css for design inspiration
- ChatGPT Canvas for interface inspiration
Built with ❤️ using Claude Code in E2B Sandboxes