From Zero to Help Docs: A Step-by-Step Guide

This guide walks you through generating a complete documentation site for your web application using KodaDocs.

Prerequisites

• A running web application (any framework)
• Claude Code installed (npm install -g @anthropic-ai/claude-code)
• Your app accessible at a local or public URL

Step 1: Install KodaDocs

uvx kodadocs mcp

KodaDocs installs as a Python package and registers itself as a Claude Code MCP tool.

Step 2: Start Your App

Make sure your web application is running and accessible. KodaDocs needs to navigate to each page to capture screenshots.

# Example: Next.js
npm run dev
# Your app is now at http://localhost:3000

Step 3: Generate Documentation

Open Claude Code in your project directory and tell it to generate docs:

Generate help documentation for my app running at http://localhost:3000

Claude Code will use KodaDocs to:

• Discover all routes in your codebase
• Launch a browser and capture screenshots
• Generate help articles for each page
• Assemble everything into a VitePress site

Step 4: Preview Your Docs

Once generation completes, preview the site locally:

cd docs-output
npm install && npm run dev

You’ll see a full documentation site with sidebar navigation, search, and annotated screenshots.

Step 5: Deploy

Deploy to any static hosting provider:

# Cloudflare Pages
npx wrangler pages deploy dist

# Vercel
vercel deploy

# Netlify
netlify deploy --prod

Or use KodaDocs’ built-in hosting to get a yourapp.kodadocs.com subdomain.

What’s Next

• Customize the theme — Pro Kit includes 6 premium themes
• Add authentication — Capture pages behind login with the auth parameter
• Set up CI/CD — Re-generate docs automatically when your app changes

The entire process takes about 5 minutes for a typical application with 10-20 routes.