🧠 Hướng Dẫn Tự Build AI Agent Extension Cho VSCode

Việc tích hợp các AI Agent vào VSCode có thể giúp tăng năng suất lập trình bằng cách hỗ trợ tự động hoàn thiện mã, sửa lỗi, và sinh code theo ngữ cảnh. Bài viết này hướng dẫn chi tiết các bước tự xây dựng một Extension VSCode tích hợp AI từ đầu.

Giới thiệu

Visual Studio Code là một trong những trình soạn thảo phổ biến nhất hiện nay. Việc tích hợp các AI Agent vào VSCode giúp tăng năng suất lập trình đáng kể bằng cách hỗ trợ:

• Tự động hoàn thành mã (code completion)
• Gợi ý lỗi cú pháp và cách khắc phục
• Sinh code theo yêu cầu bằng ngôn ngữ tự nhiên
• Phân tích cấu trúc logic chương trình

Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một extension đơn giản sử dụng Node.js, TypeScript và tích hợp API OpenAI (hoặc bất kỳ mô hình AI nào khác của bạn).

Yêu cầu hệ thống

Trước khi bắt đầu, hãy đảm bảo hệ thống của bạn đã cài đặt các công cụ sau:

• Node.js (phiên bản từ 18.x trở lên)
• Trình quản lý gói npm hoặc yarn
• Trình soạn thảo Visual Studio Code
• Một API Key hợp lệ (như OpenAI, Anthropic, hoặc chạy local thông qua Ollama)

Bước 1: Tạo Dự Án VSCode Extension Mới

1. Cài đặt Yeoman và Generator cho VSCode

VSCode cung cấp một trình sinh mã nguồn (generator) chính thức để khởi tạo dự án nhanh chóng. Cài đặt toàn cục thông qua npm:

npm install -g yo generator-code

2. Khởi tạo dự án mới

Chạy lệnh dưới đây trong terminal của bạn:

yo code

Lựa chọn các cấu hình sau trong trình hướng dẫn:

• What type of extension do you want to create? Chọn New Extension (TypeScript)
• What's the name of your extension? Nhập my-ai-agent
• What's the identifier? Nhấn Enter để dùng mặc định
• What's the description? Nhập mô tả ngắn cho AI Agent của bạn
• Initialize a git repository? Chọn Yes
• Which package manager to use? Chọn npm

Bước 2: Cấu hình file package.json

Mở thư mục dự án vừa được tạo ra. Tìm đến file package.json và cấu hình danh mục đóng góp lệnh (contributes) và các sự kiện kích hoạt (activationEvents) như sau:

{
  "name": "my-ai-agent",
  "displayName": "My AI Agent",
  "description": "An AI-powered coding assistant for VSCode",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.74.0"
  },
  "categories": ["Other"],
  "activationEvents": [
    "onCommand:my-ai-agent.askQuestion"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "my-ai-agent.askQuestion",
        "title": "Ask AI Question"
      }
    ]
  },
  "scripts": {
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./"
  },
  "devDependencies": {
    "@types/vscode": "^1.74.0",
    "typescript": "^4.9.5"
  },
  "dependencies": {
    "node-fetch": "^2.6.7"
  }
}

Bước 3: Viết Logic Kết Nối Với AI Agent

Mở file src/extension.ts. Đây là nơi chứa mã nguồn chính điều khiển hoạt động của extension. Chúng ta sẽ đăng ký lệnh askQuestion và thực hiện lời gọi API AI:

import * as vscode from 'vscode';
import fetch from 'node-fetch';

export function activate(context: vscode.ExtensionContext) {
    const disposable = vscode.commands.registerCommand('my-ai-agent.askQuestion', async () => {
        const question = await vscode.window.showInputBox({
            prompt: 'Ask your coding question'
        });

        if (!question) return;

        // Tiến hành gọi API (Chú ý: Nên lấy key từ cấu hình của Workspace để bảo mật)
        const apiKey = 'YOUR_API_KEY';
        
        vscode.window.withProgress({
            location: vscode.ProgressLocation.Notification,
            title: "AI đang suy nghĩ...",
            cancellable: false
        }, async () => {
            try {
                const response = await callAI(question, apiKey);
                vscode.window.showInformationMessage(response);
            } catch (error) {
                vscode.window.showErrorMessage('Đã xảy ra lỗi khi gọi AI API.');
            }
        });
    });

    context.subscriptions.push(disposable);
}

async function callAI(prompt: string, apiKey: string): Promise {
    const url = 'https://api.openai.com/v1/chat/completions';
    const body = JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [{ role: 'user', content: prompt }],
        max_tokens: 150
    });

    const res = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + apiKey
        },
        body
    });

    const data = (await res.json()) as any;
    return data.choices[0].message.content;
}

export function deactivate() {}

Mẹo bảo mật: Không nên hardcode API Key trực tiếp trong mã nguồn. Bạn có thể định cấu hình chúng trong phần Settings của VSCode bằng cách sử dụng vscode.workspace.getConfiguration().

Bước 4: Biên dịch và Chạy thử nghiệm

1. Biên dịch TypeScript

Đảm bảo project đã cài đặt đầy đủ các thư viện phụ thuộc bằng lệnh npm install, sau đó chạy trình biên dịch:

npm run compile

2. Chạy thử nghiệm trên cửa sổ Extension Host

• Nhấn phím F5 trên bàn phím (hoặc vào mục Run & Debug và nhấn Start Debugging).
• Một cửa sổ VSCode mới (Extension Development Host) sẽ được mở lên với extension đã được tải sẵn.
• Nhấn tổ hợp phím Ctrl+Shift+P (hoặc Cmd+Shift+P trên macOS) để mở Command Palette.
• Tìm kiếm lệnh Ask AI Question và nhấn Enter.
• Nhập một câu hỏi bất kỳ và theo dõi kết quả hiển thị thông báo phản hồi từ AI.

Bước 5: Các Tùy Chọn Nâng Cao

Từ nền tảng này, bạn có thể dễ dàng mở rộng và tùy chỉnh AI Agent của mình:

• Sử dụng mô hình local: Thay đổi địa chỉ API của hàm callAI trỏ về localhost ví dụ http://localhost:11434/v1 để gọi Ollama một cách hoàn toàn miễn phí và ngoại tuyến.
• Tích hợp Webview UI: Xây dựng một giao diện Chat Panel chuyên nghiệp ở thanh Sidebar thay vì dùng hộp thoại thông báo đơn giản.
• Truy xuất ngữ cảnh code: Đọc nội dung file hiện tại mà lập trình viên đang mở để đưa ra câu trả lời chính xác, giải thích dòng code lỗi trực quan.

Kết luận

Tự build một VSCode Extension cho riêng mình là một trải nghiệm tuyệt vời, giúp bạn cá nhân hóa hoàn toàn công cụ hỗ trợ lập trình của bản thân. Chúc các bạn thành công xây dựng một trợ lý AI đắc lực cho riêng mình!