Visual Studio Code và GitHub Copilot có thể đóng vai client và dùng một MCP server. Vì sao lại muốn vậy? Vì như thế mọi tính năng của MCP server đều dùng được ngay trong IDE. Hãy tưởng tượng bạn thêm MCP server của GitHub: bạn có thể điều khiển GitHub bằng prompt thay vì gõ lệnh cụ thể trong terminal. Hoặc bất cứ thứ gì giúp cải thiện trải nghiệm lập trình, tất cả được điều khiển bằng ngôn ngữ tự nhiên. Giờ bạn đã thấy lợi ích rồi chứ?
Tổng quan
Bài này hướng dẫn dùng Visual Studio Code và chế độ Agent của GitHub Copilot làm client cho MCP server của bạn.
Mục tiêu học tập
Sau bài này, bạn sẽ có thể:
- Dùng một MCP server qua Visual Studio Code.
- Chạy các khả năng (capability) như tool qua GitHub Copilot.
- Cấu hình Visual Studio Code để tìm và quản lý MCP server.
Cách dùng
Bạn có thể điều khiển MCP server theo hai cách:
-
Giao diện người dùng: bạn sẽ thấy cách làm ở phần sau của bài.
-
Terminal: có thể điều khiển từ terminal bằng lệnh
code.Để thêm một MCP server vào hồ sơ người dùng, dùng tuỳ chọn dòng lệnh
--add-mcpvà cung cấp cấu hình server dạng JSON theo mẫu{\"name\":\"server-name\",\"command\":...}.codecode --add-mcp "{\"name\":\"my-server\",\"command\": \"uvx\",\"args\": [\"mcp-server-fetch\"]}"
Ảnh chụp màn hình
Các phần sau nói kỹ hơn về cách dùng giao diện trực quan.
Cách tiếp cận
Ở mức tổng quan, ta làm như sau:
- Cấu hình một file để tìm MCP server.
- Khởi động/kết nối tới server để nó liệt kê capability.
- Dùng các capability đó qua giao diện GitHub Copilot Chat.
Tốt, giờ đã hiểu luồng, hãy thử dùng một MCP server qua Visual Studio Code bằng bài thực hành.
Bài thực hành: dùng một server
Trong bài này, ta cấu hình Visual Studio Code để tìm MCP server của bạn, nhờ đó dùng được nó từ giao diện GitHub Copilot Chat.
Bước 0: bật tính năng khám phá MCP server
Có thể bạn cần bật tính năng khám phá MCP server.
- Vào
File -> Preferences -> Settingstrong Visual Studio Code. - Tìm "MCP" và bật
chat.mcp.discovery.enabledtrong file settings.json.
Bước 1: tạo file cấu hình
Bắt đầu bằng việc tạo file cấu hình ở thư mục gốc của project: một file tên MCP.json đặt trong thư mục .vscode, như sau:
.vscode
|-- mcp.json
Tiếp theo, hãy xem cách thêm một mục server.
Bước 2: cấu hình server
Thêm nội dung sau vào mcp.json:
{
"inputs": [],
"servers": {
"hello-mcp": {
"command": "node",
"args": [
"build/index.js"
]
}
}
}
Đây là ví dụ đơn giản cách khởi động một server viết bằng Node.js. Với runtime khác, hãy chỉ ra lệnh khởi động server phù hợp bằng command và args.
Bước 3: khởi động server
Đã thêm mục server, giờ hãy khởi động nó:
-
Tìm mục của bạn trong mcp.json và tìm biểu tượng "play":
-
Bấm biểu tượng "play", bạn sẽ thấy biểu tượng tool trong GitHub Copilot Chat tăng số tool có sẵn. Bấm vào biểu tượng tool đó, bạn sẽ thấy danh sách tool đã đăng ký. Bạn có thể chọn/bỏ chọn từng tool tuỳ việc có muốn GitHub Copilot dùng chúng làm ngữ cảnh hay không:
-
Để chạy một tool, gõ prompt mà bạn biết sẽ khớp với mô tả của một tool, ví dụ "add 22 to 1":
Bạn sẽ thấy câu trả lời là 23.
Bài tập
Thử thêm một mục server vào file mcp.json và đảm bảo bạn khởi động/dừng được server. Đồng thời đảm bảo bạn giao tiếp được với các tool trên server qua giao diện GitHub Copilot Chat.
Lời giải: solution.
Điểm chính
- Visual Studio Code là một client tuyệt vời, cho phép dùng nhiều MCP server và tool của chúng.
- Giao diện GitHub Copilot Chat là nơi bạn tương tác với các server.
- Khi cấu hình mục server trong file mcp.json, bạn có thể yêu cầu người dùng nhập các giá trị như API key để truyền cho MCP server.
Mẫu code
Tài liệu thêm
Bài tiếp theo: Server dùng transport stdio.
Nguồn
- Dịch và biên tập từ microsoft/mcp-for-beginners · 03-GettingStarted/04-vscode/README.md, giấy phép MIT.