Quay lại blog
BananaBanana Teamtutorialmcpcline

Cline MCP Server: Tạo hình ảnh trực tiếp từ trình soạn thảo

Kết nối Cline với máy chủ MCP từ xa để tạo hình ảnh trong chế độ Plan & Act: cấu hình streamableHttp, bảo vệ auto-approve và chi phí chỉ từ $0.03.

Cline MCP Server: Tạo hình ảnh trực tiếp từ trình soạn thảo

Máy chủ MCP từ xa trong Cline là một bộ công cụ lưu trữ trên đám mây mà agent gọi qua giao thức HTTP: bạn chỉ cần thêm một khối cấu hình vào tệp JSON cài đặt MCP, và Cline sẽ thực hiện được những tác vụ mà không một mô hình ngôn ngữ đơn lẻ nào có thể tự làm. Tạo tệp hình ảnh là ví dụ rõ ràng nhất. Cline có thể tái cấu trúc mã nguồn, chạy kiểm thử và viết kịch bản di chuyển cơ sở dữ liệu, nhưng sẽ dừng lại hoàn toàn khi gặp yêu cầu «chèn ảnh sản phẩm vào đây».

Hướng dẫn thiết lập nhanh cho người muốn bắt đầu ngay. Hãy tạo một khóa API trong hồ sơ BananaBanana của bạn, mở cài đặt MCP của Cline và thêm đoạn mã sau:

{
  "mcpServers": {
    "bananabanana": {
      "type": "streamableHttp",
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer bb_live_YOUR_KEY"
      },
      "disabled": false,
      "autoApprove": ["list_models", "get_account", "get_result"]
    }
  }
}

Mười công cụ sẽ xuất hiện trong bảng điều khiển. Chi phí tạo hình ảnh tính từ $0.03 mỗi ảnh trừ vào số dư trả trước, và video từ $0.10. Dòng cấu hình type là bắt buộc, và việc bỏ qua nó sẽ dẫn đến lỗi kết nối ngầm mà tôi sẽ giải thích chi tiết ở phần dưới.

Tại sao nên tích hợp trình tạo hình ảnh vào Cline?

Quy trình cốt lõi của Cline là «mô tả kết quả mong muốn và để agent thực hiện các bước xử lý». Quy trình này hoạt động trơn tru cho đến khi kết quả cần có một hình ảnh. Lúc đó chu trình bị gián đoạn và bạn phải thao tác thủ công: mở trình duyệt, nhập prompt, tải về, đổi tên, chuyển vào thư mục public/, quay lại trình soạn thảo và lấy lại mạch tư duy. Mất năm phút cho mỗi tài nguyên, và sự đứt quãng tập trung còn gây lãng phí nhiều hơn năm phút đó.

Với công cụ MCP, agent sẽ tự động hóa toàn bộ chu trình. Nó tự viết prompt, gọi hàm generate_image, lưu tệp hoàn thiện vào thư mục chỉ định và cập nhật mã giao diện. Việc của bạn chỉ là kiểm tra lại mã khác biệt (diff).

Mô hình chi phí cũng rất phù hợp với người dùng Cline. Cline hoạt động theo mô hình tự mang mô hình (BYOM), do đó người dùng đã quen với việc thanh toán theo mức sử dụng thực tế thay vì gói thuê bao hàng tháng. Giá tạo hình ảnh của chúng tôi cũng hoạt động tương tự: không gói cố định, không phí thành viên, không yêu cầu mức chi tiêu tối thiểu. Hình ảnh từ $0.03, video từ $0.10, trừ dần vào số dư nạp linh hoạt.

Giải pháp thay thế là tự chạy một máy chủ MCP cục bộ, đòi hỏi một tiến trình Node hoặc Python chạy trên máy của bạn, khóa API riêng từ nhà cung cấp và phải tự quản lý hạn mức cũng như hóa đơn. Một endpoint lưu trữ đám mây giúp loại bỏ cả hai sự phức tạp này. Việc xử lý diễn ra trên hạ tầng của chúng tôi qua cùng một quy trình với trình tạo web, và thông tin xác thực duy nhất bạn cần là một khóa API có thể thu hồi bất cứ lúc nào.

