大家好，我是顾北，专注于 AI 应用探索与副业实践，长期关注 AI 技术趋势、实用工具以及 Github 线索探索。

自 AI 编程这个词出现之后，MCP 也就成了 AI 编程必备内容了。

为什么这么说呢？

在你使用 Claude Code 进行 AI 编程的时候，有没有这种感受…

就是在写完代码之后，样式丑的一批，结果让 Claude 越改越丑，总是达不到你想要的感觉，出现这个的原因是 Claude Code 在闭着眼睛给你开发，那当然达不到你想要的效果了。

因为在 Claude Code 开发的时候，它是无法看清你开发的网页页面长什么样，这一切都是无感知的。

所以可想而知…达不到效果啦

那么怎么解决这个问题呢，答案是我们今天的主角 MCP

什么是 MCP？

MCP 全称 Model Context Protocol，是 Anthropic 推出的开放协议。

简单点说，它是让你的 Claude Code 能够安全的访问外部工具、数据源、比如浏览器，代码库，技术文档等内容。

大白话讲可以把 MCP 当作拓展坞，你想一想，在你电脑 USB 接口少的时候，你会选择使用拓展坞来扩展接口数量。

MCP 也是这样，在你自带的工具无法完成任务的时候，你可以使用 MCP 协议来扩展你需要的工具。

那么 AI 编程为什么就需要 MCP？

因为 Claude 再聪明，也只是模型，它没有实时的数据。

MCP 就像桥梁，让它拉取最新文档、控制浏览器、甚至 Github 仓库都没有问题。

现在针对于我的亲测，对于编程领域来说，我觉得这三款 MCP 服务是你必装的。装上之后，效率可谓是指数级增长。

哪三款呢？Context7、Chrome-DevTools 和 GitHub。

第一款：Context7

Context7 是个文档抓取神器，能让 Claude 实时拉取最新 API 和代码文档。

你可以理解为，装上这款 MCP，你的 Claude 就有了实时获取最新开发文档的能力。

我经常在开发中干的事情是，在 Claude 开发代码前，我先让它使用 Context7 mcp 读取一下相关技术的最新文档。

在之前没有使用 Context7 的时候，它生成出来要么是老代码，要么就是语法报错。

现在使用 Context7，基本就是一把梭哈，语法没有一点问题。

如何安装

先来给大家说一下安装 Claude Code 安装 MCP 语法，当然你也可以使用自然语言让 Claude Code 帮你安装，怎样都可以，我主要介绍的是手动安装

先来熟悉一下安装语法

# 添加 MCP stdio Server
# 两个[args]及以上，<name>和<command>中间记得添加 --
claude mcp add <name><command> [args...]

# 添加 MCP SEE Server
claude mcp add --transport sse <name><url>

# 添加 MCP HTTP Server
claude mcp add --transport http <name><url>

# Claude Code快捷指令：检查MCP情况
/mcp

# 列出所有已配置的MCP Server
claude mcp list

# 获取特定MCP Server的详细信息
claude mcp get my-server

# 删除特定MCP Server
claude mcp remove my-server

# 配置或删除特定项目范围的MCP Servers，
# 记得在<name>和<command>中间加-s，-s local想象当前项目 

我一般安装使用的是 -s user 这样是全局安装，你也可以去掉，或者针对于你这个项目进行安装，使用 -s project

接下来就带你进行安装 Context7

在 Context7 未更新之前你可以使用如下命令进行安装

# 当前项目安装
claude mcp add context7 -- npx -y @upstash/context7-mcp  
# 本地全局安装
claude mcp add context7 -s user -- npx -y @upstash/context7-mcp

不过，最近更新之后，需要携带你的 API_key，那么可以使用下面这个命令安装

claude mcp add context7 -s user -- npx -y @upstash/context7-mcp --api-key your_api_key

claude mcp add --transport http context7 -s user https://mcp.context7.com/mcp --header "CONTEXT7_API_KEY: your_api_key"

注意：这个CONTEXT7_API_KEY 需要在官网中自行获取。

进入官网，点击 Dashboard

复制对应的 API KEY 替换CONTEXT7_API_KEY 的值

安装成功之后，可以自行测试，使用自然语言让 Claude 调用 Context7 MCP 查找对应的官方文档

第二款：Chrome-DevTools

我愿称之这款 MCP 为超神器，为什么这么说？

还记得我在开头提出的问题，如何让 Claude 长眼睛，没错，就是这个 MCP

它可以让你的 Claude 长上眼睛，可以实时看到你开发的页面信息，页面的样式什么都可以看见。

你可以把它当作 Claude 的眼睛来用。

跑调试、抓网络日志都没有问题，甚至可以给你小红书自动发文章、咸鱼自动上架产品，帮你跳过广告都没有问题。

那么如果你了解 MCP 可能就要问，那不是有 playWright 这个 MCP 服务也可以解决这个问题嘛

我的回答是：的确可以，但是 PlayWright 消耗 Token 的数量很快，还动不动报错，这点我深有体会，说白了省下来的都是钱…

如何安装

直接使用下面命令进行安装

claude mcp add chrome-devtools -s user npx chrome-devtools-mcp@latest

第三款：GitHub

一听到 Github，你可能会问，这不就是一个开源项目平台嘛

但是它的 MCP 可以帮助你获取最新的热榜代码，可以查看、评论、commit 等。

它可以让你的 Claude 直接连接你的仓库，，语义搜索代码、拉取文件。

我团队协作时，Claude 以前不知仓库变化，现在一搜全知。

如何安装

安装命令如下：

claude mcp add --transport http github -s user https://api.githubcopilot.com/mcp -H "Authorization: Bearer YOUR_GITHUB_PAT"

比较麻烦的就是这个 YOUR_GITHUB_PAT ，这个是访问你仓库的 API Key

那么如何获取？

首先点击 Settings

点击 Developer settings

找到 Tokens（classic），然后点击右侧的 Generate new token

生成后拿到密钥替换掉安装命令的YOUR_GITHUB_PAT 即可。

安装成功后，请求之后，可以看到能获取到你的 GitHub 仓库信息

如何测试安装是否成功

使用如下命令

claude mcp list

也可以进入 Claude 使用 /mcp 查看是否安装连接成功

也可以，安装了 Claude Code 原生 VS Code 插件的直接查看就行

另外现在网上有好多 MCP 收集的网址，GitHub 官方也做了收集

可以在这个网址查看所有的 MCP

https://glama.ai/mcp/servers

也可以在 GitHub 中查看 Github 官方推荐的 MCP

https://github.com/mcp

到最后，我的分享就结束了，另外如果你有什么推荐的 MCP 服务欢迎评论区交流～～～

---