自学教程

MCP 入门教程

Vibe Coding 教程

MCP 入门教程：打通工具调用，解锁Vibe Coding的新边界

⚠️ 重要提醒：MCP（Model Context Protocol，模型上下文协议）只是一套通信标准，本身不会写代码。启用MCP工具之后，AI可以直接调用本机工具、读取本地文件、执行命令。安全风险显著升高！ 务必谨慎配置权限，不要开放高风险操作；AI调用工具的所有动作都要人工审核，不要全自动放行。

前面系列我们学了Cursor、CC Switch、AI Skills、Vibe Coding整套工作流。
不管是Composer写代码，还是让AI读仓库，一直有个局限：AI本质上只能看传给它的文本上下文。它没法直接访问你的本地文件系统、查数据库、调用第三方API、读取网页内容。
MCP就是用来打破这个限制的协议。
一句话概括：MCP是一套统一标准，让大模型安全地调用外部工具，获取真实世界的数据、执行外部动作。
有了MCP，不再只是“你粘贴信息给AI”，AI可以主动按约定去拿数据、调用工具，这也是现在Agent型Vibe Coding的核心基石。

一、什么是 MCP？通俗理解

MCP全称 Model Context Protocol，模型上下文协议。它是开放标准，定义了AI模型 ↔ 外部工具之间怎么对话、怎么传参数、返回结果。

我们先分清几个角色：

  • MCP Host：宿主程序，也就是支持MCP的编辑器/客户端（Cursor现在原生支持MCP，是最常用的Host）
  • MCP Server：MCP服务端，提供一组工具。可以本地运行，也可以远程。每个Server封装一类能力（读取文件、git操作、数据库、网页抓取等）
  • Tools：工具。MCP Server向外暴露的功能。例如读取文件、列出目录、执行git status、curl网页等

类比理解：
CC Switch 是模型切换网关，管【把请求路由给不同大模型】；
MCP 是工具调用标准，管【大模型去调用外部程序和本地资源】。
两者可以一起搭配使用。
CC Switch 解决“用哪个大脑”；MCP解决“这个大脑可以调动哪些手脚”。

注意区分：MCP ≠ Agent
Agent是“能自主规划、循环调用工具完成目标”的逻辑；MCP只是Agent用来调用工具的通信接口。MCP提供工具，但它本身不会自主规划任务。
你可以在Cursor开启MCP，但仍然是人主导Vibe Coding；当AI自动多次调用MCP工具、循环迭代，才进入Agent模式。

二、MCP 可以做哪些事情（Vibe Coding场景）

MCP Server种类很多，Vibe Coding开发最常用这几类：

  1. 文件MCP Server：列出目录、读取文件、搜索项目文件（⚠️谨慎，可访问本地所有文件）
  2. Git MCP Server：查看提交记录、看diff、查询分支，不用你手动复制git输出粘贴给AI
  3. 网页抓取Server：AI直接读取网页文档、API文档、参考资料，不用复制粘贴网页文本
  4. 数据库MCP Server：连接MySQL/PostgreSQL，查询表结构、执行SELECT查询（严禁开放写库权限）
  5. 终端命令Server：执行shell命令，查看npm版本、运行npm run lint等（高危，新手不推荐开启）

举个Vibe Coding实战例子：
你给Cursor需求：帮我梳理这个项目所有Vue组件，列出每个组件的入口和职责。
没有MCP：你需要手动find找文件，一个个复制粘贴给AI。
开启文件MCP Server之后：AI可以自动遍历目录，读取对应的.vue文件，整理成清单。

这就是MCP带来的提升：AI主动获取上下文，减少大量手动复制粘贴。

三、在Cursor上配置MCP（新手入门）

前置条件：新版Cursor，旧版本没有MCP功能。建议更新到最新版。

1. 打开MCP配置面板

Cursor → 设置 → Customize → MCPs（Model Context Protocol）
打开MCP配置界面，在这里添加MCP Server。
配置文件本质是 mcp.json，可以图形界面添加，也可以直接编辑JSON。

2. 添加本地MCP Server（示例：文件服务器）

很多MCP Server用NodeJS或者Python，所以运行对应Server需要提前装好运行环境。
以官方文件MCP Server举例，配置片段：

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "@modelcontextprotocol/server-filesystem",
        "/Users/xxx/code/my-project"
      ]
    }
  }
}

关键点：一定要限定目录！
上面配置指定只能访问/xxx/code/my-project这个文件夹。不要直接填根目录/，一旦配置根目录，AI有机会读取桌面、密钥、隐私文件，风险极大。

配置保存之后，Cursor会自动拉起这个MCP Server。然后你可以在MCP面板点刷新，查看检测到的可用工具列表。绿色代表服务正常启动。

测试指令，在Chat里输入：
使用MCP工具，列出项目src目录下所有vue文件，不要修改任何代码，只做读取。
AI会调用filesystem工具，列出文件。

