EZ-Coder — AI Coding Assistant, Code Visualizer & Roadmap Generator for VS Code

EZ-Coder is an all-in-one productivity extension for Visual Studio Code that combines:

✅ AI Coding Assistant (Hugging Face powered) ✅ Interactive Code Visualizer (Call Graphs & Flowcharts) ✅ AI-Driven Study & Learning Roadmap Generator

This extension is built to help students, developers, and learners write better code, understand complex codebases visually, and follow structured learning paths — all inside VS Code.

🚀 Key Features 🤖 1. AI Coding Assistant

Chat-based AI assistant inside VS Code

Code explanations, bug fixing, optimization & generation

Powered by Hugging Face API

Automatic retry system for overload and network failures

Logs all retry attempts for debugging

📊 2. Code Visualizer (CodeViz)

Visualize call graphs for selected functions

Generate incoming & outgoing dependency graphs

Auto-generate flowchart-style diagrams

Webview-based interactive visualization

Uses Graphviz (WASM runtime) for rendering

Commands:

codeviz.openVisualizer

codeviz.showCallGraph

codeviz.showIncomingCallGraph

codeviz.generateFlowchart

🗺️ 3. AI Roadmap Generator

Opens a web-based roadmap generator inside VS Code

Helps students create personalized learning roadmaps

Loads prebuilt web assets directly into a secure VS Code webview

Fully offline-ready after assets are built

🔐 Setup Requirements (Mandatory for AI Features)

This extension requires a Hugging Face API Key.

✅ Option 1: VS Code Settings (Recommended)

Get your API key from: 👉 https://huggingface.co/settings/tokens

Open VS Code Settings JSON:

Ctrl + Shift + P → Preferences: Open User Settings (JSON)

Add:

"ez-coder.huggingFaceApiKey": "YOUR_API_KEY_HERE"

Save and reload VS Code

✅ Option 2: Environment Variable

Create a .env file in the project root

Add:

HUGGINGFACE_API_KEY=your_api_key_here

✅ .env is already ignored by Git for security.

✅ Verify API Key

Run:

EZ-Coder: Verify Hugging Face API Key

⚙️ Extension Settings

This extension contributes:

ez-coder.huggingFaceApiKey → Your Hugging Face API Key

🧪 Build, Test & Run (Developer Guide) 1️⃣ Verify Prerequisites node --version npm --version git --version

2️⃣ Install Dependencies npm install

3️⃣ Compile Extension npm run compile

4️⃣ Run in VS Code

Open the project folder

Press F5

A new Extension Development Host opens

Open Command Palette:

Ctrl + Shift + P

Run:

EZ-Coder

Open Roadmap Generator

Open Code Visualizer

🧹 CodeViz Media Cleanup (Disk Optimization)

To reduce large media sizes:

Preview files to be cleaned

npm run clean-codeviz-media -- --dry-run

Perform cleanup with automatic backup

npm run clean-codeviz-media

This will:

Create ZIP backup

Remove unused test files & maps

Preserve only essential render files

Generate a cleanup report

🗺️ Roadmap Generator – Local Testing How to Run

Open project in VS Code

Press F5

Run:

📍 Open Roadmap Generator

What to Verify

Webview UI loads correctly

No missing assets

No CSP errors in Developer Tools

🛠️ Known Issues

Graph rendering may fail in rare WebView runtime cases ✅ Solution: Add optional viz.full.render.js fallback

Hugging Face API may rate limit ✅ Automatic retry system already implemented

Windows paths with spaces may cause test failures ✅ Use short paths like C:\temp\ezcoder-test

📦 Release Notes ✅ 0.0.1 — Initial Release

AI Assistant integrated

Code Visualizer enabled

Roadmap Generator webview added

API Key verification command

Automatic retry logic added

Media cleanup system introduced

🛡️ Security Best Practices

Never commit API keys

.env is auto-ignored

Each user configures their own AI key

No credentials are bundled with the extension

📚 Extension Guidelines

VS Code extension best practices followed:

Optimized activation events

Secure webview loading

CSP-safe rendering

Minimal disk usage after cleanup

📝 Markdown & Documentation Tips

Ctrl + \ → Split editor

Shift + Ctrl + V → Preview Markdown

Ctrl + Space → Markdown snippets

🔗 Helpful Resources

VS Code Extension API https://code.visualstudio.com/api

Markdown Guide https://help.github.com/articles/markdown-basics/

Hugging Face https://huggingface.co

❤️ Final Note

EZ-Coder is designed to replace multiple tools with one powerful, AI-driven development assistant. From visual debugging, to AI coding help, to structured learning roadmaps — everything works together in one VS Code extension.