给 Cline 加 Flux MCP：在 VS Code 里出图

Cline 默认只会改代码，不会帮你出图。自己写一个本地 MCP，把 Black Forest Labs 的 Flux 接到 Replicate，Cline 就可以在 VS Code 里调 generate_image，把生成的图嵌进 README 或文档。下面这条链路很短：一个 Node 进程、一个工具、一把 API Token。

你需要准备什么

VS Code 里已经装好 Cline
Node.js 18+（本机能跑 node 和 npx）
Replicate 账号，以及一把 API Token（account/api-tokens）
对 MCP 有个基本印象：大模型通过统一协议调外部工具。官方说明见 modelcontextprotocol.io

模型这边用 FLUX.1 Schnell。它是 Flux 系列里最快、最便宜的一档，适合文档插图这种随手生成。Replicate 的 Node 客户端说明在 Get started with Node.js。

如果只想能出图、不想自己写服务，也可以直接装官方的 replicate-mcp。下文走自己写一个 generate_image 的路线，工具面更小，也更容易看懂 MCP 怎么接到 Cline。

搭一个最小的 MCP 服务

建目录、装依赖：

bash

mkdir flux-mcp && cd flux-mcp
npm init -y
npm pkg set type=module
npm install @modelcontextprotocol/sdk zod replicate

dotenv 可以不装。Cline 会把 env 里的 Token 传给子进程，服务里读 process.env.REPLICATE_API_TOKEN 就行。

新建 src/index.js：

javascript

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
import Replicate from "replicate";

const server = new McpServer({
  name: "flux-image",
  version: "1.0.0",
});

server.tool(
  "generate_image",
  "Generate an image from an English prompt and return its URL",
  {
    prompt: z.string().describe("English description of the image"),
  },
  async ({ prompt }) => {
    const replicate = new Replicate();
    const output = await replicate.run("black-forest-labs/flux-schnell", {
      input: { prompt },
    });
    const url = Array.isArray(output) ? String(output[0]) : String(output);
    return {
      content: [{ type: "text", text: url }],
    };
  }
);

const transport = new StdioServerTransport();
await server.connect(transport);

几点别踩：

stdio 服务不要 console.log。协议走 stdout，日志只能写 stderr（console.error）。
replicate 客户端默认读 REPLICATE_API_TOKEN。Token 放 Cline 配置的 env 里，不要写进仓库。
返回文本 URL 就够 Cline 往 Markdown 里插图片。想存成本地文件可以再加下载步骤，最小版本先别加。

用 Inspector 先测一遍

别一上来就接到编辑器。官方 Inspector 可以单独拉起服务、列出工具、填参数跑一次。

bash

export REPLICATE_API_TOKEN=r8_your_token
npx @modelcontextprotocol/inspector node src/index.js

浏览器打开 Inspector 页面，Connect，再 List tools。应该只看到 generate_image。随便写一句 prompt，Run。成功的话会拿到一个 Replicate 上的图片 URL。这一步过了，再进 Cline，省得配置写错时分不清是服务坏了还是插件没加载。

接到 Cline

在 Cline 面板点 MCP Servers 图标，进 Configure，再点 Configure MCP Servers。扩展会打开 JSON（常见路径类似 cline_mcp_settings.json）。CLI 用户也可以改 ~/.cline/mcp.json，或跑 cline mcp。

在 mcpServers 里加一条，路径换成你机器上的绝对路径：

json

{
  "mcpServers": {
    "flux-image": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/flux-mcp/src/index.js"],
      "env": {
        "REPLICATE_API_TOKEN": "r8_your_token"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

保存后 Cline 会重载。面板里应出现 generate_image。连不上就查：绝对路径对不对、Node 在不在 PATH、Token 有没有空格、JSON 括号有没有漏。

autoApprove 先留空。出图会花 Replicate 额度，每次调工具前让 Cline 弹确认更稳妥。

在文档里真正出一张图

打开一个空 README，在 Cline 里说：

生成一张橘子的图片，插入当前 README。

Cline 会推理出该调 generate_image，把 prompt 扩成更具体的英文描述。你点批准后，Replicate 返回 URL，Cline 再改 Markdown。预览里能看到图，这条链路就算通了。

第二步可以换成「根据 README 现有文字配一张合适的图」。模型会自己写 prompt，你只批准调用。写技术文档、给教程补封面、给 changelog 配示意图，都是同一套动作。

几个实际注意点

Schnell 快，细节不如 Flux Dev / Pro。文档插图够用；要更精再换模型名，比如 black-forest-labs/flux-dev。
Replicate 按预测计费。Token 只放本机 MCP 配置，不要提交。
提示词用英文效果更稳。可以让 Cline 先把中文需求翻成英文 prompt 再调工具。
返回的 URL 是 Replicate 临时地址，过期后文档里的图会挂。重要配图要下到仓库再改成本地路径。
想少写代码：Cline 配置里改成 npx -y replicate-mcp，把 REPLICATE_API_TOKEN 放进 env。官方包能搜模型、跑预测，面比一个 generate_image 大。远程托管入口在 mcp.replicate.com。

小结

Cline 负责改文件，Flux 负责出图，MCP 把两者接起来。自己写的服务只有一个工具，Inspector 测通、JSON 里写上绝对路径和 Token，就可以在 VS Code 里给文档配图。官方 replicate-mcp 是同一件事的现成版本，按你想暴露多少能力来选。

参考：