Claude 中使用 mcp 整理

mcp 模型上下文协议

mcp 作用类比：

项目文件：原材料 MCP 插件：各种厨具，电器 AI: 厨子 用户：客人（点餐）

chrome devtools mcp

作用：就是可以通过 AI 来通过对话，执行操作，读取浏览器中的页面数据

添加

方式一：在项目根目录添加 .mcp.json 文件，Claude 会读取这个文件内容

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

方式二：直接在对话中让 Claude 添加，缺点是有时候会添加失败，而且每次让它添加都会消耗 token

使用

告诉 Claude 开启 mcp，启动成功后就可以打开想要的页面了，可以打开线上网址，也可以打开本地的前端页面。可以做的事情：

获取页面元素，执行操作，分析页面数据，性能测试，优化方案

例如：

通过对话，打开百度的页面https://www.baidu.com, 然后测试性能

在项目中，打开本地的页面，查看页面的性能，给出性能优化方案。按顺序执行一些操作，例如：

依次输入账户名，密码，同意用户协议，点击登录按钮

context7

作用的话，就是帮助 AI 写代码的时候使用正确版本的 api，只需要告诉 AI 使用哪个 库哪个版本的 api 即可