A web interface for Claude Code — chat with AI, manage tasks on a Kanban board, run multiple agents in parallel, and automate your entire development workflow. No coding skills required to get started.

Available in: English | Українська | Русский

Claude Code Studio is a browser-based workspace that lets you work with Claude Code — Anthropic's AI coding assistant — without using a terminal. You open it in your browser, type what you want done, and Claude does it.

Think of it as a control panel for your AI assistant:

• 💬 Chat with Claude and see the work happen in real time
• 📋 Create task cards on a Kanban board — Claude picks them up and runs them automatically
• 👥 Run multiple agents working in parallel on different tasks
• 📁 Browse files, paste images, attach documents — all from the browser
• 🔌 Connect MCP servers and custom skill files to extend Claude's capabilities

Watch how the Kanban board works: create a task card for a new release → Claude Code picks it up → runs the task → card moves to Done. At the end you can see the actual GitHub release before and after — the agent really did ship the new version.

Can't see the video? Download and watch it directly

A clean, secure login page. On first launch you set your own password.

Real-time conversation with Claude Code. Supports markdown, code blocks with syntax highlighting, MCP server toggles, skill presets, file browser, and model selector — all in one dark-themed page.

Drag a card to "To Do" and Claude starts working on it automatically. See live output, retry on crash, link cards to chat sessions, and track everything in one place.

Requirements: Node.js 18+ and the claude CLI installed and logged in.

# 1. Run it instantly (no installation needed)
npx github:Lexus2016/claude-code-studio

# 2. Open your browser
# → http://localhost:3000

# 3. Set your password on first launch, then start chatting

That's it. To run it again later, just repeat step 1.

npx github:Lexus2016/claude-code-studio

Update to latest version:

npx github:Lexus2016/claude-code-studio@latest

npm install -g github:Lexus2016/claude-code-studio
claude-code-chat

Update:

npm install -g github:Lexus2016/claude-code-studio@latest

git clone https://github.com/Lexus2016/claude-code-studio.git
cd claude-code-studio
npm install
cp .env.example .env
node server.js

Open http://localhost:3000 in your browser.

Update:

git pull && npm install && node server.js

git clone https://github.com/Lexus2016/claude-code-studio.git
cd claude-code-studio
cp .env.example .env
docker compose up -d --build

Open http://localhost:3000. Logs: docker compose logs -f claude-chat

Update:

git pull && docker compose up -d --build

Go to /kanban in your browser (or click the board icon in the sidebar).

1. Create a card — give it a title and describe what Claude should do
2. Move it to "To Do" — Claude picks it up automatically and starts working
3. Watch the progress — click the card to see the live chat output
4. Card moves to "Done" — when the task is complete, the card advances on its own

When creating a card you choose whether to link it to a new session or an existing one:

Example — parallel (independent tasks):

Card: "Add login page"          → New session
Card: "Redesign dashboard"      → New session

Both run at the same time in separate Claude processes.

Example — sequential (dependent tasks):

Card: "Create /users API"       → New session #14
Card: "Write tests for the API" → Existing session #14

Card 2 waits for Card 1 to finish, then runs with full context of what was built.

Rule of thumb: if you'd ask these in one chat conversation, link them to the same session. If you'd open two separate chats, use new sessions.

If you run multiple Claude Code processes on the same project at the same time, they might try to edit the same file simultaneously — which can cause data loss.

Claude Code Studio solves this automatically with file-lock hooks:

• Before Claude edits any file → it checks if another Claude process is already editing it
• If yes → it waits until the file is free (checks every 3 seconds)
• After editing → it releases the lock so the next process can continue
• Crashed processes → stale locks are detected and cleared automatically

Claude A (task 1)          Claude B (task 2)
──────────────────         ──────────────────────────
Edit server.js             Edit server.js  ← same time
→ acquires lock            → waits (lock is taken)
→ edits file ✓              ⏳ checking every 3s...
→ releases lock            → lock free! acquires it
                           → edits file ✓

Hooks are installed automatically on npm install. Works on macOS, Linux, and Docker.

Copy .env.example to .env and adjust as needed:

PORT=3000                    # Port to run on
WORKDIR=./workspace          # Where Claude works (your project files)
MAX_TASK_WORKERS=5           # Max parallel Claude processes for Kanban
CLAUDE_TIMEOUT_MS=1800000    # Max time per task in ms (default: 30 minutes)
TRUST_PROXY=false            # Set true if running behind nginx/Caddy
LOG_LEVEL=info               # Logging: error | warn | info | debug

For SDK engine (optional, if you want to use an API key instead of claude CLI):

ANTHROPIC_API_KEY=sk-ant-...

Open the left panel → ⚡ MCP → + Add MCP

Open the left panel → 🧠 Skills → + Upload .md

Or drop .md files directly into the skills/ folder and restart.

Left panel → 🗂 Projects → + New Project

Each project has its own working directory. Sessions are scoped to projects.

• Passwords are hashed with bcrypt (12 rounds) — never stored in plain text
• Auth tokens: 32-byte random hex, 30-day expiry, server-side storage
• WebSocket protected by httpOnly cookie
• API keys never sent to the browser
• Helmet.js security headers on all responses
• Rate limiting on login endpoints

npm run dev    # auto-reload on file changes (node --watch)
npm start      # production start

No build tools, no TypeScript, no linting config — vanilla JS frontend, plain Node.js backend. Open public/index.html to see the entire frontend.

claude-code-studio/
├── server.js           ← main server (Express + WebSocket)
├── auth.js             ← login, password hashing, session tokens
├── claude-cli.js       ← spawns claude subprocess, parses output stream
├── config.json         ← MCP servers + skills catalog
├── public/
│   ├── index.html      ← entire frontend (single file: HTML + CSS + JS)
│   └── auth.html       ← login/setup page
├── skills/             ← .md skill files loaded into Claude's system prompt
├── data/               ← runtime data (gitignored)
│   ├── chats.db        ← SQLite database (sessions + messages)
│   └── auth.json       ← password hash
└── workspace/          ← default Claude working directory (gitignored)

MIT