Back to Blog
Product 5 min read

How KodaDocs Generates Help Docs in Minutes

A look under the hood at how KodaDocs uses AI to turn your running web app into complete, screenshot-rich documentation — automatically.


Most teams delay writing documentation because it’s tedious. You have to take screenshots, write step-by-step instructions, keep everything in sync with your UI. KodaDocs eliminates that entirely.

The Pipeline

KodaDocs works as a Claude Code MCP tool. When you run it, the pipeline does four things:

  1. Route Discovery — Static analysis of your codebase finds every page and endpoint. Next.js, SvelteKit, Django, Laravel — we parse the framework’s routing conventions directly.

  2. Screenshot Capture — Playwright launches headless Chromium, navigates to each route, and captures full-page screenshots. PII is automatically blurred.

  3. AI Article Generation — Each screenshot and its DOM context are sent to Claude, which writes a help article explaining what the page does, how to use it, and what each interactive element means.

  4. Site Assembly — Articles, screenshots, and navigation are assembled into a VitePress static site with search, sidebar navigation, and responsive design.

What You Get

The output is a complete documentation site:

  • One article per route — every page in your app gets its own help doc
  • Annotated screenshots — numbered callouts on interactive elements
  • Search — full-text search across all articles
  • Responsive — works on desktop, tablet, and mobile
  • Deploy-ready — ships as a static site to Cloudflare, Vercel, Netlify, or GitHub Pages

From Code to Docs

The entire process takes minutes, not weeks. Point KodaDocs at your running app, and you get documentation that looks like a team of technical writers spent a month on it.

No templates to fill in. No screenshots to manually crop. No content to write from scratch.

Just run the tool and deploy.

#ai #automation #documentation