Minh họa cửa sổ dòng lệnh với băng chuyền vận chuyển các bức tranh đóng khung vào một thư mục mở

Cách thêm máy chủ MCP từ xa vào Cline

Có ba cách với kết quả hoàn toàn như nhau. Các thông tin dưới đây đã được xác minh theo tài liệu chính thức của Cline MCP tính đến ngày 20 tháng 8 năm 2026.

Qua giao diện người dùng. Nhấp vào biểu tượng MCP Servers trên thanh công cụ của Cline, mở tab Remote Servers, nhập tên máy chủ, URL https://bananabanana.pro/api/mcp, và chọn Streamable HTTP làm phương thức truyền tải. Nhấp Add Server. Sau đó quay lại cấu hình để thêm tiêu đề Authorization: biểu mẫu giúp tạo nhanh nhưng thông tin xác thực được lưu trong tệp JSON.

Chỉnh sửa tệp JSON trực tiếp. Nhấp vào biểu tượng tương tự, chọn tab Configure, rồi bấm nút Configure MCP Servers để mở tệp cài đặt tiện ích mở rộng. Tệp này nằm trong bộ lưu trữ toàn cục của VS Code, dưới thư mục saoudrizwan.claude-dev (ID tiện ích vẫn mang tên tác giả ban đầu, dễ gây nhầm lẫn khi tìm kiếm thư mục tên «cline»). Trên CLI, đường dẫn đơn giản là ~/.cline/mcp.json, và lệnh cline mcp sẽ mở trình hướng dẫn tương tác.

Từ dòng lệnh. Lệnh cline config mcp --json sẽ in ra cấu hình hiện tại đang được nạp, đây là cách nhanh nhất để xác nhận các thay đổi đã được áp dụng.

Dù sử dụng cách nào, endpoint chính xác luôn là https://bananabanana.pro/api/mcp. Không sử dụng /mcp, vì đây là trang tài liệu dành cho người đọc và sẽ trả về HTML khi nhận yêu cầu POST. Trang máy chủ MCP của chúng tôi cung cấp đoạn mã cấu hình chuẩn và bảng tương thích chi tiết:

Đoạn mã cấu hình MCP chuẩn trên trang tài liệu BananaBanana hiển thị URL endpoint và tiêu đề Authorization

Hãy kiểm tra bằng một lệnh gọi miễn phí trước khi sử dụng số dư. Hàm get_account trả về số dư, tên khóa và hạn mức hàng ngày; list_models hiển thị toàn bộ danh sách mô hình cùng mức giá hiện tại. Cả hai đều miễn phí và xác nhận trạng thái xác thực trong khoảng một giây.

Tình huống thực tế: Tạo hàng loạt ảnh mẫu cho danh mục sản phẩm trong chế độ Act

Đây chính là nơi Cline phát huy tối đa sức mạnh, vượt trội hoàn toàn so với việc chỉ tạo một ảnh bìa đơn lẻ. Đầu tiên dùng chế độ Plan: mô tả danh mục gồm 12 sản phẩm cần hình ảnh mẫu theo phong cách thiết kế đồng nhất, và để Cline lập kế hoạch chu trình xử lý trước khi chỉnh sửa tệp. Sau đó chế độ Act sẽ tiến hành thực thi.

Phong cách đồng nhất được duy trì thông qua một cấu trúc mô tả cố định được tái sử dụng trong mỗi lệnh gọi, chỉ thay đổi tên sản phẩm chính. Sự nhất quán của bộ ảnh bắt nguồn từ phần bất biến trong prompt, chứ không phải do mô hình ghi nhớ những gì đã làm trước đó:

→ generate_image {"prompt": "A photorealistic overhead product shot of a
   small monstera in a matte terracotta pot on a pale linen backdrop, soft
   diffused window light from the left, 50mm lens, subtle natural shadow,
   generous empty space around the subject, no text",
   "model": "nano-banana-pro", "aspect_ratio": "4:5"}
← {"job_id": "…", "status": "processing", "cost_charged_usd": 0.11,
   "balance_remaining_usd": 1110.65}

Ảnh mẫu sản phẩm cây trầu bà trong chậu đất nung trên nền vải lanh sáng màu, do Cline tạo qua máy chủ MCP