3. 网页抓取MCP Server（适合查文档）

同样添加新server，配置对应的command。
开启后，你可以直接这样提问：
调用MCP读取这个链接[https://vuejs.org/guide/quick-start.html](https://vuejs.org/guide/quick-start.html)，总结Vue3的基础语法，结合这个项目给我写示例代码
AI直接拉网页内容，不用你复制大段网页文字粘贴到对话框。

四、MCP + Vibe Coding 完整工作流

推荐这套安全的工作流程，兼顾效率，又避免失控：

  1. Git提交基线快照，保存当前代码；
  2. 打开Cursor，启用需要的MCP Server，限制访问范围，高危终端server默认关闭；
  3. 下达需求，告诉AI：可以使用MCP工具读取项目文件，不允许自动执行写文件/执行shell；
  4. AI自动调用MCP读取目录、源码、文档，理解项目上下文；
  5. 理解完成后，用Composer生成代码改动清单，清单出来，你先审核；
  6. 确认没问题，再应用diff，本地手动运行测试；
  7. 测试完成，Git提交。

重要安全原则：区分【读工具】和【写/执行工具】
✅安全：读取文件、git查询、网页抓取，只拿信息，不改动系统
⚠️高危：执行shell、写文件、数据库UPDATE/DELETE。新手尽量不要开放这类工具。
一旦开启执行命令的MCP，AI可能自动执行删除文件、安装包等操作，一旦出错后果严重。

五、搭配之前工具：MCP + CC Switch + Skills

这套组合就是目前Vibe Coding的高阶配置：

  • Skills：全局固定编码规则，AI生成代码时遵守约束；
  • CC Switch：模型网关，一键切换Claude / GPT4o等模型；
  • MCP：给选中的大模型，增加外部工具访问能力。

注意：不是所有模型都支持工具调用。通过CC Switch路由的时候，要选择支持Function Calling的模型，否则MCP无法生效。
Claude 3.5 Sonnet、GPT-4o都支持工具调用；部分轻量模型不支持，MCP会失效。

你可以在Skills里面增加一条MCP相关约束，示例：

当使用MCP工具时：
1. 优先最小次数调用工具，不要反复无意义扫描整个项目；
2. 只读取限定目录内文件；
3. 禁止调用任何修改文件、执行命令的工具；
4. 每次调用工具前，简要说明准备获取什么信息。

把这段放进AI Skills，每次AI使用MCP都会遵守约束。

六、新手高频踩坑清单

  1. MCP Server启动失败
    排查顺序：确认Node/Python环境安装；检查命令行路径；检查引号和JSON语法（JSON逗号错是最常见错误）。MCP面板会输出日志，看报错信息。
  2. 配置MCP之后，AI不肯调用工具
    模型不支持function calling；或者提示词没有告诉AI“你可以使用MCP工具”；也有可能上下文太长，模型忽略可用工具。
    ✅对策：明确写在prompt：你可以使用MCP工具读取文件，完成这个任务。
  3. 权限过大，开放根目录
    最危险的错误。MCP文件服务器必须限定到项目目录，禁止访问.env密钥所在目录。
  4. 以为MCP可以全自动跑项目，放任AI随意调用shell
    很多新手开启终端MCP，让AI自动npm install、执行构建。一旦AI幻觉，执行破坏性命令，文件直接丢失。强烈不推荐新手开启终端执行工具。
  5. MCP消耗额外token
    每一次工具调用、返回的文件内容，都会计入token消耗。一次性扫描整个大仓库，token消耗会暴涨，记得在CC Switch设置额度上限，防止账单超标。

七、MCP 和之前系列工具定位对比

  • Cursor：MCP Host（宿主），图形界面编辑器，原生支持MCP
  • CC Switch：模型路由网关，切换底层大模型，不处理MCP工具
  • AI Skills：全局规则，约束AI调用MCP的行为，减少滥用
  • MCP：协议标准，提供外部工具能力，给模型增加“手脚”
  • OpenCode：Agent编码智能体，同样支持MCP，自主性更高

一句话总结定位：Cursor是工作台，CC Switch帮你换大脑，Skills定规矩，MCP给大脑配上工具，读取外部资源。

写在最后

MCP是Vibe Coding从“纯文本对话”走向“真实环境交互”的关键一步。
它不是一键写代码黑科技，它解决的核心痛点：减少大量复制粘贴，让AI主动读取你的项目、文档，拿到真实上下文。
新手入门建议：从文件读取、网页抓取这两个安全的MCP Server开始，不要上来就开终端、写库这类高危能力。
先小项目测试，感受AI主动扫描目录读取源码的效果，理解工具调用的逻辑。
当你熟悉MCP之后，你就进入Vibe Coding的Agent阶段，能完成更复杂、更贴近真实开发场景的任务。

标签：

0 条笔记