Tạo ảnh trong VS Code: Hướng dẫn cấu hình Copilot MCP

Một máy chủ MCP cho VS Code giống như một hộp công cụ bên ngoài mà chế độ agent của GitHub Copilot có thể gọi trực tiếp từ khung chat: chỉ với một file JSON duy nhất trong kho lưu trữ của bạn, Copilot sẽ có thêm các công cụ mà các mô hình gốc của nó không sở hữu, bao gồm cả khả năng tạo hình ảnh. Copilot có thể viết các thành phần và cấu trúc lại (refactor) các bài kiểm tra suốt cả ngày, nhưng không có mô hình nào phía sau nó có thể tự tạo ra một file ảnh thực sự. Hãy thêm một máy chủ tạo ảnh và câu lệnh "tạo một banner tỷ lệ 16:9 cho file README này" sẽ trở thành một chỉ thị chat kết thúc bằng một file ảnh thực tế nằm trong thư mục assets/.

Dưới đây là toàn bộ thiết lập nếu đó là tất cả những gì bạn đang tìm kiếm. Hãy tạo một API key trong trang hồ sơ BananaBanana của bạn, sau đó lưu nội dung này vào file .vscode/mcp.json ở thư mục gốc của kho lưu trữ:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "bb-api-key",
      "description": "BananaBanana API key (bb_live_...)",
      "password": true
    }
  ],
  "servers": {
    "bananabanana": {
      "type": "http",
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:bb-api-key}"
      }
    }
  }
}

Khởi động máy chủ (VS Code hiển thị gợi ý Start ngay trong file), dán key của bạn một lần khi được yêu cầu, thế là xong. File cấu hình này không chứa bất kỳ thông tin nhạy cảm nào, vì vậy việc commit nó lên git là hoàn toàn an toàn. Không cần chạy tiến trình cục bộ, không cần tài khoản Google Cloud, không cần đăng ký gói dịch vụ: chi phí tạo ảnh chỉ từ $0.03 trừ trực tiếp vào số dư trả trước, video từ $0.10. Cả hai hình ảnh demo bên dưới đều được tạo bằng một key đang hoạt động thông qua cùng một endpoint HTTP mà cấu hình này trỏ tới, ngay trong lúc tôi viết bài viết này; chi tiết các bước xử lý (traces) và hóa đơn truyền thông trị giá $0.55 nằm ở phần dưới.

Tại sao nên trang bị cho GitHub Copilot khả năng tạo ảnh?

Bởi vì các kho lưu trữ code luôn cần hình ảnh vào những thời điểm bất tiện nhất. Một bức ảnh nổi bật (hero image) cho README để trang dự án không mở ra với một bức tường đầy các huy hiệu (shields) nhàm chán. Một biểu ngữ (banner) cho trang tài liệu hướng dẫn. Ngoại trừ ảnh chụp màn hình, mỗi tác vụ này trước đây đều là một hành trình vòng vèo: mở tab trình duyệt, nhập prompt, tải xuống, đổi tên, kéo thả vào thư mục dự án, rồi quay lại trình soạn thảo. Mất mười phút cho mỗi tài nguyên nếu mọi việc suôn sẻ.

Với một máy chủ MCP, Copilot sẽ tự động thực hiện chu trình đó trong chế độ agent. Nó tự viết prompt, gọi công cụ generate_image, tải file ảnh vào thư mục bạn chỉ định và chỉnh sửa đường dẫn tham chiếu trong file markdown. Việc của bạn chỉ là duyệt qua bản so sánh thay đổi (diff).

Lý do lớn hơn nằm ở khía cạnh làm việc nhóm, và đó cũng là lý do tại sao hướng dẫn này tồn tại dưới dạng một bài viết riêng biệt thay vì chỉ là một đoạn ngắn trong bài viết hướng dẫn Cursor. .vscode/mcp.json là một file cấu hình không gian làm việc (workspace). Bạn chỉ cần commit nó một lần và mọi nhà phát triển khi clone kho lưu trữ này về đều sẽ có ngay hộp công cụ tạo ảnh trong lần đầu tiên mở dự án, khi đó VS Code sẽ tự yêu cầu mỗi người nhập key của riêng họ. Một cấu hình dùng chung, một key cho mỗi cá nhân, hoàn toàn không để lộ thông tin mật trên git.