Sản phẩm thứ hai, cùng cấu trúc phong cách nhưng thay đổi loại cây và góc chụp:

Ảnh mẫu sản phẩm cây lưỡi hổ trong chậu gốm trên nền bê tông, được tạo theo cùng cấu trúc phong cách

Mười hai hình ảnh như vậy trên Nano Banana Pro có giá $1.32. Với mô hình tiêu chuẩn nano-banana-2-lite, chi phí chỉ là $0.36, rất phù hợp cho các hình ảnh giữ chỗ tạm thời mà sau này nhà thiết kế sẽ thay thế; hướng dẫn Lite của chúng tôi giải thích chi tiết giới hạn của mô hình tiết kiệm này. Trong bài viết này, chúng tôi sử dụng Pro để hiển thị chất lượng đầy đủ trên trang.

Tạo ảnh hàng loạt là tình huống bắt buộc cần có các chốt an toàn. Có hai cơ chế bảo vệ: bạn có thể đặt hạn mức chi tiêu USD hàng ngày cho từng khóa trong Hồ sơ → Khóa API MCP để ngăn chặn vòng lặp vô tận làm cạn số dư. Ngoài ra, các yêu cầu tạo nhiều ảnh (number_of_images lớn hơn 1) hoạt động tương tự video: lệnh gọi đầu tiên chỉ trả về ước tính chi phí và không trừ tiền cho đến khi agent gửi lại yêu cầu kèm confirm_cost.

Tạo video cũng thực hiện được trong cùng cuộc trò chuyện với quy tắc xác nhận tương tự. Đoạn video không tiếng 4 giây độ phân giải 720p trên Veo 3.1 Lite có giá từ $0.10, và Omni Flash có giá $0.10 mỗi giây luôn kèm âm thanh ($0.30 cho đoạn 3 giây). Quá trình kết xuất mất từ 1 đến 10 phút; do generate_video trả về ID tác vụ ngay lập tức, Cline có thể tiếp tục viết mã và kiểm tra kết quả qua get_result trong nền.

Những điểm cần lưu ý về Cline trước khi triển khai

Năm chi tiết kỹ thuật quan trọng được sắp xếp theo mức độ tiết kiệm thời gian cho bạn.

Minh họa robot nhỏ trước bảng điều khiển có các công tắc bảo vệ và đồng hồ đo xu

