juancgarza

Claude In A Box — Design skill for Claude Code

Design community intermediate

A ChatGPT Canvas-style interface for Claude Code running in E2B sandboxes.

How to install Claude In A Box

This entry records only its repository, not the path inside it, so there is no exact command to give. Open juancgarza/claude-in-a-box and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude In A Box does

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.

Alternatives in Design

Canvas Design — Create beautiful visual art in PNG and PDF documents using design philosophy 94.1k ★
Planning With Files — Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B 17.4k ★
Explanatory Output Style — Educational output mode with insights about implementation choices 14k ★

README

📦 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

...