For the Finish Up-A-Thon, I worked on an AI-powered VS Code extension focused on improving developer productivity directly inside the editor.
The extension provides an interactive AI chat experience within VS Code using a custom React-based WebView UI. It is designed to help developers with coding assistance, project understanding, and faster development workflows without switching tabs repeatedly.
✨ Features
AI Chat Integration: A fully functional AI chat assistant right inside your editor sidebar.
React + Vite Powered Custom UI: A smooth, modern, and highly responsive webview layout.
Workspace-Aware Responses: File reading capabilities to understand project context before answering.
Real-Time Interaction: Quick processing of code snippets, explanations, and debugging queries.
TypeScript Architecture: Highly scalable and type-safe extension codebase.
🛠 Tech Stack
Layer: Technology Used
Extension Backend: TypeScript, Node.js, VS Code Extension API
Frontend UI: React 19, Vite, Tailwind CSS
AI Brain: Gemini API Integration
🛑 Challenges I Faced & How I Fixed Them
Building a modern hybrid tool like this comes with its own unique set of engineering hurdles. Here is what went down behind the scenes:
- The Frontend-Backend Communication Bridge
Challenge: Passing data seamlessly between the isolated React WebView frontend and the Node.js/TypeScript extension backend was tricky. Managing event listeners (postMessage and onDidReceiveMessage) required a robust messaging protocol.
Fix: Designed a clean, type-safe communication layer with action types, ensuring the UI always knows when the AI is processing or sending chunks of code
- Environment Configuration & Monorepo Confusion
Challenge: During development, running script commands like build:webview threw script errors initially because the frontend dependencies were inside a sub-directory (webview-ui), and the tooling context was getting lost.
Fix: Configured the root package.json with explicit prefixes:
"dev:webview": "npm run dev --prefix webview-ui",
"build:webview": "npm run build --prefix webview-ui"
This allowed single-command builds directly from the root workspace!
- Repository Optimization & Git Cleanup
Challenge: Before final deployment, the repository was messy with local generated files (dist/, node_modules, cache configurations) clogging up source control with over 1,000+ untracked changes.
Fix: Set up a professional .gitignore configuration, cleared caches, and properly aligned building steps, making the project clean, secure, and production-ready.
🧠 What I Learned
Through this hackathon and intense debugging sessions, I gained deep practical experience in:
VS Code Extension Lifecycle: Mastering activation events, commands, and secure webview contexts.
TypeScript Architecture: Structuring custom services (like aiService.ts) elegantly.
Monorepo Workflow: Coordinating frontend-backend integration inside a desktop application wrapper.
Git hygiene: Keeping secrets (.env) safe and codebases lightweight for open-source.
🚀 Future Roadmap:
This is just the beginning. Moving forward, I plan to add:
Inline Code Lenses: Clicking a button above any function to auto-generate tests.
Streaming Responses: Making the chat look even more dynamic with typing effects.
Huge thanks to the Finish Up-A-Thon organizers for pushing me to polish this project up to professional standards!
Github repo: https://github.com/ZunedKhan07/AI-Code-Assistant-VScode-Extension
