Claude In A Box

📦 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

🏗️ 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

Development

Start both frontend and backend in development mode:

Or start them individually:

Building

🔧 Configuration

Backend Environment Variables

Create apps/backend/.env:

Frontend Environment Variables

Create apps/frontend/.env.local:

🔄 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…