Guide: Claude Code Web App

The Claude Code Web App lets you use Claude Code entirely in your browser — no terminal, Node.js, or local setup required. It creates a GitHub repo for your project automatically and gives you a cloud development environment with a built-in terminal and file editor.

This guide covers the web app workflow. For the full workshop walkthrough (which assumes the local CLI), see the workshop page.

When to Use the Web App vs. Local CLI

	Web App	Local CLI
Setup time	~1 minute	~10 minutes (install Node, npm, Claude Code)
Live preview	No — must deploy to see your site	Yes — `npm run dev` at localhost:4321
File editing	Built-in editor + Claude	Your own editor + Claude in terminal
Git	Auto-creates a GitHub repo	You manage git yourself
Best for	Quick starts, non-technical users, workshops	Long-running projects, custom tooling, offline work

The main trade-off: no local dev server. You can’t preview your site in the browser until you deploy it. This makes deployment setup important — do it early.

Getting Started

Go to claude.ai/code and sign in with your Claude account.
Create a project. Click “Create project” — this sets up a GitHub repo and cloud dev environment automatically. You’ll need a GitHub account (free at github.com).

Scaffold your site. In the chat, ask Claude:

Scaffold a new Astro Starlight research wiki in this project.
Run: npm create astro@latest -- --template starlight .
Pick: install dependencies = yes, TypeScript = strictest.
Then run npm run dev to verify it builds.

Or use the QURI starter (includes Mermaid, KaTeX, Tailwind, CLAUDE.md):

Scaffold a research wiki using the QURI starter template.
Run: npx degit quantified-uncertainty/cairn/starters/research-wiki .
Then run npm install && npm run dev.

Set up deployment (next section) so you can actually see your site.

Deploying Your Site

Since the web app can’t preview locally, you need a deployment pipeline. Set this up before you start writing content — you’ll want to see what your site looks like as you work.

Vercel (recommended — zero config)

Vercel requires zero Astro configuration:

Sign up at vercel.com with your GitHub account (free tier available)
Click “Add New Project” → select your repo
Vercel auto-detects Astro — click Deploy
Your site is live at your-project.vercel.app

No workflow files, no manual settings. Deploys in 30-60 seconds. Every push rebuilds automatically.

Other options

Netlify and Cloudflare Pages also work well — see the deployment section on the workshop page for details.

The Web App Workflow

Once deployment is set up, the day-to-day workflow is straightforward:

Build → Commit → Check

Tell Claude what to build or change — create pages, expand content, fix styling
Ask Claude to commit and push — “Commit these changes with the message ‘add policy approaches section’ and push”
Check your deployed site — open your Vercel URL in another tab and refresh after a minute or two

Repeat. Each cycle takes 2-5 minutes depending on deploy speed.

Tips specific to the web app

Commit and push frequently. Since you can’t preview locally, small frequent pushes let you catch problems early. Don’t build 10 pages before checking what they look like.

Use the built-in terminal. The web app has a terminal — you can run npm run build to check for build errors without waiting for a deploy. This catches most problems (broken MDX, bad frontmatter) instantly.

Ask Claude to verify builds. After big changes:

Run npm run build and tell me if there are any errors.

Git operations through Claude. The web app handles git well. You can ask Claude to commit, push, create branches, etc. You can also use the terminal directly for git commands.

Key Differences from Local CLI

If you’re used to the local CLI workflow described on the workshop page, here’s what’s different:

Local CLI	Web App
Three terminal windows (Claude, dev server, general)	One interface — Claude chat + terminal
Live preview at localhost:4321 with hot reload	Deploy to see changes (~1-2 min per cycle)
`claude --dangerously-skip-permissions` for speed	Permissions handled by the web app
Manual git init and remote setup	GitHub repo created automatically
Full control over Node.js version, packages, OS tools	Cloud environment with standard tooling
Works offline	Requires internet connection

The biggest adjustment is the feedback loop. With the local CLI, you see changes instantly in your browser. With the web app, there’s a 1-2 minute deploy delay. Compensate by:

Running npm run build in the terminal to catch errors immediately
Batching related changes before pushing
Keeping your deployed URL open in another tab

Common Issues

“My site isn’t updating after push”

Check the Vercel dashboard for deploy status
Build errors will prevent deployment — ask Claude to run npm run build to check

“Build fails with MDX errors”

Paste the error to Claude: “The build failed with this error: [paste]. Fix it.”
Common causes: unescaped $, <, or { characters in MDX files, or invalid YAML frontmatter

“I want to switch to local development”

Clone your GitHub repo locally: git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
Run npm install and npm run dev — everything works the same locally
You can switch back and forth freely since the repo is the source of truth