DoraCodeLens

🧭 Building DoraCodeLens with Kiro – A Step-by-Step Tutorial

Learn how we used Kiro as an AI pair-programmer to create DoraCodeLens, a VS Code compatible IDE extension that turns Python projects into interactive mind maps, database diagrams, and more.

🚀 Introduction

DoraCodeLens is a VS Code super-power for Python developers.
Every developer knows the pain of stepping into an unfamiliar codebase: endless scrolling, manual tracing, and switching between scattered tools. I wanted to flip that friction into clarity. That’s why we built DoraCodeLens: a single workspace inside VS Code where your Python project comes alive as a visual mind map.

✨ Key Features

• Interactive mind maps of modules, classes, methods, and functions — with real-time complexity scores
• Auto-generated database schema diagrams from ORM models
• Rich Git analytics, including contributor timelines and activity insights
• Built-in productivity tools like JSON minify/beautify and a tree viewer

You can install extension from marketplace

---

Behind the scenes, Kiro helped us design, scaffold, and iterate on every feature by providing spec-driven development (requirements, design and tasks) equipped with steering, hooks, MCPs, and vibe coding that made this project possible and truly changed the way we approached building apps in very less time.

This article shows how Kiro’s specs, tasks, steering docs, hooks, and vibe coding helped us build DoraCodeLens from scratch.

🗂️ Prerequisites

• Node.js & npm (for VS Code extension development)
• Python 3.9+ (for analysis engine)
• Git installed & accessible in your PATH
• Kiro IDE

Writing the Spec

Spec Plan first, then build. Create requirements and design before coding starts.
Vibe Chat first, then build. Explore ideas and iterate as you discover needs.

We began by crafting a specification in Kiro describing our goals:

Spec Prompt

Build a VS Code extension Dora Code Lens to analyze Python projects.
Features:
- Mind map of modules, classes, functions + complexity.
- Database-schema diagrams from ORM models.
- JSON tools: minify, beautify, tree view.

Designing the Architecture

Next, Kiro helped us outline the architecture:

• TypeScript client for VS Code integration
• Python backend for static analysis (AST + metrics)
• Cytoscape.js for interactive visualization
• Webview panels for mind maps, DB schemas, and JSON tools
• Kiro proposed a clean folder structure and data flow between the VS Code extension and the Python engine.

Task Breakdown

With the spec and design in place, Kiro created a task list with various sub tasks :

• Create VS Code extension skeleton
• Build AST parser for modules, classes, and functions
• Compute cyclomatic complexity:
• Render mind maps with Cytoscape.js
• Extract database schemas from ORM models
• Add JSON utilities and Git analytics
• Kiro organized them into milestones, making iteration easy.

Finalizing the Task List

Kiro locked the final list after finalizing task list

Steering Docs

• Kiro generated steering documents to guide development:
• Code conventions for TypeScript and Python
• Data models for complexity and schema results
• Event flow between the analysis engine and UI
• These docs kept everyone aligned and reduced backtracking.

Starting a Task

We kicked off our first big task

Completing Tasks

Task is marked as completed with green tick. Similary I kicked off other tasks in task list.

Agent Hooks

Kiro’s agent hooks automated repetitive work.

We have setup Hooks optimized code and documentation.

⚡ Adding Small Features with Vibe Coding

While major pieces of DoraCodeLens (AST parsing, visualization, DB diagrams) were driven by spec-to-code, we relied on Kiro’s vibe coding mode for lightweight changes and UI polish.

Example: SidebarContentProvider

For a quick productivity panel, we opened a short Kiro chat:

Prompt:

Create SidebarContentProvider with "Quick Actions", "Recent Analysis", "Project Overview", and "Analysis Status" sections

🎥 Full Demo

Here’s the DoraCodeLens experience end-to-end — built through a mix of spec-to-code and vibe coding:

Mind Map View – Explore modules, classes, and functions
Database Schema Diagram – Auto-generated from ORM models
Sidebar Quick Actions – Powered by the SidebarContentProvider
JSON Utilities & Git Analytics – All inside VS Code

🎯 Accomplishments We’re Proud Of

Building an end-to-end extension with AST parsing, visualization, and productivity tools

Automating workflows with Kiro’s hooks

Turning a complex repo into an intuitive, navigable landscape

🚧 What’s Next for DoraCodeLens

📈 Support for additional frameworks (FastAPI, Flask, Django plugins)

🧩 Integration with AI-based doc generation

🌐 Shareable mind maps and DB diagrams via web links

⚡ Optimizing large-repo performance

📌 Conclusion

Using Kiro, we built DoraCodeLens in record time — an elegant tool that makes Python project exploration visual, intuitive, and lightning-fast.

🧪 Try building your own VS Code extension with Kiro’s spec-to-code workflows and agent hooks. You’ll be amazed at how much faster complex ideas can become reality!