开发工具|[ai] cline使用总结（包括mcp）

1.1 前言

网络上到处是cursor的使用技巧，cursor确实是很好的AI工具，能很大的提高效率，但其他工具也有可取之处。我最近一直在使用cline，从它官网的博客中学到了很多使用AI的技巧，我发现很多技巧都是通用的，用此文章总结并分享。

1.2 cline是什么和模型选择

cline是一个vscode AI编码插件。

主要特点：

计划模式和行动模式
可以使用不同模型，清晰看到上下文和计费
mcp支持，有mcp市场

目前两种模式的最佳模型： deepseek-r1用于计划，claude3.5/3.7用于行动

更好性价比：使用deepseek-v3替换claude，将claude作为可靠后备

v3的问题在于上下文只有64K，在长文件下连续问几个问题就会超出，经常需要另开会话

当上下文进度条接近70-80％时：创建markdown文件记录目前为止的关键决策和进度，然后重新开始

claude上下文有200k，而且支持操作计算机、图像解析，目前确实是编码最佳模型，但奈何太贵了

（cursor 20美元一个月，这时候反而很有性价比，因为能一直用claude，它调教的也好用）

1.3 计划模式和行为模式

1.3.1 基本流程

在研究时从开放性问题开始：我想这样做可行吗？有哪些方式来实现它？各种方式的优缺点？
完成初步研究后，就告诉模型具体该怎么做，我充当设计者，模型是实现者
模型实现完成后，必须测试代码是否真的有效

1.3.2 关于上下文

在编码之前花时间计划和提供背景时，AI的输出会变得更加精确

把AI输出想象成枪里的子弹，你提供的背景越多，枪管就越长——枪管越长意味着准确性越高

限制上下文就像缩短枪管以节省金属一样——你为了节省而牺牲了准确性

另外，只补充必要的上下文，而不是让AI在全局查找，这样也能提高准确性

1.3.3 以计划模式启动，再切换到行动模式

计划模式：收集背景，读取相关文件，分解需求并制定计划

行动模式：根据计划的上下文简化实施，按照既定计划执行

技巧：

在计划模式探索边缘情况、遇到意外的复杂性时切换回计划模式；
计划不是一次性的事情，复杂的项目通常需要多个计划，让AI编写此次计划的markdown文件，作为将来可以参考的上下文；

虽然计划让人感觉很慢，感觉什么都没做。但事实是：

1．产出的质量会增加数倍！

2．从长远来看可以节省时间，因为会生成更易于维护的代码，尽早发现边缘情况

1.4 自定义指令

自定义指令可以理解成是每次和AI对话时，它都会读取的一段信息。

我会把和AI沟通中经常出现的错误行为或不理想的回答写在自定义指令中规避。

以下是自定义指令示例参考：


txt
 代码解读
复制代码
以下内容是最高优化级，没有任何质疑：
1. 说中文
2. 当前是windows系统
3. 忽略TypeScript错误：any
4. 使用函数式编程而不是class

1.5 MCP是什么，以及怎么在cline安装

MCP全称Model Context Protocol模型上下文协议，它提供了一种连接人工智能系统和不同数据源的方法，白话讲就是让AI能连接到各种不同的软件或系统，直接进行操作。

如果你没有使用cline安装过mcp，建议任意选择一个mcp安装体验一下，它是通过提示词方式引导安装，我第一次通过提示安装mcp还是感觉挺震撼的，当然后续安装就不需要这样麻烦了，手动更快。

mcp服务器一般都是python或node写的，安装方式有所不同，我下面讲的是手动安装方法：

python编写的mcp：

pip install uv -i https://mirrors.aliyun.com/pypi/simple/
pip install [mcp名称]
配置cline_mcp_settings.json，举例：


css
 代码解读
复制代码
{
    "mcpServers": {
        "github.com/modelcontextprotocol/servers/tree/main/src/git": {
            "command": "python",
            "args": ["-m", "mcp_server_git"],
            "env": {},
            "disabled": false,
            "autoApprove": []
        }
    }
}

node编写的mcp：

先把mcp仓库clone到本地，建议在一个统一目录管理
按照要求安装依赖并执行构建
配置cline_mcp_settings.json指向构建后的文件，举例：


json
 代码解读
复制代码
"github.com/tavily-ai/tavily-mcp": {
  "command": "node",
  "args": [
    "d:/SysFolder/Desktop/cline/tavily-mcp/build/index.js"
  ],
  "env": {
    "TAVILY_API_KEY": "123123"
  },
  "disabled": false,
  "autoApprove": []
},