Các máy chủ MCP cục bộ cho việc tạo ảnh cũng tồn tại, và chúng hoạt động hoàn toàn ổn nếu bạn thích tự chạy một tiến trình Node và tự cấu hình Google API key cá nhân đi kèm with hạn mức (quotas) của riêng mình. Tuy nhiên, tùy chọn kết nối từ xa giúp bạn bỏ qua tất cả những bước phức tạp đó: endpoint đã chạy sẵn ở phía chúng tôi, sử dụng cùng một pipeline xử lý với bộ tạo ảnh trực tuyến BananaBanana, và thông tin xác thực duy nhất bạn cần là một key bb_live_ có thể dễ dàng thu hồi bất kỳ lúc nào.

Làm thế nào để thiết lập mcp.json trong VS Code?

Các thông tin cấu hình chi tiết đã được đối chiếu và xác thực theo tài liệu chính thức về MCP của VS Code cập nhật ngày 11 tháng 7 năm 2026. Bao gồm ba bước.

Bước đầu tiên, hãy đăng ký và mở mục Profile → MCP API Keys. Key chỉ được hiển thị một lần duy nhất và được lưu trữ dưới dạng mã hóa một chiều (hash) ở phía chúng tôi, vì vậy hãy sao chép nó ngay lập tức. Các tài khoản mới sẽ bắt đầu với số dư $0.20; số tiền này đủ để tạo sáu ảnh thử nghiệm trên mô hình rẻ nhất.

Bước thứ hai, tạo file cấu hình. Có hai vị trí được hỗ trợ:

• Thư mục .vscode/mcp.json trong dự án, đây là file rất đáng để commit lên git;
• File mcp.json ở cấp độ người dùng (Command Palette → MCP: Open User Configuration) giúp cấu hình này đi theo bạn tới mọi không gian làm việc.

Đoạn mã ở phần đầu bài viết sử dụng cơ chế inputs, và đây thực sự là cách xử lý thông tin bảo mật tinh tế nhất trong số tất cả các ứng dụng khách MCP mà tôi từng cấu hình. Biểu thức ${input:bb-api-key} yêu cầu VS Code hiển thị hộp thoại nhập giá trị trong lần đầu tiên máy chủ khởi động. Thuộc tính "password": true giúp ẩn đi những ký tự bạn nhập, và giá trị đó sẽ được đưa thẳng vào bộ lưu trữ mã hóa cục bộ của máy chứ không ghi vào file cấu hình. Hãy so sánh điều này với Cursor, nơi mà việc phân tích cú pháp ${env:…} phụ thuộc hoàn toàn vào việc trình biên dịch có thực sự đọc được môi trường shell của bạn hay không (một lỗi "hỏng hóc âm thầm" rất kinh điển của các ứng dụng khởi chạy từ giao diện GUI). VS Code đã giải quyết triệt để vấn đề này.

Bước thứ ba, khởi chạy máy chủ: Command Palette → MCP: List Servers → bananabanana → Start, hoặc nhấn vào nút gợi ý tích hợp sẵn (inline hint) ngay bên trong file JSON. Hãy mở khung Copilot Chat ở chế độ agent, kiểm tra bộ chọn công cụ (tools picker) và bạn sẽ thấy xuất hiện bảy công cụ, từ list_models cho đến list_generations. Trang tài liệu máy chủ MCP của chúng tôi luôn duy trì một bảng tương thích cho từng máy khách mà chúng tôi đã kiểm chứng; dòng dành cho VS Code chính là nội dung mà bài viết này đang khai triển chi tiết:

