thiCodingAssistant

AI-powered coding assistant for Visual Studio Code that helps you write better code through intelligent chat, code review, and automated suggestions.

Contributors

• Yunus Emre Cölkusu (@emre-desertbird)
• Arnold Tchaha Wandji (@0304j)
• Kaisheng Zheng (@Kaiisnottsleeped)
• Mithunan Mehanathan (@thimithu)
• Syedhgolrokh Banisadr (@gollrokh)

🚀 Quick Start

Full Stack: start-dev.bat - Backend + Extension
Extension Only: start-extension.bat - Just the extension

Prerequisite (when using THI infrastructure): Connect to the THI VPN if you want to use the deployed backend and models provided by THI. If you run your own backend and use a personal Groq API key, the VPN is not required. VPN info: https://www.thi.de/service/it-service/vpn/

First-Time Setup

# 1. Install dependencies
npm run install:all

# 2. Setup API key (for Groq fallback)
# The script will prompt you if password.env is missing
# OR manually create backend/password.env:
#   GROQ_API_KEY=your_api_key_here

# 3. Start
.\start-dev.bat

Get API Key: Free at console.groq.com

📁 Structure

thiCodingAssistant/
├── start-dev.bat       # Full stack launcher
├── start-extension.bat # Extension only
├── backend/            # Flask server (configurable port, default: 3000)
└── extension/          # VS Code extension

Backend Structure

Backend Core Components (backend/):

• app.py - Flask entrypoint and server startup
• controller.py - HTTP routes (code review, health, hook script)
• service.py - Business logic: model selection, LLM calls, review processing
• models.json - Model priority config for auto-selection
• hooks.py - Generates managed pre-commit hook script
• chat_history.py - Formats chat history for LLM context

Extension Structure

Extension Host (extension/src/):

• extension.ts - Entry point, registers webview provider and commands
• bus.ts - Message bus between extension and webview, pre-commit hook management
• view.ts - Webview provider that loads the Vue UI, manages webview lifecycle
• config.ts - Centralized backend URLs (server + local)

Webview UI (extension/webview/src/):

• ChatPanel.vue - Main chat and mode selection UI (chat, suggestions, code-summary)
• PanelApp.vue / RightApp.vue - Wrapper apps that render ChatPanel into each webview
• panel-main.ts / rightview-main.ts - Bootstraps the two webviews and injects VS Code API
• main.ts - Webview entry point for the single-view build, renders ChatPanel
• styles.css - UI styling

Resources:

• Demo Repository: CAT-Dummy-Repository - Test environment for Code Summary, Suggestions, and Pre-commit features
• Admin Repository: Admin-thi-coding-assistant - Kubernetes setup, model manager implementation, K8s manifests for model hosting/manager, endpoint descriptions and code logic
• Documentation: See extension/readme.md for user-facing feature documentation

💻 Commands

start-dev.bat              # Full stack
start-extension.bat        # Extension only
npm run extension:compile  # Build extension

VS Code: Press F5 → Select "Extension with Backend"
Backend Separately: cd backend && py app.py

⚙️ Configuration

API Keys (required for Groq fallback):

Create backend/password.env:

GROQ_API_KEY=your_api_key_here

Port Configuration (optional):

Copy config.env.template to config.env and customize:

PORT=3000                    # Backend server port
SERVER_BACKEND_PORT=30016    # Server backend NodePort

The startup scripts automatically load config.env if it exists.

Backend URLs: Configured in extension/src/config.ts

• SERVER_BACKEND - Production backend (defaults to http://10.10.240.8:30016)
• LOCAL_BACKEND - Local development backend (defaults to http://127.0.0.1:3000)

🔧 Troubleshooting

Issue	Fix
Backend fails	cd backend && .\venv\Scripts\pip install -r requirements.txt
Extension not loading	npm run extension:compile
Port conflict	Copy config.env.template to config.env and set PORT=8080

Architecture

Backend (backend/)

• Flask API with multiple LLM backends (Ollama cluster primary, Groq fallback)
• Model auto-selection system using configurable priorities (models.json)
• Pre-commit hook generation and management
• Code review with syntax validation and structured fix suggestions

Extension (extension/)

• Vue 3 webview for UI (ChatPanel.vue)
• TypeScript extension host for VS Code integration
• Message bus for extension-webview communication
• Git hook management with version tracking

Backend Fallback for Testing

The extension attempts connection in this order:

1. Server backend (production, requires VPN)
2. Local backend (development only, runs on localhost:3000)

Local backend is only accessible when the server backend is unreachable. This allows developers to test changes locally without affecting the production backend.

Features for Development

For end-user features, see extension/readme.md

• Chat completion with context handling
• Code suggestions and summaries for selected code
• Manual file review with actionable fixes
• Pre-commit validation for critical issues
• Auto model selection based on feature type
• Response regeneration
• Model management and refresh

License

MIT