DEV Community

mk668a
mk668a

Posted on

LLM Code Map: Visualize TypeScript/JavaScript Dependencies & Empower AI Agents

#vscode #typescript #javascript #ai

Repository URL: https://github.com/mk668a/llm-codemap

Have you ever jumped into a new codebase and felt completely lost in a web of imports and function calls? Or maybe you are working with AI agents and want them to have a better spatial understanding of your project structure?

I'm excited to share a project I've been working on called LLM Code Map.

It is a VSCode extension designed to graphically visualize code dependencies and structure for TypeScript and JavaScript projects. But it goes a step further than just being a visualizer—it is built to work seamlessly with AI Agents via the Language Model Tool API.

🚀 What is LLM Code Map?

LLM Code Map analyzes your source code and renders an interactive graph in the VSCode sidebar. It helps you see not just file dependencies, but granular connections between functions, classes, and methods.

Key Features

  • Granular Analysis: It doesn't just look at files; it analyzes dependencies at the function, class, and method levels.
  • Interactive Visualization: Powered by D3.js, the graph is interactive, zoomable, and fixed conveniently in your sidebar.
  • AI Agent Integration: This is the game-changer. It supports the Language Model Tool API, meaning it can be automatically invoked by AI agents within VSCode.

🤖 The "Killer Feature": AI Integration

The most exciting part of this extension is its ability to communicate with AI. Because it implements the Language Model Tool API, you can simply chat with a supported AI agent in VSCode and say:

"Visualize the dependencies of this project"
"Display the code structure using #codemap"

The AI will recognize the tool, trigger the analysis, and present the structure to you instantly. This bridges the gap between raw code text and high-level architectural understanding for AI agents.

🛠️ How to Try It Out

The project is open source and currently in the development phase. You can try it out locally right now!

Quick Start (Development Mode)

1. Clone the Repository 

git clone https://github.com/mk668a/llm-codemap.git
cd llm-codemap
Enter fullscreen mode Exit fullscreen mode

2. Install Dependencies 

npm install
Enter fullscreen mode Exit fullscreen mode

3. Compile 

npm run compile
Enter fullscreen mode Exit fullscreen mode

4. Launch in VSCode

  • Open the project folder in VSCode.
  • Press F5 (or go to the "Run and Debug" panel and select "Run Extension").
  • A new VSCode window ("Extension Development Host") will open.

📖 How to Use

Once the extension is running, you have two ways to use it:

1. Manual Usage (Sidebar)

This is great for exploring the code yourself.

  1. Open the "LLM Code Map" view in the Explorer sidebar.
  2. Click the Refresh Button (🔄) at the top of the view.
  3. The extension will analyze your current workspace and display the interactive graph. You can drag nodes and zoom in/out to explore the structure.

2. Usage via AI Agent

If you are using an AI assistant within VSCode (like Copilot or an agent that supports the Tool API), you can simply ask it to generate the map for you.

Example Prompts:

Visualize the dependencies of User Class
Enter fullscreen mode Exit fullscreen mode 
Display the code structure using #codemap
Enter fullscreen mode Exit fullscreen mode

The AI will automatically invoke the tool and render the graph.

🏗️ Under the Hood

For those interested in the tech stack, here is a quick look at the file structure. It uses TypeScript for the core logic and Webviews for the visualization.

codemap/
├── src/
│   ├── extension.ts              # Entry point
│   ├── analyzer/                 # Code analysis logic (AST)
│   ├── visualizer/               # D3.js Graph visualization
│   ├── tools/                    # Language Model Tool API implementation
│   └── utils/                    # Utilities
├── media/                        # Webview resources (HTML/CSS/JS)
└── out/                          # Compiled files
Enter fullscreen mode Exit fullscreen mode

🤝 Contributing

This project is open source (MIT License). I am actively looking for feedback, bug reports, and contributions.

If you are interested in AST analysis, data visualization with D3, or VSCode extension development, check out the repository.

Repository URL: https://github.com/mk668a/llm-codemap

If you find this tool interesting, please give it a star ⭐️ on GitHub!

Happy Coding!

Top comments (0)