Vẫn không có gì hiển thị? Phần "Lỗi vặt" bên dưới sẽ bao gồm ba nguyên nhân phổ biến nhất, và một trong số đó liên quan đến chính sách của tổ chức (organization) trên GitHub mà bạn không thể tự sửa từ bên trong trình soạn thảo.

Trường hợp sử dụng: Tạo tài nguyên README và tài liệu trực tiếp vào kho lưu trữ

Kịch bản tôi xây dựng xung quanh bài viết này: nhóm của bạn đang mở nguồn một công cụ CLI, và dự án cần một tấm ảnh nổi bật cho README kèm một hình ảnh minh họa cho trang tài liệu bắt đầu nhanh (quickstart). Trong Copilot Chat (chế độ agent), bạn yêu cầu một banner, agent sẽ tự động soạn thảo một prompt mang phong cách nhiếp ảnh nghệ thuật và gọi công cụ tạo ảnh. Dưới đây là nhật ký hoạt động (trace) thực tế, chứa cả ID công việc thực thụ:

→ generate_image {"prompt": "A wide photorealistic hero banner for a GitHub
   README of an open-source terminal application: a sleek dark laptop on a
   light oak desk showing colorful command-line output, soft morning window
   light from the left, shallow depth of field, 50mm lens, generous clean
   negative space on the right side for a project title, no text, no logos",
   "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgq90ou00036k7f86f0y54w", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.18}
