返回博客
BananaBanana Teamtutorialmcpcline

Cline MCP 服务端:直接在编辑器中生成图像

将 Cline 连接到远程 MCP 服务端,在 Plan 与 Act 模式下生成图像: streamableHttp 配置、auto-approve 安全保护与低至 $0.03 的按量计费。

Cline MCP 服务端:直接在编辑器中生成图像

Cline 中的远程 MCP 服务端是 Agent 通过 HTTP 调用的云端托管工具集:只需在 MCP 设置 JSON 中添加一个配置块,Cline 就能执行任何大语言模型本身无法完成的操作。生成图像文件就是最直观的例子。Cline 可以重构组件、运行测试并编写数据库迁移脚本,但在遇到「此处应插入商品照片」时往往无能为力。

为想要立即上手的开发者准备的快速配置步骤。在 BananaBanana 个人中心创建密钥,打开 Cline 的 MCP 设置并添加:

{
  "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"]
    }
  }
}

界面将显示十个工具。图像生成从预充值余额中扣费,每张低至 $0.03,视频低至 $0.10。type 配置行是必填项,省略该行会导致一种隐蔽的连接失败,稍后将详细解释。

为什么要在 Cline 中接入图像生成工具?

Cline 的核心工作流是「描述最终目标,让 Agent 自主完成多轮迭代」。这一流程在不需要图像资产时运转良好。然而一旦需要视觉素材,闭环就会被打断并退化为繁琐的手工操作:打开浏览器标签页、输入提示词、下载文件、重命名、移入 public/ 目录、返回编辑器重新找回思路。每个素材耗费五分钟,而思维中断的代价远大于这五分钟本身。

接入 MCP 工具后,Agent 可以自主完成全套流程。它负责撰写提示词、调用 generate_image、将生成的文件保存至指定目录并更新页面标记。开发者只需审查代码差异(diff)。

其定价模式也非常契合 Cline 用户。Cline 采用自带模型(BYOM)架构,用户早已习惯按量付费而非按月订阅。我们的生成计费方式完全相同:无固定套餐、无席位费、无最低消费限制。单张图像 $0.03 起,视频 $0.10 起,随时充值使用。

另一种方案是在本地运行图像 MCP 服务端,这意味着需要在本机常驻 Node 或 Python 进程,并绑定第三方供应商 API 密钥及管理配额账单。云端托管端点消除了这些维护成本。生成任务在我们的服务集群中运行,走的是与网页端生成器相同的计算管道,用户只需持有一个可随时撤销的密钥。

终端窗口插图,展示带有传送带将装裱好的图像直接输出至打开的文件夹中

如何在 Cline 中添加远程 MCP 服务端?

有三种途径,最终效果完全一致。以下内容已对照 2026 年 8 月 20 日的 Cline 官方 MCP 文档 进行核对。

通过图形界面配置。 点击 Cline 工具栏中的 MCP Servers 图标,进入 Remote Servers 标签页,填入服务端名称、URL https://bananabanana.pro/api/mcp,传输协议选择 Streamable HTTP。点击 Add Server。随后进入设置添加 Authorization 请求头:表单用于快速录入,实际凭证保存在 JSON 文件中。

直接编辑 JSON。 点击同一图标,进入 Configure 标签页,点击 Configure MCP Servers 按钮即可打开扩展配置文件。该文件位于 VS Code 的全局存储路径中,处于名为 saoudrizwan.claude-dev 的目录下(扩展 ID 保留了原作者名称,初次查找时容易被误导)。在 CLI 中路径为 ~/.cline/mcp.json,运行 cline mcp 可启动交互式向导。

通过命令行验证。 执行 cline config mcp --json 会打印当前加载的配置,这是确认修改是否生效的最快方式。

无论选择哪种方式,接口端点均为 https://bananabanana.pro/api/mcp。切勿配置为 /mcp,后者是面向人类的文档页面,对 POST 请求会返回 HTML 内容。我们的 MCP 服务端页面 提供了标准配置片段和客户端兼容性对照表:

BananaBanana 文档页面上的通用 MCP 配置代码段,展示接口端点与 Authorization 请求头

在产生费用前可先发起免费调用进行测试。get_account 返回账户余额、密钥名称与每日额度;list_models 返回所有可用模型及其实时价格。两个接口均完全免费,且可在一秒内验证鉴权状态。

实战场景:在 Act 模式下批量生成商品目录占位图

