![\"ClaudeShip\"](\"https://raw.githubusercontent.com/Nicered/ClaudeShip/main/docs/public/logo.svg\"){kind=logo}
\n\n \n
\n AI-Powered Web Development Environment
\n Describe what you want → Watch AI build it → See live preview\n
\n ![\"npm\"](\"https://img.shields.io/npm/v/claudeship.svg\")
\n ![\"Node.js\"](\"https://img.shields.io/badge/Node.js-20+-339933?logo=node.js&logoColor=white\"){kind=icon}
![\"TypeScript\"](\"https://img.shields.io/badge/TypeScript-5.x-3178C6?logo=typescript&logoColor=white\"){kind=icon}
![\"License\"](\"https://img.shields.io/badge/License-MIT-yellow.svg\"){kind=icon}
\n
\n Website •\n Quick Start •\n Features\n
\n\n---\n\n## What is ClaudeShip?\n\nClaudeShip is an **AI-powered development environment** that lets you build web applications using natural language.\n\nInstead of writing code line by line, simply describe what you want to build. The AI generates code, installs packages, and runs your app in real-time. Think of it as **Replit + Cursor** combined into a local development environment.\n\n### Why ClaudeShip?\n\n| Traditional Way | ClaudeShip |\n|----------------|------------|\n| Write code manually | Describe in natural language |\n| Build → Refresh → Repeat | Real-time live preview |\n| Debug error messages | AI auto-fixes issues |\n| Search documentation | Solve through conversation |\n\n---\n\n## How It Works\n\n```\n┌─────────────────────────────────────────────────────────────────────┐\n│ ClaudeShip Interface │\n├──────────────┬────────────────────────┬────────────────────────────┤\n│ │ │ │\n│ 📁 Files │ 💬 Chat │ 👁 Live Preview │\n│ │ │ │\n│ src/ │ You: \"Create a │ ┌──────────────────┐ │\n│ ├─ app/ │ todo app\" │ │ My Todo List │ │\n│ ├─ comp/ │ │ │ ☐ Learn AI │ │\n│ └─ lib/ │ AI: Creating todo │ │ ☑ Setup env │ │\n│ │ app with... │ └──────────────────┘ │\n│ │ │ │\n└──────────────┴────────────────────────┴────────────────────────────┘\n```\n\n1. **💬 Chat** — Describe what you want to build in natural language\n2. **⚡ Generate** — AI creates code, installs packages, sets up file structure\n3. **👁 Preview** — Changes are reflected in the live preview in real-time\n4. **🔄 Iterate** — Keep chatting to add features and make changes\n\n---\n\n## Features\n\n### 🗣 Natural Language Development\n```\n\"Create a login page\"\n\"Add a dark mode toggle\"\n\"Connect to a database and show user list\"\n```\n\n### 💾 Conversation Memory\nYour chat history is saved, so you can continue where you left off. No need to re-explain context — just keep the conversation going naturally.\n\n### ⚡ Auto-Refresh Preview\nPreview automatically refreshes when code changes. Like Replit, it detects file changes and reflects them instantly.\n\n### 📂 File Explorer\nBrowse your project structure in a tree view. Click any file to view its contents with syntax highlighting.\n\n### 🔧 Full-Stack Support\n\n| Configuration | Frontend | Backend | Database |\n|---------------|----------|---------|----------|\n| **Frontend Only** | Next.js 15 | — | — |\n| **+ Express** | Next.js 15 | Express + Prisma | SQLite |\n| **+ FastAPI** | Next.js 15 | FastAPI + SQLAlchemy | SQLite |\n\n### 🌐 Internationalization\nEnglish and Korean UI support. Switch languages anytime from the header.\n\n### 📱 Responsive Preview\nTest your app on different device sizes. Switch between Desktop, Tablet (768px), and Mobile (375px) views instantly.\n\n### 🖥 Console & Error Overlay\nView real-time server logs and browser console output. Build errors are displayed directly on the preview with file location and stack trace.\n\n### 🗄 Database Viewer\nBrowse and manage your SQLite database directly in the UI. View tables, execute SQL queries, and edit data without leaving ClaudeShip.\n\n### ⏪ Checkpoint System\nGit-based checkpoint system for easy rollback. Create snapshots of your work and restore to any previous state with one click.\n\n### 🧪 Browser Testing\nCreate and run automated browser tests using Playwright. Define test scenarios with clicks, form fills, and assertions.\n\n### 🔐 Environment Variables\nManage `.env` files through a visual editor. Sensitive values are masked by default for security.\n\n---\n\n## Quick Start\n\n### One Command\n\n```bash\nnpx claudeship\n```\n\nOpen [http://localhost:13000](http://localhost:13000) and start building!\n\n### Prerequisites\n\n- **Node.js** >= 20\n- **pnpm** >= 9\n- **Claude Code CLI** — [claude.ai/code](https://claude.ai/code)\n\n```bash\n# Check requirements\nnpx claudeship doctor\n```\n\n### Installation Options\n\n```bash\n# Option 1: npx (Recommended)\nnpx claudeship\n\n# Option 2: Global install\nnpm install -g claudeship\nclaudeship start\n\n# Option 3: From source\ngit clone https://github.com/nicered/claudeship.git\ncd claudeship\npnpm install\npnpm dev\n```\n\n### CLI Options\n\n```bash\nclaudeship # Start ClaudeShip\nclaudeship doctor # Check system requirements\nclaudeship -p 3000 # Custom web port\nclaudeship -s 4000 # Custom API port\n```\n\n---\n\n## Example Prompts\n\n```\n\"Create a blog with markdown support and dark theme\"\n\n\"Build a dashboard showing sales charts\"\n\n\"Make a kanban board with drag-and-drop tasks\"\n\n\"Create a user authentication API with JWT\"\n\n\"Add form validation with error messages to the signup page\"\n```\n\n---\n\n## Architecture\n\n```\nclaudeship/\n├── apps/\n│ ├── web/ # Next.js 15 frontend\n│ │ ├── components/ # Chat, Preview, FileExplorer\n│ │ ├── stores/ # Zustand state\n│ │ └── lib/ # Utilities, i18n\n│ │\n│ └── server/ # NestJS 10 backend\n│ ├── chat/ # Claude Code CLI integration\n│ ├── project/ # Project management\n│ ├── preview/ # Dev server + file watcher\n│ └── file/ # File tree API\n│\n├── packages/\n│ └── shared/ # TypeScript types\n│\n└── projects/ # User projects (gitignored)\n```\n\n### Tech Stack\n\n| Layer | Technology |\n|-------|------------|\n| Frontend | Next.js 15, TypeScript, shadcn/ui, Tailwind CSS, Zustand |\n| Backend | NestJS 10, Prisma, SQLite, SSE |\n| AI | Claude Code CLI (streaming) |\n| File Watch | chokidar |\n\n---\n\n## Development\n\n```bash\npnpm dev # Start all dev servers\npnpm build # Production build\npnpm type-check # TypeScript check\npnpm lint # Run ESLint\n```\n\n---\n\n## Contributing\n\nContributions are welcome! Please follow the commit message convention:\n\n```\n[TYPE] Title\n\n- Bullet point (max 4 lines)\n```\n\n**Types**: `FEAT`, `FIX`, `DOCS`, `STYLE`, `REFACTOR`, `TEST`, `CHORE`, `PERF`, `CI`, `BUILD`\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}