→ get_result {"job_id": "cmrgq90ou00036k7f86f0y54w"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

Chỉ mất khoảng hai mươi giây từ khi gọi lệnh cho đến khi có file ảnh. Dưới đây là kết quả chính xác từ lượt chạy đầu tiên:

Một lưu ý chân thành trước khi bạn xuất bản một bức ảnh như thế này: nếu bạn phóng to lên, phần "kết quả terminal" hiển thị trên màn hình máy tính chỉ là những ký tự vô nghĩa trông có vẻ giống thật (gibberish). Ở độ rộng thông thường của trang README, sẽ không một ai nhận ra điều đó. Nhưng với một bức ảnh nổi bật kích thước lớn cho tài liệu hướng dẫn nơi mà người xem có thể đọc được chữ, họ có thể sẽ phát hiện ra. Khả năng hiển thị văn bản giao diện (UI text) rõ ràng trong ảnh được tạo ra vẫn là điểm yếu của tất cả các mô hình tả thực (photorealistic) hiện nay, vì vậy hãy giữ cho phần màn hình hiển thị nhỏ lại hoặc yêu cầu một màn hình mang tính trừu tượng thay thế.

Hình ảnh cho trang hướng dẫn bắt đầu nhanh của tài liệu cũng được thực hiện tương tự với một mô tả mang tính nhẹ nhàng và tối giản hơn: góc chụp flat-lay từ trên xuống, bàn phím, một bản vẽ kiến trúc in giấy đính kèm các mẩu giấy ghi chú (sticky notes), một tách trà. Chỉ một lần gọi lệnh, chi phí $0.11:

Cả hai bản demo đều chạy trên Nano Banana Pro vì chúng được trưng bày trực tiếp trên trang này. Đối với các trang wiki nội bộ hay các mẫu báo cáo lỗi (issue templates), tôi sẽ chuyển thẳng xuống sử dụng mô hình nano-banana-2-lite với mức giá chỉ $0.03 mà không cần đắn đo suy nghĩ; bản hướng dẫn dòng Lite của chúng tôi chỉ rõ những trường hợp mà mô hình giá rẻ này là hoàn toàn đủ tốt. Các đường dẫn file có chữ ký (signed URLs) sẽ có hiệu lực trong vòng 24 giờ, và một lệnh gọi get_result mới sẽ cấp lại đường dẫn mới cho bạn.

Khả năng tạo video cũng hoạt động ngay trong cùng khung chat này. Công cụ generate_video không bao giờ tính phí ở lần gọi đầu tiên: nó sẽ trả về một báo giá (quote), và agent phải lặp lại lệnh gọi kèm theo tham số confirm_cost để đồng ý với số tiền chính xác đó. Một đoạn clip 720p không tiếng bắt đầu từ $0.10; đối với mô hình Omni Flash đi kèm âm thanh có giá $0.10 mỗi giây, tức $0.30 cho một cảnh quay dài ba giây.

Những lỗi vặt trong VS Code cần biết trước khi bạn triển khai rộng rãi

Được thu thập trong quá trình chạy thử nghiệm thiết lập ở trên, được sắp xếp theo thứ tự dễ khiến bạn gặp rắc rối nhất.

1. Key cấp cao nhất phải là servers, chứ không phải mcpServers. Mọi ứng dụng khách phổ biến khác (Claude, Cursor, Windsurf) đều sử dụng mcpServers. Do đó, các cấu hình sao chép từ tài liệu của các công cụ khác sẽ bị lỗi trong VS Code, và các cảnh báo cú pháp JSON schema thì lại rất dễ bị bỏ qua. Bạn cũng sẽ gặp phải cái bẫy tương tự theo chiều ngược lại khi sao chép các đoạn mã cấu hình của VS Code sang các công cụ khác. Thuộc tính type: "http" cũng là một chi tiết nên giữ lại một cách rõ ràng đối với các máy chủ từ xa.

2. Việc thay đổi giá trị đầu vào đã lưu khó khăn một cách kỳ lạ. Hộp thoại đầu tiên sẽ lưu key của bạn vào vùng nhớ mã hóa của hệ thống, và sau đó không có bất kỳ nút "chỉnh sửa thông tin bảo mật" nào hiển thị trực quan cả. Cách xử lý khả thi duy nhất: mở .vscode/mcp.json, di chuột qua máy chủ đó, và sử dụng các công cụ điều khiển tích hợp sẵn (inline controls) để khởi động lại with các dữ liệu đầu vào đã được làm sạch, hoặc xóa hoàn toàn giá trị cũ thông qua MCP: List Servers → chọn máy chủ → ngắt kết nối (disconnect) và thêm lại từ đầu. Tác vụ này sẽ còn rắc rối hơn nhiều khi thao tác qua kết nối Remote SSH, nơi mà việc hiển thị lại hộp thoại nhập liệu vẫn tồn tại những lỗi đã biết được ghi nhận trên hệ thống theo dõi lỗi của VS Code. Việc thay thế một chiếc key đã bị thu hồi có thể ngốn của bạn một phút bấm chuột liên tục mà bạn không hề lường trước.

3. Trên tài khoản Copilot Business hoặc Enterprise, tính năng MCP sẽ bị tắt cho đến khi quản trị viên kích hoạt chính sách. Chính sách "MCP servers in Copilot" bị vô hiệu hóa theo mặc định đối với các tài khoản do tổ chức hoặc doanh nghiệp cấp phát, theo tài liệu chính sách của GitHub. Điểm gây bối rối nhất là biểu hiện khi lỗi xảy ra: máy chủ khởi động hoàn toàn bình thường, file cấu hình được xác thực hợp lệ, nhưng các công cụ tạo ảnh đơn giản là không bao giờ xuất hiện trong khung chat. Nếu bạn đang sử dụng gói Copilot cá nhân (bao gồm cả bản dùng thử miễn phí Free), giới hạn này sẽ không áp dụng cho bạn.

4. Có một giới hạn nghiêm ngặt là tối đa 128 công cụ cho mỗi yêu cầu chat. Các công cụ tích hợp sẵn, công cụ từ các tiện ích mở rộng rộng khác và mọi máy chủ MCP được kích hoạt đều được tính vào giới hạn này, dựa theo tài liệu về công cụ agent. Máy chủ của chúng tôi chỉ bổ sung thêm bảy công cụ, con số này không đáng kể, nhưng nếu bạn tích hợp cùng lúc nhiều máy chủ chứa lượng công cụ đồ sộ, các yêu cầu chat sẽ bắt đầu bị lỗi cho đến khi bạn bỏ chọn bớt các máy chủ trong danh sách công cụ. Dù VS Code có thể gộp các công cụ dư thừa lại phía sau các công cụ ảo (virtual tools), nhưng theo kinh nghiệm của tôi, cách tốt nhất vẫn là chỉ kích hoạt những máy chủ mà bạn thực sự cần dùng tới.

5. Các công cụ chỉ hoạt động ở chế độ agent, và mỗi cuộc gọi lệnh đều yêu cầu xác nhận từ bạn. Các công cụ MCP không thể được kích hoạt từ chế độ hỏi đáp thông thường (plain ask mode), vì vậy nếu mô hình cứ tiếp tục mô tả ảnh bằng lời thay vì thực sự tạo ảnh, hãy kiểm tra lại menu lựa chọn chế độ chat đầu tiên. Hộp thoại xác nhận cung cấp một menu để bạn cho phép công cụ hoạt động trong phiên làm việc hiện tại, trong không gian làm việc này, hoặc luôn luôn cho phép (always). Đối với các công cụ miễn phí như list_models hay get_result, lựa chọn "always" là rất tiện lợi. Tuy nhiên với generate_image, tôi khuyên bạn nên giữ nguyên chế độ xác nhận cho từng lần gọi lệnh, vì mỗi lần tạo ảnh đều tiêu tốn tiền thật; riêng đối với video thì dù thế nào chúng tôi cũng đã khóa bảo mật hai lớp bằng thuộc tính confirm_cost ở phía máy chủ.

Chi chi phí tạo các sản phẩm truyền thông demo trong bài viết này là bao nhiêu?

Mức giá tiêu chuẩn cho mỗi lần tạo ảnh, chính là các con số mà công cụ list_models báo cáo trực tiếp cho agent của bạn:

Lần này, tất cả các tài nguyên đều được tạo thành công ngay từ lượt thử đầu tiên. Điều đó không phải lúc nào cũng xảy ra, vì vậy hãy chuẩn bị sẵn một khoản ngân sách dự phòng cho việc tạo lại (reroll) đối với bất kỳ hình ảnh nào có hiển thị màn hình thiết bị hoặc có cấu trúc hình học vật thể phức tạp, và hãy luôn kiểm tra kỹ các kết quả ở kích thước đầy đủ trước khi merge chúng vào nhánh chính (main branch).

Nếu bạn đã sử dụng máy chủ này trong một trình soạn thảo khác, file cấu hình .vscode/mcp.json ở trên là phần mới duy nhất: vẫn dùng chung key đó, cùng số dư đó và lịch sử tạo ảnh đó. Nếu bạn mới bắt đầu từ con số không, bài viết hướng dẫn Claude Code có thêm bốn trường hợp sử dụng khác có thể áp dụng gần như nguyên văn. Hãy bắt đầu bất cứ khi nào bạn sẵn sàng: tạo một key và yêu cầu Copilot vẽ cho bạn bức banner README đầu tiên nhé.

Những câu hỏi thường gặp (FAQ)

VS Code có hỗ trợ các máy chủ MCP từ xa đi kèm tiêu đề (header) Authorization không?

Có, hỗ trợ gốc (natively). Một máy chủ từ xa được định nghĩa là type: "http" đi kèm giá trị url và một đối tượng headers tùy chọn trong file mcp.json, kết hợp với các tham chiếu ${input:…} để giữ cho key bảo mật không bị lộ ra ngoài file cấu hình, thông tin này đã được xác thực dựa trên tài liệu chính thức về MCP của VS Code vào ngày 11 tháng 7 năm 2026. VS Code cũng hỗ trợ giao thức OAuth cho các máy chủ từ xa; hiện tại endpoint của chúng tôi xác thực bằng Bearer key, và chúng tôi đã có kế hoạch hỗ trợ thêm tùy chọn thứ hai là OAuth 2.1 trong tương lai.

Có an toàn khi commit file .vscode/mcp.json lên git không?

Có, hoàn toàn an toàn nếu chiếc key bảo mật được đặt trong một tham chiếu inputs thay vì ghi trực tiếp vào file. File JSON được commit lên hệ thống chỉ mang tính chất chứa chỗ giữ chỗ (placeholder); VS Code sẽ tự động yêu cầu từng nhà phát triển nhập key riêng của họ trong lần khởi động đầu tiên và lưu giữ thông tin đó trong bộ nhớ mã hóa cục bộ. Việc phân tách key theo từng cá nhân như thế này là cực kỳ hữu ích: mỗi key sẽ có một lịch sử nhật ký hoạt động riêng biệt và có thể tùy chọn đặt giới hạn chi tiêu USD hàng ngày trong mục Profile → MCP API Keys, và khi một nhân sự rời nhóm, việc thu hồi quyền truy cập chỉ mất một cú nhấp chuột mà hoàn toàn không ảnh hưởng đến bất kỳ ai khác.

Tại sao các công cụ MCP không xuất hiện trong khung chat Copilot Chat?

Có ba nguyên nhân chính chiếm hầu hết các trường hợp. Đầu tiên, bạn chưa chuyển sang chế độ agent, các chế độ chat khác sẽ không hiển thị các công cụ MCP. Thứ hai, máy chủ chưa từng được khởi chạy, vì vậy hãy chạy lệnh MCP: List Servers để kiểm tra trạng thái hoạt động của nó. Cuối cùng, tài khoản Copilot của bạn được cấp phát từ một tổ chức (organization) và chính sách "MCP servers in Copilot" vẫn đang bị vô hiệu hóa (lỗi này xảy ra một cách âm thầm); chỉ có quản trị viên của tổ chức mới có quyền kích hoạt nó. Nếu các công cụ vẫn hiển thị nhưng các cuộc gọi lệnh trả về mã lỗi 401, điều đó có nghĩa là bản thân chiếc key của bạn đã bị nhập sai hoặc bị thu hồi, một yêu cầu thô gửi trực tiếp từ đoạn mã ví dụ trên trang cấu hình máy chủ MCP của chúng tôi sẽ giúp bạn xác nhận điều đó chỉ trong vài giây.

Tôi có cần Google API key để tạo ảnh trong VS Code không?

Không cần. Các máy chủ MCP tạo ảnh chạy cục bộ ở máy trạm sẽ giao tiếp trực tiếp với Gemini API, điều đó đồng nghĩa với việc bạn phải tự chuẩn bị Google key, tự chịu trách nhiệm về hạn mức sử dụng và thanh toán hóa đơn cá nhân. Trong khi đó, máy chủ từ xa của chúng tôi sẽ thực hiện việc tạo ảnh trên hệ thống quản lý tập trung các Vertex AI keys của BananaBanana, và thông tin xác thực duy nhất bạn cần là key bb_live_ lấy từ trang cá nhân: chi phí được tính theo lượt tạo ảnh thực tế, không yêu cầu mức chi tiêu tối thiểu, dùng chung một tài khoản số dư trả trước với ứng dụng web trực tuyến.

GitHub Copilot có thể tạo video thông qua cùng một máy chủ này không?

Có, thông qua một bước xác nhận chi phí bổ sung. Công cụ generate_video trước hết sẽ trả về một báo giá dự kiến, và agent phải thực hiện lại cuộc gọi lệnh kèm thuộc tính confirm_cost khớp chính xác với số tiền đó trước khi hệ thống tiến hành trừ phí. Chi phí dao động từ $0.10 cho một đoạn clip ngắn không tiếng độ phân giải 720p cho tới $4.40 cho một tác phẩm dựng hình Veo 3.1 cao cấp đi kèm âm thanh, và Omni Flash đi kèm âm thanh được tính phí $0.10 mỗi giây ($0.30–$1.00 mỗi clip). Các đoạn clip ngắn thường mất từ một đến mười phút để hoàn tất, do đó agent sẽ tự động chạy ngầm lệnh kiểm tra get_result liên tục trong khi vẫn tiếp tục viết code chính cho bạn một cách bình thường.