|
| 1 | +## Continue VS Code Extension |
| 2 | + |
| 3 | +Continue VS Code Extension is an enterprise-grade, AI-powered coding assistant that brings code completion, chat, and inline code editing directly into the developer environment, powered by locally deployed language models running on Intel® Xeon® processors. Built on the open-source Continue framework and integrated with an enterprise GenAI Gateway, the extension connects developers to a Llama 3.2 3B model through secure Keycloak authentication, enabling intelligent code assistance without routing any code or context to external cloud services. By running a capable code-generation model on CPU-native Intel Xeon infrastructure, this solution demonstrates how development teams can adopt AI-assisted coding workflows while keeping proprietary codebases fully on-premises and under enterprise security controls. |
| 4 | + |
| 5 | +## Table of Contents |
| 6 | + |
| 7 | +- [Project Overview](#project-overview) |
| 8 | +- [Features](#features) |
| 9 | +- [Architecture](#architecture) |
| 10 | +- [Prerequisites](#prerequisites) |
| 11 | +- [Quick Start](#quick-start) |
| 12 | +- [Configuration](#configuration) |
| 13 | +- [Usage](#usage) |
| 14 | +- [Advanced Features](#advanced-features) |
| 15 | +- [Troubleshooting](#troubleshooting) |
| 16 | + |
| 17 | +--- |
| 18 | + |
| 19 | +## Project Overview |
| 20 | + |
| 21 | +Continue VS Code Extension enables developers to leverage enterprise-deployed Llama 3.2 3B model for code assistance through GenAI Gateway. Provides autocomplete, chat, and editing capabilities with Keycloak authentication. |
| 22 | + |
| 23 | +--- |
| 24 | + |
| 25 | +## Features |
| 26 | + |
| 27 | +**Autocomplete** |
| 28 | +- Real-time code completion |
| 29 | +- Multiline code generation |
| 30 | +- Context-aware suggestions |
| 31 | +- Configurable debounce and timeout |
| 32 | + |
| 33 | +**Chat Mode** |
| 34 | +- Interactive Q&A about code |
| 35 | +- Code explanations |
| 36 | +- Problem-solving assistance |
| 37 | +- Keyboard shortcut: `Ctrl+L` |
| 38 | + |
| 39 | +**Edit Mode** |
| 40 | +- Targeted code modifications |
| 41 | +- Inline transformations |
| 42 | +- Context-aware refactoring |
| 43 | +- Keyboard shortcut: `Ctrl+I` |
| 44 | + |
| 45 | +--- |
| 46 | + |
| 47 | +## Architecture |
| 48 | + |
| 49 | +```mermaid |
| 50 | +graph TB |
| 51 | + subgraph "Developer Workstation" |
| 52 | + A[VS Code IDE] |
| 53 | + B[Continue Extension] |
| 54 | + end |
| 55 | +
|
| 56 | + subgraph "Enterprise Infrastructure" |
| 57 | + C[GenAI Gateway<br/>LiteLLM] |
| 58 | + D[Keycloak<br/>OAuth2 Auth] |
| 59 | + end |
| 60 | +
|
| 61 | + subgraph "Kubernetes Cluster" |
| 62 | + E[AI Model Pods<br/>Llama 3.2 3B] |
| 63 | + end |
| 64 | +
|
| 65 | + A -->|Code Context| B |
| 66 | + B -->|HTTPS Request<br/>API Key| C |
| 67 | + C -->|Validate Token| D |
| 68 | + D -->|Auth Success| C |
| 69 | + C -->|Inference Request| E |
| 70 | + E -->|Model Response| C |
| 71 | + C -->|Response| B |
| 72 | + B -->|Display Results| A |
| 73 | +
|
| 74 | + style A fill:#e1f5ff |
| 75 | + style B fill:#fff4e1 |
| 76 | + style C fill:#f0e1ff |
| 77 | + style D fill:#ffe1e1 |
| 78 | + style E fill:#e1ffe1 |
| 79 | +``` |
| 80 | + |
| 81 | +Developer types code in VS Code. Continue extension sends authenticated request to GenAI Gateway. Gateway validates credentials with Keycloak and routes to model. Model generates response. Result displayed in VS Code. |
| 82 | + |
| 83 | +--- |
| 84 | + |
| 85 | +## Prerequisites |
| 86 | + |
| 87 | +### System Requirements |
| 88 | + |
| 89 | +- VS Code (latest stable version) |
| 90 | +- GenAI Gateway access with Keycloak authentication |
| 91 | +- API key from Gateway administrator |
| 92 | + |
| 93 | +### Verify VS Code Installation |
| 94 | + |
| 95 | +```bash |
| 96 | +code --version |
| 97 | +``` |
| 98 | + |
| 99 | +--- |
| 100 | + |
| 101 | +## Quick Start |
| 102 | + |
| 103 | +### Install Continue Extension |
| 104 | + |
| 105 | +1. Open VS Code |
| 106 | +2. Press `Ctrl+Shift+X` to open Extensions |
| 107 | +3. Search for "Continue" |
| 108 | +4. Install: **Continue - open-source AI code agent** |
| 109 | +5. Publisher: **Continue** |
| 110 | + |
| 111 | +Command line installation: |
| 112 | + |
| 113 | +```bash |
| 114 | +code --install-extension Continue.continue |
| 115 | +``` |
| 116 | + |
| 117 | +### Configure Extension |
| 118 | + |
| 119 | +1. Press `Ctrl+Shift+P` |
| 120 | +2. Type "Continue: Open config.yaml" |
| 121 | +3. Replace contents with configuration below |
| 122 | +4. Update `apiBase` and `apiKey` with your credentials |
| 123 | +5. Reload VS Code: `Ctrl+Shift+P` → "Developer: Reload Window" |
| 124 | + |
| 125 | +--- |
| 126 | + |
| 127 | +## Configuration |
| 128 | + |
| 129 | +Configuration file location: |
| 130 | + |
| 131 | +**Windows:** |
| 132 | +``` |
| 133 | +C:\Users\<username>\.continue\config.yaml |
| 134 | +``` |
| 135 | + |
| 136 | +**macOS/Linux:** |
| 137 | +``` |
| 138 | +~/.continue/config.yaml |
| 139 | +``` |
| 140 | + |
| 141 | +### Basic Configuration |
| 142 | + |
| 143 | +```yaml |
| 144 | +name: GenAI Gateway Config |
| 145 | +version: 1.0.0 |
| 146 | +schema: v1 |
| 147 | + |
| 148 | +tabAutocompleteOptions: |
| 149 | + multilineCompletions: "always" |
| 150 | + debounceDelay: 2500 |
| 151 | + maxPromptTokens: 100 |
| 152 | + prefixPercentage: 1.0 |
| 153 | + suffixPercentage: 0.0 |
| 154 | + maxSuffixPercentage: 0.0 |
| 155 | + modelTimeout: 5000 |
| 156 | + showWhateverWeHaveAtXMs: 2000 |
| 157 | + useCache: true |
| 158 | + onlyMyCode: true |
| 159 | + useRecentlyEdited: true |
| 160 | + useRecentlyOpened: true |
| 161 | + useImports: true |
| 162 | + transform: true |
| 163 | + experimental_includeClipboard: false |
| 164 | + experimental_includeRecentlyVisitedRanges: true |
| 165 | + experimental_includeRecentlyEditedRanges: true |
| 166 | + experimental_includeDiff: true |
| 167 | + disableInFiles: |
| 168 | + - "*.md" |
| 169 | + |
| 170 | +models: |
| 171 | + - name: "Llama 3.2 3B" |
| 172 | + provider: openai |
| 173 | + model: "meta-llama/Llama-3.2-3B-Instruct" |
| 174 | + apiBase: "https://api.example.com/v1" |
| 175 | + apiKey: "your-api-key-here" |
| 176 | + ignoreSSL: true |
| 177 | + contextLength: 8192 |
| 178 | + completionOptions: |
| 179 | + maxTokens: 1024 |
| 180 | + temperature: 0.3 |
| 181 | + stop: |
| 182 | + - "\n\n" |
| 183 | + - "def " |
| 184 | + - "class " |
| 185 | + requestOptions: |
| 186 | + maxTokens: 1024 |
| 187 | + temperature: 0.3 |
| 188 | + autocompleteOptions: |
| 189 | + maxTokens: 256 |
| 190 | + temperature: 0.2 |
| 191 | + stop: |
| 192 | + - "\n\n\n" |
| 193 | + - "# " |
| 194 | + roles: |
| 195 | + - chat |
| 196 | + - edit |
| 197 | + - apply |
| 198 | + - autocomplete |
| 199 | + promptTemplates: |
| 200 | + autocomplete: "{{{prefix}}}" |
| 201 | + |
| 202 | +useLegacyCompletionsEndpoint: true |
| 203 | +experimental: |
| 204 | + inlineEditing: true |
| 205 | +allowAnonymousTelemetry: false |
| 206 | +``` |
| 207 | +
|
| 208 | +### Required Updates |
| 209 | +
|
| 210 | +1. **apiBase**: Your GenAI Gateway URL with `/v1` suffix |
| 211 | +2. **apiKey**: API key from Gateway administrator |
| 212 | +3. **model**: Exact model name `meta-llama/Llama-3.2-3B-Instruct` |
| 213 | + |
| 214 | +For detailed configuration options and advanced setup, refer to [SETUP_GUIDE.md](./SETUP_GUIDE.md). |
| 215 | + |
| 216 | +### Verify Configuration |
| 217 | + |
| 218 | +```bash |
| 219 | +export API_KEY="your-api-key-here" |
| 220 | +export API_BASE="https://api.example.com/v1" |
| 221 | +``` |
| 222 | + |
| 223 | +```bash |
| 224 | +curl -k $API_BASE/models \ |
| 225 | + -H "Authorization: Bearer $API_KEY" |
| 226 | + ``` |
| 227 | + |
| 228 | +```bash |
| 229 | +curl -k $API_BASE/chat/completions \ |
| 230 | + -H "Authorization: Bearer $API_KEY" \ |
| 231 | + -H "Content-Type: application/json" \ |
| 232 | + -d '{ |
| 233 | + "model": "meta-llama/Llama-3.2-3B-Instruct", |
| 234 | + "messages": [{"role": "user", "content": "What is Python?"}], |
| 235 | + "max_tokens": 50 |
| 236 | + }' |
| 237 | +``` |
| 238 | + |
| 239 | +--- |
| 240 | + |
| 241 | +## Usage |
| 242 | + |
| 243 | +### Agent mode |
| 244 | + |
| 245 | +**How to Use:** |
| 246 | +1. Open Continue sidebar |
| 247 | +2. Switch to Agent mode |
| 248 | +3. Give task instruction |
| 249 | +4. Review and approve file operations |
| 250 | +5. Verify results |
| 251 | + |
| 252 | +**Preview:** Requested "Create a FastAPI application with two routes". The model generated the code and created a new file with the complete implementation including imports, app initialization, and route definitions. |
| 253 | + |
| 254 | + |
| 255 | + |
| 256 | + |
| 257 | + |
| 258 | +### Autocomplete |
| 259 | + |
| 260 | +**How to Use:** |
| 261 | +1. Start typing code |
| 262 | +2. Pause 3 seconds |
| 263 | +3. Accept with `Tab` or reject by continuing to type |
| 264 | + |
| 265 | +Enable/disable via "Continue" button in status bar. |
| 266 | + |
| 267 | +**Preview:** Started typing to create an endpoint for the sample FastAPI application and paused. The model generated the code for the endpoint and provided a prompt to accept or reject the code. |
| 268 | + |
| 269 | + |
| 270 | + |
| 271 | + |
| 272 | + |
| 273 | + |
| 274 | + |
| 275 | +--- |
| 276 | + |
| 277 | +### Chat Mode |
| 278 | + |
| 279 | +**How to Use:** |
| 280 | +1. Press `Ctrl+L` |
| 281 | +2. Type question |
| 282 | +3. Press Enter |
| 283 | +4. Review response |
| 284 | + |
| 285 | +Context providers: |
| 286 | +- Highlight code for automatic inclusion |
| 287 | +- `@Files` - Reference specific files |
| 288 | +- `@Terminal` - Include terminal output |
| 289 | + |
| 290 | +**Preview:** Asked how does FastAPI handles request validation in the current file and received the response with a suggestion, which can be viewed in the screenshots below |
| 291 | + |
| 292 | + |
| 293 | + |
| 294 | + |
| 295 | + |
| 296 | + |
| 297 | + |
| 298 | + |
| 299 | + |
| 300 | +--- |
| 301 | + |
| 302 | +### Edit Mode |
| 303 | + |
| 304 | +**How to Use:** |
| 305 | +1. Highlight code |
| 306 | +2. Press `Ctrl+I` |
| 307 | +3. Type instruction |
| 308 | +4. Review diff |
| 309 | +5. Accept or reject |
| 310 | + |
| 311 | + |
| 312 | +**Preview:** Highlighted the code file and provided a prompt to "convert every endpoint to async". The model generated a difference showing the original code and proposed changes and provided a prompt to accept or reject the code. |
| 313 | + |
| 314 | + |
| 315 | + |
| 316 | + |
| 317 | + |
| 318 | + |
| 319 | + |
| 320 | + |
| 321 | +--- |
| 322 | + |
| 323 | +## Advanced Features |
| 324 | + |
| 325 | +**Custom Rules** |
| 326 | +- Define custom system prompts and context for specific project needs |
| 327 | +- Control AI behavior with project-specific guidelines |
| 328 | + |
| 329 | +**MCP Servers** |
| 330 | +- Extend functionality with Model Context Protocol servers |
| 331 | +- Add custom tools and external integrations |
| 332 | + |
| 333 | +For detailed setup instructions on creating custom rules and MCP servers, refer to [SETUP_GUIDE.md](./SETUP_GUIDE.md). |
| 334 | + |
| 335 | +--- |
| 336 | + |
| 337 | +## Troubleshooting |
| 338 | + |
| 339 | +For comprehensive troubleshooting guidance, common issues, and solutions, refer to: |
| 340 | + |
| 341 | +[Troubleshooting Guide - TROUBLESHOOTING.md](./TROUBLESHOOTING.md) |
0 commit comments