1. "type": "streamableHttp" phải được viết chính xác từng chữ, nếu thiếu sẽ gây lỗi ngầm. Tài liệu nêu rõ: nếu bỏ trống trường này, ứng dụng sẽ mặc định chuyển về phương thức cũ sse để tương thích ngược. SSE cũ yêu cầu ứng dụng gửi yêu cầu GET chờ luồng sự kiện, trong khi endpoint của chúng tôi là Streamable HTTP không trạng thái, nên yêu cầu GET sẽ nhận mã lỗi 405 Method Not Allowed (tôi đã kiểm tra lại: curl -i https://bananabanana.pro/api/mcp trả về 405). Trong Cline, lỗi này hiển thị dưới dạng không thể kết nối mà không nêu rõ nguyên nhân thiếu trường cấu hình. Cách viết có dấu gạch nối streamable-http cũng sẽ thất bại tương tự.

2. Khóa API được lưu dưới dạng văn bản thuần trong tệp cấu hình. Mặc dù tài liệu Cline khuyên nên dùng biến môi trường, nhưng việc chèn biến trong đối tượng headers của máy chủ từ xa chưa được hỗ trợ chính thức (khác với cú pháp ${env:…} trong Cursor hay ${file:…} trong Windsurf). Điểm an toàn là tệp cấu hình nằm trong bộ lưu trữ toàn cục của VS Code chứ không nằm trong thư mục mã nguồn dự án, tránh nguy cơ vô tình commit lên Git. Dù vậy, hãy xem khóa như một bí mật: đặt hạn mức hàng ngày và thu hồi khóa từ hồ sơ ngay khi đổi máy làm việc.

3. Tính năng Auto Approve có phạm vi rộng hơn bạn nghĩ. Trong bảng Auto Approve của Cline, tùy chọn «Use MCP servers» là một công tắc duy nhất áp dụng cho toàn bộ công cụ MCP: bật nó sẽ tự động phê duyệt cả công cụ trả phí lẫn miễn phí. Để kiểm soát từng công cụ, hãy thiết lập trong mảng autoApprove của tệp JSON. Tôi khuyên bạn nên chỉ thêm ba hàm miễn phí (list_models, get_account, get_result) vào danh sách trắng để không bị làm phiền trong khi mỗi lần tạo ảnh trả phí vẫn yêu cầu sự xác nhận của bạn.

4. Cần cẩn trọng khi kết hợp chế độ YOLO với các công cụ trả phí. Chế độ YOLO của Cline tự động phê duyệt mọi thao tác: sửa tệp, lệnh terminal, trình duyệt và công cụ MCP. Tài liệu cảnh báo đây là chế độ nguy hiểm. Bước xác nhận chi phí của chúng tôi sẽ không bảo vệ được bạn trong chế độ này vì agent tự hành sẽ tự động đồng ý cả hai bước báo giá và xác nhận. Biện pháp bảo vệ duy nhất là hạn mức chi tiêu hàng ngày trên từng khóa. Hãy thiết lập hạn mức trước khi bật chế độ YOLO.

5. Không có cài đặt qua chợ tiện ích và cấu hình doanh nghiệp có quy trình riêng. Tiện ích VS Code dựa trên SDK chính thức không còn giao diện duyệt MCP Marketplace, do đó chỉnh sửa JSON thủ công là quy trình chuẩn. Quản trị viên doanh nghiệp có thể sử dụng tham số remoteMCPServers trong cấu hình từ xa của tổ chức để triển khai máy chủ tập trung cho toàn bộ nhân viên, kết hợp với blockPersonalRemoteMCPServers để ngăn chặn thêm máy chủ cá nhân. Khi triển khai cho nhóm, hãy cấu hình tập trung và cấp cho mỗi lập trình viên một khóa riêng.

Một hạn chế từ phía dịch vụ của chúng tôi: hàm generate_speech trả về liên kết tệp WAV đã ký thay vì trình phát nhúng trong bảng điều khiển Cline, nên cần mở tệp để nghe. Đối với hình ảnh, bản xem trước thu nhỏ sẽ hiển thị ngay cạnh URL. Do Cline đã hỗ trợ hiển thị hình ảnh trong kết quả công cụ từ năm 2025 nên tính năng xem trước hoạt động mượt mà trên mọi phiên bản hiện tại.

Cline có hỗ trợ xác thực OAuth cho máy chủ MCP từ xa không?

Theo tài liệu chính thức thì chưa, và điều này cần được nêu rõ vì khả năng hỗ trợ khác nhau giữa các ứng dụng. Tài liệu của Cline đề cập đến stdio, SSE và Streamable HTTP với xác thực qua tiêu đề tùy chỉnh. OAuth chưa được tích hợp. Yêu cầu tính năng hỗ trợ OAuth đã mở trên kho mã nguồn của Cline từ tháng 8 năm 2025 và vẫn đang mở tính đến ngày 20 tháng 8 năm 2026.

Trên thực tế, điều này không gây trở ngại. Máy chủ của chúng tôi chấp nhận cả mã token OAuth 2.1 lẫn khóa Bearer API, và Cline được thiết kế tối ưu cho hình thức khóa API. Đây cũng là phương án tôi khuyến khích: tạo khóa hoàn toàn miễn phí, bạn có thể tạo nhiều khóa và mỗi khóa có nhật ký sử dụng riêng (công cụ, mô hình, chi phí, trích đoạn prompt) cùng hạn mức hàng ngày. Khi cộng tác viên hoàn thành hợp đồng, bạn chỉ cần thu hồi một khóa đó mà không ảnh hưởng đến toàn đội ngũ.

Để phân tách chi phí dự án, hãy tạo khóa riêng cho từng dự án. Nhật ký sử dụng sẽ giúp bạn phân biệt rõ chi phí phát triển bảng điều khiển nội bộ so với trang web tiếp thị khi thanh toán hóa đơn.

Chi phí tạo các hình ảnh minh họa trong bài viết này

Mức giá tiêu chuẩn cho mỗi lần tạo ảnh, hoàn toàn khớp với bảng giá do list_models cung cấp:

Tài nguyênMô hìnhChi phí
Ảnh mẫu danh mục, trầu bàNano Banana Pro, 1K$0.11
Ảnh mẫu danh mục, lưỡi hổNano Banana Pro, 1K$0.11
Ảnh bìa + 2 hình minh họaNano Banana Pro, 1K$0.33
Ảnh chụp màn hình tài liệutrình duyệt, không tốn phí$0.00
Tổng cộng$0.55

Lưu ý hữu ích khi nạp tiền: nạp từ $50 trở lên nhận thêm +5% số dư, từ $100 trở lên nhận thêm +10%, và mã khuyến mãi hợp lệ cộng thêm +10% trên số tiền nạp. Cả hai phần thưởng đều tính trên số tiền gốc, do đó nạp $100 kèm mã khuyến mãi sẽ nhận được $120.

Cùng một khóa API có thể dùng trên các môi trường khác như Cursor hay VS Code mà không cần tạo mới — dùng chung số dư, lịch sử tập trung và một endpoint duy nhất. Hướng dẫn cho Cursorcấu hình cho VS Code cung cấp thông tin chi tiết. Tạo khóa API và để Cline tạo lô hình ảnh đầu tiên cho bạn.

Câu hỏi thường gặp (FAQ)

Cline có hỗ trợ máy chủ MCP từ xa qua Streamable HTTP không?

Có, và đây là phương thức truyền tải được khuyến nghị trong tài liệu chính thức của Cline. Máy chủ từ xa được cấu hình gồm url, type đặt là streamableHttp và đối tượng headers để xác thực. Phải luôn khai báo type rõ ràng: nếu bỏ qua, hệ thống sẽ quay về SSE cũ và không hoạt động được với endpoint không trạng thái hiện đại. Đã xác minh theo tài liệu chính thức ngày 20 tháng 8 năm 2026.

Tệp cấu hình MCP của Cline nằm ở đâu?

Ở hai vị trí tùy cách sử dụng. Tiện ích mở rộng VS Code lưu tại bộ nhớ toàn cục trong thư mục saoudrizwan.claude-dev; cách mở thuận tiện nhất là nhấp nút Configure MCP Servers trong tab Configure của bảng điều khiển MCP. Bản CLI sử dụng đường dẫn ~/.cline/mcp.json. Cả hai đều dùng chung định dạng đối tượng mcpServers.

Tôi có cần tài khoản đám mây riêng để tạo ảnh trong Cline không?

Không. Máy chủ MCP cục bộ mới cần khóa API riêng của bên thứ ba với hạn mức và hóa đơn riêng. Máy chủ từ xa chạy việc tạo ảnh trên hạ tầng do chúng tôi quản lý, vì vậy thông tin duy nhất bạn cần là khóa bb_live_ trong hồ sơ của bạn. Tài khoản mới được tặng $0.20 số dư ban đầu, đủ để tạo 6 ảnh trên mô hình tiết kiệm trước khi cần nạp tiền.

Làm thế nào để ngăn agent chi tiêu vượt quá ngân sách?

Hãy kết hợp cả ba lớp bảo vệ: giới hạn autoApprove chỉ cho các công cụ miễn phí để mỗi lần tạo ảnh có phí đều cần bạn xác nhận; đặt hạn mức USD hàng ngày trong Hồ sơ → Khóa API MCP (vẫn có hiệu lực trong chế độ YOLO); và tận dụng cơ chế xác nhận chi phí đối với video và ảnh nhiều tấm, hệ thống chỉ trừ tiền khi có tham số confirm_cost.

Tại sao máy chủ MCP của Cline không thể kết nối?

Hãy kiểm tra lần lượt: đảm bảo "type": "streamableHttp" được viết đúng định dạng camelCase; kiểm tra URL kết thúc bằng /api/mcp chứ không phải /mcp; kiểm tra tiêu đề Authorization có dạng chuẩn Bearer bb_live_... không có khoảng trắng thừa. Nếu kết nối thành công nhưng công cụ không hiển thị, hãy khởi động lại máy chủ từ bảng điều khiển MCP. Trong mạng doanh nghiệp, hãy kiểm tra xem máy chủ cá nhân có bị chặn bởi chính sách bảo mật nội bộ hay không.

tutorialmcpcline