| # Tích hợp Continue VSCode Extension |
|
|
| Tích hợp 9Router với extension Continue để mang trợ lý AI trực tiếp vào Visual Studio Code. |
|
|
| ## Yêu cầu |
|
|
| - Visual Studio Code đã cài đặt |
| - Extension Continue đã cài đặt từ VSCode marketplace |
| - 9Router API key từ [dashboard](https://9router.com/dashboard) |
| - 9Router đang chạy (cục bộ hoặc cloud) |
|
|
| ## Các bước Cấu hình |
|
|
| ### 1. Mở Continue Configuration |
|
|
| 1. Mở VSCode |
| 2. Nhấn `Cmd+Shift+P` (Mac) hoặc `Ctrl+Shift+P` (Windows/Linux) |
| 3. Gõ "Continue: Open Config" và chọn |
| 4. Mở `~/.continue/config.json` |
|
|
| ### 2. Thêm Cấu hình Model 9Router |
|
|
| Thêm cấu hình sau vào `config.json`: |
|
|
| **Setup Một Model:** |
| ```json |
| { |
| "models": [ |
| { |
| "title": "9Router - Claude Opus", |
| "provider": "openai", |
| "model": "cc/claude-opus-4-5-20251101", |
| "apiKey": "your-api-key-from-dashboard", |
| "apiBase": "http://localhost:20128/v1" |
| } |
| ] |
| } |
| ``` |
|
|
| **Setup Nhiều Model:** |
| ```json |
| { |
| "models": [ |
| { |
| "title": "9Router - Claude Opus (Best)", |
| "provider": "openai", |
| "model": "cc/claude-opus-4-5-20251101", |
| "apiKey": "your-api-key-from-dashboard", |
| "apiBase": "http://localhost:20128/v1" |
| }, |
| { |
| "title": "9Router - Claude Sonnet (Balanced)", |
| "provider": "openai", |
| "model": "cc/claude-sonnet-4-20250514", |
| "apiKey": "your-api-key-from-dashboard", |
| "apiBase": "http://localhost:20128/v1" |
| }, |
| { |
| "title": "9Router - DeepSeek Chat (Code)", |
| "provider": "openai", |
| "model": "cx/deepseek-chat", |
| "apiKey": "your-api-key-from-dashboard", |
| "apiBase": "http://localhost:20128/v1" |
| }, |
| { |
| "title": "9Router - Claude Haiku (Fast)", |
| "provider": "openai", |
| "model": "cc/claude-haiku-4-20250514", |
| "apiKey": "your-api-key-from-dashboard", |
| "apiBase": "http://localhost:20128/v1" |
| } |
| ] |
| } |
| ``` |
|
|
| **Cho Cloud 9Router:** |
| Thay `apiBase` bằng: |
| ```json |
| "apiBase": "https://9router.com/v1" |
| ``` |
|
|
| ### 3. Lưu và Reload |
|
|
| 1. Lưu file cấu hình |
| 2. Reload cửa sổ VSCode: `Cmd+Shift+P` → "Developer: Reload Window" |
| 3. Extension Continue sẽ load cấu hình mới |
|
|
| ### 4. Chọn Model |
|
|
| 1. Mở sidebar Continue (click icon Continue trong panel trái) |
| 2. Click dropdown chọn model ở trên cùng |
| 3. Chọn model 9Router ưa thích |
|
|
| ## Model có sẵn |
|
|
| ### Claude Models (Anthropic) |
| - `cc/claude-opus-4-5-20251101` - Mạnh nhất, tốt nhất cho task phức tạp |
| - `cc/claude-sonnet-4-20250514` - Cân bằng hiệu năng và tốc độ |
| - `cc/claude-haiku-4-20250514` - Nhanh nhất, phù hợp task đơn giản |
|
|
| ### DeepSeek Models |
| - `cx/deepseek-chat` - Xuất sắc cho tạo code |
| - `cx/deepseek-reasoner` - Tốt nhất cho giải quyết vấn đề phức tạp |
|
|
| ### GLM Models (Zhipu AI) |
| - `glm/glm-4-plus` - Tiếng Trung và tiếng Anh nâng cao |
| - `glm/glm-4-flash` - Phản hồi nhanh |
|
|
| ## Ví dụ Sử dụng |
|
|
| ### Giải thích Code |
| 1. Chọn code trong editor |
| 2. Mở sidebar Continue |
| 3. Gõ: "Explain this code" |
| 4. Model: `cc/claude-sonnet-4-20250514` |
|
|
| ### Tạo Code |
| 1. Mở sidebar Continue |
| 2. Gõ: "Create a React component for user profile card" |
| 3. Model: `cx/deepseek-chat` |
|
|
| ### Refactoring |
| 1. Chọn code để refactor |
| 2. Gõ: "Refactor this to use async/await" |
| 3. Model: `cc/claude-sonnet-4-20250514` |
|
|
| ### Sửa Bug |
| 1. Chọn code có vấn đề |
| 2. Gõ: "Find and fix the bug in this code" |
| 3. Model: `cx/deepseek-reasoner` |
|
|
| ## Cấu hình Nâng cao |
|
|
| ### Custom System Prompts |
|
|
| Thêm system prompt tùy chỉnh cho hành vi cụ thể: |
|
|
| ```json |
| { |
| "models": [ |
| { |
| "title": "9Router - Code Expert", |
| "provider": "openai", |
| "model": "cx/deepseek-chat", |
| "apiKey": "your-api-key", |
| "apiBase": "http://localhost:20128/v1", |
| "systemMessage": "You are an expert programmer. Always provide clean, well-documented code with best practices." |
| } |
| ] |
| } |
| ``` |
|
|
| ### Temperature và Parameters |
|
|
| Điều chỉnh hành vi model với parameters: |
|
|
| ```json |
| { |
| "models": [ |
| { |
| "title": "9Router - Creative Writer", |
| "provider": "openai", |
| "model": "cc/claude-opus-4-5-20251101", |
| "apiKey": "your-api-key", |
| "apiBase": "http://localhost:20128/v1", |
| "temperature": 0.9, |
| "topP": 0.95 |
| } |
| ] |
| } |
| ``` |
|
|
| ### Context Providers |
|
|
| Cấu hình context Continue gửi đến model: |
|
|
| ```json |
| { |
| "contextProviders": [ |
| { |
| "name": "code", |
| "params": { |
| "maxLines": 100 |
| } |
| }, |
| { |
| "name": "diff", |
| "params": {} |
| }, |
| { |
| "name": "terminal", |
| "params": {} |
| } |
| ] |
| } |
| ``` |
|
|
| ## Phím tắt |
|
|
| - `Cmd+L` (Mac) / `Ctrl+L` (Windows/Linux) - Mở Continue chat |
| - `Cmd+I` (Mac) / `Ctrl+I` (Windows/Linux) - Inline edit |
| - `Cmd+Shift+R` (Mac) / `Ctrl+Shift+R` (Windows/Linux) - Tạo lại response |
|
|
| ## Troubleshooting |
|
|
| ### Model không phản hồi |
| - Kiểm tra 9Router đang chạy: `curl http://localhost:20128/health` |
| - Xác minh API key trong config.json |
| - Kiểm tra VSCode Developer Console để xem lỗi: `Help` → `Toggle Developer Tools` |
|
|
| ### Chọn sai Model |
| - Click dropdown model trong sidebar Continue |
| - Chọn đúng model 9Router |
| - Tên model phải khớp chính xác (case-sensitive) |
|
|
| ### Cấu hình không Load |
| - Xác minh JSON syntax hợp lệ (dùng JSON validator) |
| - Kiểm tra vị trí file: `~/.continue/config.json` |
| - Reload cửa sổ VSCode sau khi thay đổi |
|
|
| ### Hiệu năng Chậm |
| - Chuyển sang model nhanh hơn (haiku, flash) |
| - Giảm context size trong contextProviders |
| - Kiểm tra độ trễ network đến 9Router |
|
|
| ## Best Practices |
|
|
| ### Chiến lược Chọn Model |
| - **Edit nhanh**: Dùng `cc/claude-haiku-4-20250514` |
| - **Tạo code**: Dùng `cx/deepseek-chat` |
| - **Refactoring phức tạp**: Dùng `cc/claude-opus-4-5-20251101` |
| - **Giải quyết vấn đề**: Dùng `cx/deepseek-reasoner` |
|
|
| ### Quản lý Context |
| - Chỉ chọn code liên quan trước khi hỏi |
| - Dùng prompt cụ thể, rõ ràng |
| - Chia task phức tạp thành các bước nhỏ |
|
|
| ### Tối ưu Chi phí |
| - Dùng model nhanh hơn/rẻ hơn cho task đơn giản |
| - Giới hạn context size khi có thể |
| - Cache response thường dùng |
|
|
| ## Bước tiếp theo |
|
|
| - [Cấu hình Cursor](cursor.md) cho tích hợp IDE nâng cao |
| - [Setup Roo](roo.md) cho trợ lý AI |
| - [Khám phá CLI usage](../cli/basic-usage.md) |
| - [Tìm hiểu về chọn model](../models/overview.md) |
|
|