Inspiration

Developers live in a fast-paced world where code evolves daily, but documentation often remains a static afterthought. We’ve all felt the pain of jumping into a codebase only to find a stale README or undocumented functions. Kilo Scribe was inspired by a simple goal: what if documentation wasn't a chore, but an automated, living part of the development cycle? We wanted to build a tool that feels like a "Documentation Co-pilot"—always watching, always auditing, and ready to publish at a moment's notice.

What it does

Kilo Scribe is an AI-powered documentation engine integrated directly into the Kilo Code extension. It provides two core functions:

  1. Audit Documentation Debt: It scans your repository to identify missing technical details, outdated explanations, and gaps in your READMEs, providing a "health score" for your docs.
  2. Automated Site Generation: With a single command, it transforms your codebase into a beautiful, navigable documentation site using VitePress. It doesn't just copy files; it understands the code structure, generates relevant content, and configures sidebars and navigation automatically.

How we built it

We leveraged the robust Kilo Code architecture to build Scribe as a "Native Tool."

  1. Backend: Developed in TypeScript, using LLMs to analyze code structures and generate markdown content.
  2. Frontend: Built a seamless React-based chat interface inside the VS Code webview, utilizing a localized i18n system for clear, multi-language user feedback.
  3. Integration: Used Vite and VitePress to handle the heavy lifting of static site generation, combined with custom tool-calling schemas that allow the Kilo AI agent to orchestrate complex documentation tasks.

Challenges we ran into

One of our biggest hurdles was State Synchronization. Ensuring the UI correctly reflected the "Initialize -> Audit -> Generate" flow without leaving the user in "stuck" states required a complete overhaul of our message-handling logic. We also wrestled with Babel Parser Tokens and line-number shifts when dynamically injecting UI components into the chat view—a subtle bug that taught us a lot about the inner workings of modern bundlers.

Accomplishments that we're proud of

  1. One-Click Synergy: We successfully created a workflow where a developer can go from "zero documentation" to a "live documentation portal" with a single AI-guided request.
  2. Minimalist Integration: We’re proud of how Scribe feels like a natural part of the VS Code sidebar, not a bulky add-on.
  3. The Audit Engine: The ability to not just write docs, but to intelligently review them for debt, allows teams to maintain high standards effortlessly.

What we learned

Building Scribe was a masterclass in Agentic Tool Design. We learned that for an AI tool to be useful, it needs to be transparent; users need to see the "Audit Report" before they commit to "Site Generation." We also deepened our understanding of Internationalization (i18n) and the importance of localized tool descriptions for a global developer audience.

What's next for Kilo Scribe - Documentation that keeps pace with your code.

The vision for Kilo Scribe is to become a "Silent Guardian" for code quality.

  1. Auto-Sync on Commit: Automatically updating the documentation site whenever a pull request is merged.
  2. Deep-Link Intelligence: Allowing users to click a piece of documentation and be taken directly to the line of code it describes.
  3. Enhanced Diagrams: Integrating Mermaid.js deeper into the generation process to create automated architecture diagrams that update as the code changes.

Built With

  • agentic-tooling
  • i18next
  • llms
  • lucide-react
  • mermaid.js
  • node.js
  • pnpm
  • react
  • tailwind-css
  • typescript
  • vite
  • vitepress
  • vs-code-api
Share this project:

Updates