这是 Cline 展现威力的典型场景,远非单次生成一张首屏背景图可比。首先进入 Plan 模式:描述产品目录需求(例如十二款商品均需要统一视觉风格的占位图),让 Cline 在修改任何代码前规划好循环逻辑。随后切换至 Act 模式执行生成。

统一的视觉风格通过固定提示词句式实现,每次调用仅替换商品主体。整个系列的一致性源于提示词的不变部分,而非依赖模型对历史调用的上下文记忆:

→ 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}

通过 MCP 生成的浅色亚麻布上陶盆龟背竹俯视商品占位图

第二款商品采用相同的风格结构,仅替换植物与拍摄视角:

采用相同提示词结构生成的暖色水泥背景上陶瓷盆虎尾兰商品图

使用 Nano Banana Pro 生成十二张此类图像总费用为 $1.32。若选用基础版 nano-banana-2-lite,费用仅为 $0.36,对于后续仍需设计师替换的临时占位图,这无疑是性价比极高的选择;关于入门级模型的边界能力可参阅我们的 Lite 版指南。本文示例使用 Pro 是为了在文章中全分辨率展示细节。

批量生成尤其需要安全防护。系统提供了双重防护机制:首先,在「个人中心 → MCP API Keys」中可为每个密钥设置每日美元消费上限,防止死循环耗尽余额;其次,多张图像请求(number_of_images 大于 1)与视频机制类似,首次调用仅返回费用预估,直至 Agent 携带 confirm_cost 重复调用前均不会扣费。

视频生成可在同一个对话中以相同的二次确认逻辑调用。Veo 3.1 Lite 的 4 秒无声 720p 视频为 $0.10 起,Omni Flash 按每秒 $0.10 计费且始终包含音频,3 秒短片为 $0.30。渲染过程耗时 1 到 10 分钟;由于 generate_video 会立即返回任务 ID,Cline 可以继续编写代码并在后台通过 get_result 轮询结果。

上线前必须了解的 Cline 特性与细节

按可能节省的时间成本排序的五项关键技术细节。

控制台插图,展示带有透明保护罩的开关及硬币计量表

