Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (claudeship) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ClaudeShip

AI-Powered Web Development Environment
Describe what you want → Watch AI build it → See live preview

Website • Quick Start • Features

What is ClaudeShip?

ClaudeShip is an AI-powered development environment that lets you build web applications using natural language.

Instead 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.

Why ClaudeShip?

Traditional Way	ClaudeShip
Write code manually	Describe in natural language
Build → Refresh → Repeat	Real-time live preview
Debug error messages	AI auto-fixes issues
Search documentation	Solve through conversation

How It Works

┌─────────────────────────────────────────────────────────────────────┐
│                        ClaudeShip Interface                         │
├──────────────┬────────────────────────┬────────────────────────────┤
│              │                        │                            │
│   📁 Files   │      💬 Chat           │      👁 Live Preview       │
│              │                        │                            │
│   src/       │  You: "Create a       │   ┌──────────────────┐     │
│   ├─ app/    │        todo app"      │   │   My Todo List   │     │
│   ├─ comp/   │                        │   │   ☐ Learn AI     │     │
│   └─ lib/    │  AI: Creating todo     │   │   ☑ Setup env    │     │
│              │      app with...       │   └──────────────────┘     │
│              │                        │                            │
└──────────────┴────────────────────────┴────────────────────────────┘

💬 Chat — Describe what you want to build in natural language
⚡ Generate — AI creates code, installs packages, sets up file structure
👁 Preview — Changes are reflected in the live preview in real-time
🔄 Iterate — Keep chatting to add features and make changes

Features

🗣 Natural Language Development

"Create a login page"
"Add a dark mode toggle"
"Connect to a database and show user list"

💾 Conversation Memory

Your chat history is saved, so you can continue where you left off. No need to re-explain context — just keep the conversation going naturally.

⚡ Auto-Refresh Preview

Preview automatically refreshes when code changes. Like Replit, it detects file changes and reflects them instantly.

📂 File Explorer

Browse your project structure in a tree view. Click any file to view its contents with syntax highlighting.

🔧 Full-Stack Support

Configuration	Frontend	Backend	Database
Frontend Only	Next.js 15	—	—
+ Express	Next.js 15	Express + Prisma	SQLite
+ FastAPI	Next.js 15	FastAPI + SQLAlchemy	SQLite

🌐 Internationalization

English and Korean UI support. Switch languages anytime from the header.

📱 Responsive Preview

Test your app on different device sizes. Switch between Desktop, Tablet (768px), and Mobile (375px) views instantly.

🖥 Console & Error Overlay

View real-time server logs and browser console output. Build errors are displayed directly on the preview with file location and stack trace.

🗄 Database Viewer

Browse and manage your SQLite database directly in the UI. View tables, execute SQL queries, and edit data without leaving ClaudeShip.

⏪ Checkpoint System

Git-based checkpoint system for easy rollback. Create snapshots of your work and restore to any previous state with one click.

🧪 Browser Testing

Create and run automated browser tests using Playwright. Define test scenarios with clicks, form fills, and assertions.

🔐 Environment Variables

Manage .env files through a visual editor. Sensitive values are masked by default for security.

Quick Start

One Command

npx claudeship

Open http://localhost:13000 and start building!

Prerequisites

Node.js >= 20
pnpm >= 9
Claude Code CLI — claude.ai/code

# Check requirements
npx claudeship doctor

Installation Options

# Option 1: npx (Recommended)
npx claudeship

# Option 2: Global install
npm install -g claudeship
claudeship start

# Option 3: From source
git clone https://github.com/nicered/claudeship.git
cd claudeship
pnpm install
pnpm dev

CLI Options

claudeship              # Start ClaudeShip
claudeship doctor       # Check system requirements
claudeship -p 3000      # Custom web port
claudeship -s 4000      # Custom API port

Example Prompts

"Create a blog with markdown support and dark theme"

"Build a dashboard showing sales charts"

"Make a kanban board with drag-and-drop tasks"

"Create a user authentication API with JWT"

"Add form validation with error messages to the signup page"

Architecture

claudeship/
├── apps/
│   ├── web/              # Next.js 15 frontend
│   │   ├── components/   # Chat, Preview, FileExplorer
│   │   ├── stores/       # Zustand state
│   │   └── lib/          # Utilities, i18n
│   │
│   └── server/           # NestJS 10 backend
│       ├── chat/         # Claude Code CLI integration
│       ├── project/      # Project management
│       ├── preview/      # Dev server + file watcher
│       └── file/         # File tree API
│
├── packages/
│   └── shared/           # TypeScript types
│
└── projects/             # User projects (gitignored)

Tech Stack

Layer	Technology
Frontend	Next.js 15, TypeScript, shadcn/ui, Tailwind CSS, Zustand
Backend	NestJS 10, Prisma, SQLite, SSE
AI	Claude Code CLI (streaming)
File Watch	chokidar

Development

pnpm dev          # Start all dev servers
pnpm build        # Production build
pnpm type-check   # TypeScript check
pnpm lint         # Run ESLint

Contributing

Contributions are welcome! Please follow the commit message convention:

[TYPE] Title

- Bullet point (max 4 lines)

Types: FEAT, FIX, DOCS, STYLE, REFACTOR, TEST, CHORE, PERF, CI, BUILD

License

MIT