vscode中使用cline进行AI mcp server 配置（mac）

本次探索来自于b站爬爬虾的视频

https://www.bilibili.com/video/BV1AnQNYxEsy/?spmidfrom=333.337.search-card.all.click&vd_source=f7d6ddf90a16205e40aaa9f5e10aecd8

github上mcp官方的一些链接：GitHub - modelcontextprotocol/servers: Model Context Protocol Servers

tip：如果配置了mcp显示time-out，就关掉魔法，国内上网就行，有时候开了魔法反而登不上，需要登github的时候再开

概述：本质是客户端通过命令行调用了电脑上的nodejs程序，然后程序执行了某些操作，这个地方和传统的问答，截图的区别在于，可以自动化一些功能集成到一个统一的mcp server上面，比如github代码上传，分析本地代码，都可以自动化地进行，我只用说帮我上传文件，AI就会帮你推送到github，而不再需要截图去问AI，然后复制粘贴AI回答的代码到命令行，而是可以直接问AI，让它去调用相关的一些权限就行了

其实，这个操作就是Function Calling，即AI调用外部工具，但是目前mcp是一个统一规范的Function Calling协议，方便一个数据模式接入各种工具函数（时间，文件操作等）

首先vscode插件中安装cline

然后设置中配置模型apikey

选deepseek free就行，API Provider选择OpenRouter，然后选择下面的get key，跳转配置好之后就和上面一样了，后续可以问答一下试试

之后是安装node.js，这里不赘述

回到cline，点击mcp server

这个可以安装对应的工具，可以理解为mcp server的插件，下面以github插件的安装为例子

mcp server中找到github插件，点击install之后会有AI request，按照指示配置就行了

第一步是创建文件夹（非必要）

第二步是去github创建一个权限的token，用于调用服务，会让你打开github去创建

第三步是一个配置文件的生成，直接同意就行

之后就可以了，但是网络可能会有一些问题

可以直接这样问AI

之后其他的mcp用上面的方式去下载，或者直接修改下面这个配置文件都行，修改配置文件的代码去mcp官方的github仓库下面找就行GitHub - modelcontextprotocol/servers: Model Context Protocol Servers

直接把这个npx的复制进去就可以了

这个filesystem的路径需要改一下，看是否有绿灯就知道是不是配置好了

注意是在mcpServers下面加，不要写多了，如果是windows会有一些额外的改动，看视频里面就行，基本上分为路径+\，npx改成cmd，args里面加/c（所有的配置都要这样改）

下面讲一个前端开发非常好用的工具，配置复杂一点，地址：

GitHub - AgentDeskAI/browser-tools-mcp: Monitor browser logs directly from Cursor and other MCP compatible IDEs.

browser tool：可以让AI直接读取到你浏览器里面的内容，把前端开发的运行环境和编写代码的环境直接链接起来

第一步chorme下载压缩包插件，解压后拖到扩展程序中（要打开开发者工具）

 v1.2.0 BrowserToolsMCP Chrome Extension

第二步配置文件加：

"browser-tools-mcp": {

"command": "npx",

"args": [

"-y",

"@agentdeskai/browser-tools-mcp@1.2.0"

]

}

第三步命令行启动（相当于是启动了mcp分析的服务器）：

npx @agentdeskai/browser-tools-server@1.2.0

此后在开发者工具中可以看到这个工具正在调试浏览器，之后可以在vs中问相关问题

比如分析浏览器的网络请求面版等