Kodadocs
About
AI-generated help docs for your web app in minutes, not weeks. KodaDocs is a Claude Code MCP server that reads your codebase, captures screenshots with a headless browser, annotates UI elements, writes documentation articles, and assembles a complete VitePress help center. Suppor
Details
- Author
- Kodadocs
- Downloads
- 389
- Categories
- Knowledge Base, Developer Tools
Jump to
- Auto-detects web framework from project files
- Discovers routes via static analysis
- Analyzes code for patterns and error handling
- Captures headless screenshots with auth and PII blur
- Annotates UI elements with numbered callouts
- Deploys to Cloudflare, Vercel, Netlify, or GitHub Pages
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
KodadocsCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
Install the package and Chromium browser, then ask Claude in Claude Code: “Generate help docs for my app.” The server handles the entire pipeline from discovery to deployment.
detect_framework
Detect the web framework of a project at the given path. Returns the framework name (e.g., 'Next.js', 'Django', 'React'). Uses heuristic detection from package.json, requirements.txt, etc.
capture_screenshots
Capture screenshots for discovered routes using Playwright. Launches headless Chromium, authenticates if auth is provided, navigates to each route, captures screenshots, and extracts DOM elements. Returns JSON with screenshots dict and dom_elements dict.
annotate_screenshots
Annotate screenshots with numbered callouts using Pillow. Takes screenshot directory and dom_elements dict (route -> element list). Each element needs: role, name, bounds {x, y, width, height}. Creates annotated copies in screenshots_dir/annotated/. Returns JSON with route -> annotated image path.
assemble_vitepress
Assemble a VitePress static site from generated articles and screenshots. Creates index page, article markdown files, VitePress config, theme with brand color, and package.json. Pass theme_name to use a built-in theme preset (default, professional, minimal, playful, dark-modern, docs-classic). Pro themes require a valid license_key.
save_manifest
Save pipeline state to .kodadocs/run_manifest.json.
load_manifest
Load existing pipeline state from .kodadocs/run_manifest.json.
deploy_site
Deploy the generated VitePress site to a hosting provider. Supported providers: cloudflare, vercel, netlify, github-pages, kodadocs. For kodadocs provider: deploys to <site_slug>.kodadocs.com. Requires license_key (or KODADOCS_LICENSE_KEY env var) and site_slug. Pass license_key for other providers to remove the KodaDocs badge.
discover_routes
Discover application routes, services, and metadata via static analysis. Returns JSON with discovered_routes, route_metadata, detected_services, ui_components, and deployment_platform. Supports Next.js, SvelteKit, Nuxt, React Router, and WordPress. Pass app_url to enable Playwright crawler fallback when static analysis finds few routes.
analyze_codebase
Analyze codebase structure using tree-sitter parsing. Extracts code chunks (functions, classes), error patterns, and data models (Prisma, Drizzle). No AI calls — fully deterministic. Returns JSON with code_chunks, error_patterns, data_models, and file counts.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"kodadocs": {
"kodadocs": {
"command": "uvx",
"args": [
"kodadocs",
"mcp"
]
}
}
}
}McpServers
{
"kodadocs": {
"command": "uvx",
"args": [
"kodadocs",
"mcp"
]
}
}What is KodaDocs?
KodaDocs is an open-source MCP server for Claude Code that generates complete help documentation for any web application. Tell Claude "Generate docs for my app" and get a polished help center with annotated screenshots and AI-written articles. ## MCP Tools | Tool | Description | |------|-------------| |detect_framework | Auto-detect web framework from project files |
| discover_routes | Static analysis of routes, services, and metadata |
| analyze_codebase | Tree-sitter parsing for code chunks, error patterns, data models |
| capture_screenshots | Headless browser capture with auth support and PII blur |
| annotate_screenshots | Numbered callouts on UI elements |
| assemble_vitepress | Build complete VitePress site from articles + screenshots |
| deploy_site | Deploy to Cloudflare, Vercel, Netlify, or GitHub Pages |
| save_manifest / load_manifest | Persist and load pipeline state |
## How It Works
1. Discovery — Detects framework, discovers routes from source code
2. Capture — Launches headless browser, authenticates, captures screenshots
3. Annotation — Draws numbered callouts on UI elements
4. Doc Writing — Claude writes all articles (Getting Started, Feature Guides, FAQ, Troubleshooting)
5. Assembly — Assembles VitePress site with branding, search, and mobile layout
6. Deploy — Deploys to your hosting provider of choice
## Supported Frameworks
Next.js, Nuxt, React, Vue, Angular, SvelteKit, Remix, Astro, Django, Flask, FastAPI, Rails, Laravel, Express, Hono,
WordPress, and more.
## Quick Start
Install and add to Claude Code:
```bash
pip install kodadocs
playwright install chromium
Then tell Claude: "Generate help docs for my app"
Links
- https://kodadocs.com
- https://kodadocs-help.kodadocs.com/
- https://pypi.org/project/kodadocs/Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
