DEV Community

Cover image for How I Built an AI Architecture Visualizer in 8 Hours (And Bypassed GitHub API Limits)
Yash Bodade
Yash Bodade

Posted on

How I Built an AI Architecture Visualizer in 8 Hours (And Bypassed GitHub API Limits)

#productivity #webdev #builtwithmedo #github

Tired of reading messy codebases? Meet AETHER. ---

Have you ever joined a new project, looked at the repository, and realized you're going to lose the next three days just trying to figure out how the files connect?

Yeah, me too.

As a Full-Stack developer, I got tired of manually mapping out data flows and component hierarchies. So, for the Baidu "Build with MeDo" Hackathon, I built AETHER: an AI-powered Developer Onboarding & Scoping Assistant.

AETHER takes any public GitHub repository and instantly maps its entire architecture using AI-generated interactive Mermaid.js diagrams.

Here is how I built it without writing custom backend code, and how I bypassed some major LLM and API bottlenecks.

⚡ What AETHER Actually Does

I didn't just want a passive visualizer; I wanted an active workflow tool for the Work & Productivity track. AETHER has three main features:

1. Instant Architecture Mapping

You paste a GitHub URL, and AETHER instantly generates an interactive visual graph of the codebase. To avoid visual noise on massive repos, it includes a Context Pruning filter so you can isolate just the Frontend, Backend, or Database models.

2. "Impact Analysis" Mode (My Favorite Feature)

If you are scoping a sprint, you can type a feature request like "Migrate database to PostgreSQL". AETHER runs an Impact Analysis, highlighting the exact nodes/files on the diagram in orange that need to be modified, alongside a step-by-step implementation checklist.

3. One-Click Auto-Documentation

Productivity tools need tangible deliverables. With one click, AETHER takes its context and generates a comprehensive, formatted ARCHITECTURE.md file that you can immediately download and commit to your repo.

🛠️ How I Built It (The MeDo Magic)

AETHER was built entirely using MeDo, Baidu's AI application builder. Because I understand full-stack architecture, I treated MeDo like an orchestrator rather than a simple chatbot.

I wired together specific MeDo Skills to handle the heavy lifting:

  1. HTTP Request Skill: Safely communicates with the GitHub API to fetch recursive file trees.
  2. Data Processing Skill: Cleans the payload by stripping out heavy folders like node_modules and binaries. This is crucial—if you send a raw Node/Python project to an LLM, you will instantly blow up the context window.
  3. File Generator Skill: Compiles the AI's analysis into the final, downloadable .md file.

Overcoming the Bottlenecks

Building AI wrappers is easy. Building a reliable AI workflow is hard. I ran into two major roadblocks that I had to engineer my way out of:

1. The GitHub API Rate Limit Wall
Unauthenticated GitHub API requests limit you to 60 calls per hour. AETHER burns through that instantly.

  • The Fix: I instructed MeDo to build a secure UI modal where users can input their own GitHub Personal Access Token (PAT). MeDo saves this locally and injects it into the HTTP Request header, bumping the limit to 5,000 requests an hour.

2. The Mermaid Syntax Hallucinations
LLMs are notoriously bad at finishing long blocks of code. AETHER kept crashing because the AI would hit its Output Token Limit mid-generation, leaving unclosed brackets that broke the Mermaid.js client renderer.

  • The Fix: I engineered highly strict system prompts forcing the AI to optimize tokens by grouping minor files, dropping spaces in subgraph IDs, and I maximized the token ceiling in MeDo's settings to guarantee flawless execution.

🚀 Try It Out

Building this for the #BuiltWithMeDo hackathon was an incredible experience in "Vibe Coding" and spec-driven development.

Vote Me here

If you test it on one of your repositories, let me know how accurately it maps your architecture in the comments below! 👇

Top comments (0)