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.

$3

| 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... │ └──────────────────┘ │
│ │ │ │
└──────────────┴────────────────────────┴────────────────────────────┘
`

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

---

Features

$3


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

$3

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.

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

---

Quick Start

$3

`bash
npx claudeship
`

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

$3

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

`bash


Check requirements


npx claudeship doctor
`

$3

`bash


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
`

$3

`bash
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)
`

$3

| 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

`bash
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