1. "type": "streamableHttp" 拼写必须严格准确,缺失会导致静默失败。 官方文档明确指出:若省略该字段,客户端出于向下兼容考量会默认回退至旧版 sse 传输协议。旧版 SSE 期望客户端发起 GET 请求监听事件流。而我们的接口基于无状态 Streamable HTTP 协议,GET 请求会收到 405 Method Not Allowed 响应(撰写本文时已重新验证:curl -i https://bananabanana.pro/api/mcp 返回 405)。在 Cline 中这表现为连接失败且不提供任何有效字段缺失提示。带连字符的 streamable-http 同样会报错。

2. 密钥以明文形式存储于配置文件中。 尽管 Cline 文档建议通过环境变量存储敏感信息,但远程服务端的 headers 对象中并不支持变量插值(不同于 Cursor 的 ${env:…} 或 Windsurf 的 ${file:…})。其安全优势在于存储位置:扩展设置保存在 VS Code 的全局数据区而非代码仓库中,不存在误提交至 Git 的风险。即便如此,仍应妥善管理本地凭证:设置每日消费上限,并在更换开发设备时第一时间在后台撤销密钥。

3. Auto Approve 权限范围比想象中更宽泛。 在 Cline 的 Auto Approve 面板中,「Use MCP servers」是涵盖所有 MCP 工具的统一开关:开启后将同时自动批准收费与免费调用。精细化控制需在 JSON 配置的 autoApprove 数组中设置。建议仅将三个免费接口(list_modelsget_accountget_result)加入白名单,既能消除批量任务中的频繁弹窗,又能确保每笔付费生成依然受到人工审核。

4. YOLO 模式与付费工具配合使用需格外谨慎。 Cline 的 YOLO 模式会自动批准所有操作:文件写入、终端命令、浏览器访问以及 MCP 调用。官方文档将其明确标注为高危模式。在此模式下费用确认机制将无法拦截,因为自主 Agent 会自动确认预估报价。唯一的有效防护是密钥的每日额度上限。在开启 YOLO 模式前务必先配置好上限。

5. 不支持应用市场一键安装,企业配置走独立通道。 基于官方 SDK 的 VS Code 扩展已不再提供 MCP Marketplace 图形浏览界面,手动配置 JSON 是标准方式。企业管理员则可通过组织级远程配置中的 remoteMCPServers 集中下发服务端参数,并借助 blockPersonalRemoteMCPServers 禁止添加私有服务端。在团队中推广时,建议集中下发配置并为每位开发者分配独立密钥。

坦诚说明我方平台当前的一项限制:generate_speech 返回的是带签名的 WAV 音频下载链接,而非 Cline 面板内嵌播放器,试听需打开文件。而图像则会在链接旁直接渲染小图预览。Cline 早在 2025 年就已支持在工具返回结果中显示图像,最新版本均能正常预览。

Cline 是否支持远程 MCP 服务端的 OAuth 鉴权?

官方文档尚未支持该机制。由于不同客户端之间存在差异,此处有必要明确说明。Cline 文档涵盖 stdio、SSE 与 Streamable HTTP,鉴权通过自定义请求头实现,未提及 OAuth。关于 支持 OAuth 的功能建议 自 2025 年 8 月起即在 Cline 仓库开启,截至 2026 年 8 月 20 日仍处于开放状态。

在实际使用中这并不构成障碍。我们的服务端同时支持 OAuth 2.1 令牌与标准 Bearer API 密钥,而 Cline 本身正是围绕密钥模式设计的。这也是我推荐的做法:密钥免费创建且支持多把共存,每个密钥具有独立的使用日志(工具、模型、花费、提示词摘要)和日限额。外包人员项目结束后,直接注销对应密钥即可,完全不影响其他成员。

若需实现项目间费用隔离,可为每个项目单独创建密钥。使用日志可在结算时清晰呈现内部管理后台与外部营销站点的具体消耗明细。

本文演示素材的实际生成花费

标准单次生成计费,与 list_models 接口返回的数据完全一致:

资产类型模型版本单价
商品目录占位图(龟背竹)Nano Banana Pro, 1K$0.11
商品目录占位图(虎尾兰)Nano Banana Pro, 1K$0.11
封面图 + 正文 2 张插图Nano Banana Pro, 1K$0.33
文档页面截图浏览器截取,非生成$0.00
总计$0.55

充值提示:单笔充值 $50 及以上赠送 5% 额外额度,$100 及以上赠送 10%,使用有效优惠码还可在此基础上再加赠 10%。两项奖励均以充值本金为基数计算,充值 $100 配合优惠码实际到账 $120。

同一密钥通用所有客户端:若同时使用 Cursor 或 VS Code,无需重新创建凭证,共享相同余额与历史记录。Cursor 指南VS Code 配置教程 介绍了对应流程。立即创建密钥,让 Cline 为您批量生成首批设计素材。

常见问题

Cline 是否支持基于 Streamable HTTP 的远程 MCP 服务端?

支持,且这是 Cline 官方文档推荐的传输模式。远程服务端通过 url、设置为 streamableHttptype 以及可选的 headers 进行配置。必须显式声明 type:若省略则会回退至旧版 SSE,从而在无状态现代接口上报错。已依据 2026 年 8 月 20 日官方规范验证。

Cline 的 MCP 配置文件保存在何处?

根据运行环境分为两处:VS Code 扩展将其存放在全局存储区的 saoudrizwan.claude-dev 目录下,最稳妥的打开方式是点击 MCP 面板 Configure 标签下的 Configure MCP Servers 按钮;CLI 环境则使用 ~/.cline/mcp.json。两者均采用相同的 mcpServers 对象格式。

在 Cline 中生成图像是否需要绑定个人云厂商账号?

不需要。本地运行的 MCP 服务端才需要自备第三方 API 密钥与独立账单。远程服务端的所有生成任务均在我们的托管算力池中完成,您只需使用个人中心中的 bb_live_ 密钥。新注册账户均赠送 $0.20 初始余额,可在付款前使用基础模型免费生成 6 张测试图像。

如何防止智能 Agent 超额消耗账户余额?

建议同时开启三重防护:将 autoApprove 限制为仅对免费工具生效;在「个人中心 → MCP API Keys」中为密钥设置每日消费限额(在 YOLO 模式下仍然生效);充分利用二次确认机制,视频和批量任务在首次请求时仅报价,必须显式传入 confirm_cost 后才会正式扣费。

为什么我的 Cline MCP 服务端显示连接失败?

请按顺序排查:确认 "type": "streamableHttp" 采用标准 camelCase 拼写;确认 URL 以 /api/mcp 结尾而非 /mcp;确认 Authorization 请求头格式严格为 Bearer bb_live_... 无多余空格(无效或已撤销的密钥返回 401)。若连接正常但未显示工具,请在 MCP 面板中重启服务。在企业内网环境下,请确认管理员未通过安全策略拦截个人远程端点。

tutorialmcpcline