AI Features

AI Features

Overview

Coding Drills integrates AI through two providers:

1. WebLLM (primary) — Llama-3.1-8B-Instruct running locally via WebGPU
2. OpenAI (optional fallback) — Cloud-based AI via OpenAI SDK

WebLLM Integration (lib/webllm.ts)

Model

• Model: Llama-3.1-8B-Instruct (quantized for browser)
• Runtime: @mlc-ai/web-llm via WebGPU
• Size: ~3GB first download (cached in browser after)
• Requirement: WebGPU-capable browser (Chrome 113+, Edge 113+)

How It Works

1. User clicks "Activate AI Tutor" on an exercise or UI pattern page
2. WebLLM model is loaded on-demand (shows download progress)
3. Model runs entirely in-browser — no data sent to servers
4. Generates contextual hints, explanations, and code reviews

Use Cases

Feature	Component	System Prompt
Exercise Tutor	ExerciseTutor.tsx	lib/exercises/tutor-prompt.ts
UI Pattern Tutor	ExerciseTutor.tsx	lib/frontend-drills/ui-patterns/tutor-prompt.ts
AI Mock Interview	Interview pages	lib/interview/prompts.ts

AI Mock Interview (lib/interview/)

Content

• 72 algorithm problems across 22 algorithmic patterns
• 28 system design questions
• Covers: Two Pointers, Sliding Window, Binary Search, BFS/DFS, DP, Greedy, Backtracking, Graph, Trie, Heap, Stack, etc.

Interview Flow

1. User selects language and difficulty
2. AI presents a coding problem
3. User writes code and explains approach
4. AI provides follow-up questions, hints, and feedback
5. Progressive hint system with 4 escalation levels:
   • Level 1: General direction hint
   • Level 2: Pattern/approach hint
   • Level 3: Specific technique hint
   • Level 4: Near-solution guidance

Configuration

interface InterviewConfig {
  difficulty: 'easy' | 'medium' | 'hard';
  language: LanguageId;
  adaptiveDifficulty: boolean;
}

Token Optimization

Prompt engineering reduces token usage by ~30% through:

• Concise system prompts
• Structured response format
• Context window management for multi-turn conversations

Exercise Tutor

The ExerciseTutor component provides contextual AI tutoring on exercises and UI patterns.

Capabilities

• Break down explanations step by step
• Clarify each instruction
• Walk through hints progressively
• Explain the solution code line by line
• Review user's code for bugs
• Narrate algorithm visualizations step by step

Privacy

• All AI inference runs locally via WebGPU
• No user code or data is sent to external servers
• OpenAI fallback is opt-in only