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: 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 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! 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