注意：目前在windows系统还不能用npx方式调用mcp服务器，得用node，相关issues回答

1.5.1 创建一个自己的mcp服务器

每个人都可以根据需要自己创建mcp，这不是一个很困难的事情，因为可以用AI创建mcp

以我的文生图mcp举例：

实现思路，相当简单（利用开源免费的图像生成API）：

输入一段描述，并将描述插入到以下链接的{prompt}部分：

![image](https://image.pollinations.ai/prompt/{prompt}?width=1024&height=1024&enhance=true&private=true&nologo=true&safe=true&&model=flux)

最后输出你的画面描述以及链接就结束了。

具体代码：


ts
 代码解读
复制代码
#!/usr/bin/env node
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { CallToolRequestSchema, ErrorCode, ListToolsRequestSchema, McpError } from '@modelcontextprotocol/sdk/types.js';

// 配置常量
const DEFAULT_WIDTH = 1024;
const DEFAULT_HEIGHT = 1024;
const IMAGE_API_BASE_URL = 'https://image.pollinations.ai/prompt';

// 图片生成参数类型
interface ImageGenerationArgs {
    prompt_zh: string;
    width?: number;
    height?: number;
}

// 验证图片生成参数
const isValidImageGenerationArgs = (args: unknown): args is ImageGenerationArgs => {
    if (!args || typeof args !== 'object') return false;
    
    const { prompt_zh, width, height } = args as ImageGenerationArgs;
    
    if (!prompt_zh || typeof prompt_zh !== 'string') return false;
    if (width && (typeof width !== 'number' || width < 1)) return false;
    if (height && (typeof height !== 'number' || height < 1)) return false;
    
    return true;
};

/**
 * 创建并配置MCP服务器
 * @returns 配置好的Server实例
 */
const createServer = () => {
    // 初始化服务器
    const server = new Server(
        {
            name: 'image-generation-mcp',
            version: '0.1.0',
        },
        {
            capabilities: {
                tools: {}, // 工具配置将在下面注册
            },
        }
    );

    // 注册可用工具列表
    server.setRequestHandler(ListToolsRequestSchema, async () => ({
        tools: [
            {
                name: 'generate_image',
                description: '将中文描述转换为详细画面并生成图片链接',
                inputSchema: {
                    type: 'object',
                    properties: {
                        prompt_zh: {
                            type: 'string',
                            description: '中文场景描述',
                        },
                        width: {
                            type: 'number',
                            description: `图片宽度（可选，默认${DEFAULT_WIDTH}）`,
                            minimum: 1,
                        },
                        height: {
                            type: 'number',
                            description: `图片高度（可选，默认${DEFAULT_HEIGHT}）`,
                            minimum: 1,
                        },
                    },
                    required: ['prompt_zh'],
                },
            },
        ],
    }));

    // 处理工具调用请求
    server.setRequestHandler(CallToolRequestSchema, async (request) => {
        if (request.params.name !== 'generate_image') {
            throw new McpError(ErrorCode.MethodNotFound, `未知工具: ${request.params.name}`);
        }

        // 验证参数格式
        if (!isValidImageGenerationArgs(request.params.arguments)) {
            throw new McpError(ErrorCode.InvalidParams, '请求参数格式错误，请检查输入参数');
        }

        // 解构参数并设置默认值
        const { prompt_zh, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT } = request.params.arguments;

        // 构建图片URL
        const queryParams = new URLSearchParams({
            width: width.toString(),
            height: height.toString(),
            enhance: 'true',
            private: 'true',
            nologo: 'true',
            safe: 'true',
            model: 'flux',
        });

        const imageUrl = `${IMAGE_API_BASE_URL}/${encodeURIComponent(prompt_zh)}?${queryParams}`;

        return {
            content: [
                {
                    type: 'text',
                    text: JSON.stringify(
                        {
                            description: prompt_zh,
                            imageUrl: imageUrl,
                        },
                        null,
                        4
                    ),
                },
            ],
        };
    });

    return server;
};

async function main() {
    const server = createServer();
    const transport = new StdioServerTransport();
    await server.connect(transport);
}

// 启动服务
main().catch((error) => {
    console.error('main error: ', error);
    process.exit(1);
});

1.6 最后如果文章帮到你了，可以给我点个赞

另外，cline还有一个Cline Memory Bank的高级用法，有兴趣可以了解下，思路是通用的。

如果你有使用AI或cline更好的技巧，欢迎一起交流学习！

参考文章：

2025-03-29：发布文章