编程常用的 MCP Server，用自然语言写代码

摘要：这段时间 MCP 非常火爆，前几天满屏都是 MCP 的各种介绍，内容都大同小异，甚至机翻的国外文章。算是强行给大家做了一次普及，不看也得看哈哈。

这段时间 MCP 非常火爆，前几天满屏都是 MCP 的各种介绍，内容都大同小异，甚至机翻的国外文章。算是强行给大家做了一次普及，不看也得看哈哈。

这两天热度刚刚过去，我花了 2 天时间详细看了一下，发现短短几个月时间已经有了海量的 MCP ，而且每天都在增加中。每个人都应该为此而兴奋，我们正处于时代发展的洪流中。

我找了一些和编程开发相关的，且下载量比较大的 MCP Server 实践了一下，发现现在已经可以借助 LLM + MCP 使用自然语言做很多编程的事情了。除了编程写代码，还有查询文件、查询数据库、操作 git 、自动测试等等。

这让我想到了科幻电影《机械公敌》的一个场景，女主角想要打开一个 CD 播放机，说了好几遍“开始”都没反应，因为那个 CD 播放器是一个老古董。这说明在当时世界，自然语言几乎可以控制一切，就像现在的触摸屏幕代替了实体按键一样。

编辑器 IDE

最初开始介绍 MCP 都是使用 Claude Desktop ，因为老外都用这个，可能直接翻译过来的。但它在国内没法用，或者不太容易用。

编程开发中使用 MCP 可以有以下选择

VSCode + Cline 插件，其中可选择免费大模型如 DeepSeek ，但可能会有一些限制Cursor 免费试用，后期付费Trae 目前免费，正在大力推广中Windsurf 看介绍像是免费试用，我还没用过

注意，这里的免费/付费只得都是 LLM 大模型服务，MCP 本身就是一个协议，代码也都是开源的，没有付费这一说。

我一开始用的是 Curesor 试用到期以后就用了 Trae ，这两者体验差不多。其中也试用过 VSCode + Cline 从使用习惯和体验上，我自己感觉不如前两者，可能用惯了就行了。

常用的 MCP Server

MCP 官方 GitHub repo 里收录了很多常用的 MCP server 我都是从这里找的 github.com/modelcontex…

filesystem MCP server

文档 github.com/modelcontex…

文档里有各个 tools 的说明，即它的所有功能，例如 read_file write_file edit_file 等。

使用 Cursor 编辑器，在项目根目录新建 .cursor/mcp.json 文件，编写内容如下。注意，这里要配置哪些路径有权限，这个很重要。

{ "mcpServers": { "filesystem": { "command": "npx", "args": [ "-y", "@modelcontextprotocol/server-filesystem", "/Users/username/Desktop", "/path/to/other/allowed/dir" ] } }}

打开 Cursor 设置，可以看到 MCP servers 列表，已经有了 filesystem ，要保证开启并且左侧有绿色小点。

在 Cursor 右侧面板中新建聊天，选择 Agent

然后输入一个 prompt “我的桌面有哪些文件” 然后它就可以通过 filesytem 找到桌面的文件。

当你试图询问规定目录之外的问题，它无法找到了，这能保证我们系统文件的安全。

再让它帮我新建一个文件 test.txt 并写入文件内容 hello world，也可以新建成功

fetch MCP server

使用它需要先下载安装 python 很多 MCP server 都是 python 写的，所以有必要安装、甚至入门学习一下 python

安装完验证，控制台输入 python3 --version 可以查看版本

然后安装 uv，这就是一个包管理工具，类似于 npm

curl -LsSf https://astral.sh/uv/install.sh | sh

PS. 没有 python 环境的，这一步可能稍微麻烦一点。我安装时控制台一直连接不上 github 一直失败...

安装完成以后，MCP 配置如下。这里的 uvx 就类似于 npx 可以从命令行执行一个 python 包

"mcpServers": { "fetch": { "command": "uvx", "args": ["mcp-server-fetch"] },}

在 Cursor 聊天界面进行测试，获取一个网页内容并总结

PS. 这里并没有显示它用 MCP tool 感觉 Cursor 或当前 LLM 可能自带了类似 fetch 的功能。

再看 MCP server 列表中，显示不可用... 这是为何？？？后来我在控制台执行了一下 command uvx mcp-server-fetch 如果能安装以来成功，然后就可用了。

再让它获取 juejin 的热门文章，又无法获取了，莫名其妙的问题，我也是懵了...

我实时获取天气预报信息，获取成功了，也没有用到 fetch 这个 MCP tool

后来，我把 Fetch MCP server 配置拷贝到 Trae 里面，获取网页内容，成功了，但是貌似没用到 MCP tool

这里当时做的时候比较迷惑，不过没关系，反正获取网页内容是成功的。

探索新事物就要带着问题前行，想等待解决完所有问题再下一步，那都进行不下去。

github MCP server

文档 github.com/modelcontex…

根据文档，该源码已经移动到这里来维护了，我们看最新的 github.com/github/gith…

这个 MCP server 需要安装 Docker 。总结来看 MCP server 一般有三种方式运行

node npxpython uvxdocker

然后登录 GitHub 并创建一个 token 这样才能获取你的 GitHub 的信息。注意选择合适的 owner expiration repo 和 permisions ，权限不要太大，否则有数据泄露和丢失的风险。

创建好了 token ，复制粘贴到配置文件中。注意保护好自己的 token 不要外泄和上传到 GitHub 中

"mcpServers": { "github": { "command": "docker", "args": [ "run", "-i", "--rm", "-e", "GITHUB_PERSONAL_ACCESS_TOKEN", "ghcr.io/github/github-mcp-server" ], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "xxx" } }}

在 Cursor 中测试，让它列出我的代码库，还可以得到我未解决的 issue 和 pr ，这个真的可以！

git MCP server

MCP 配置如下

"git": { "command": "uvx", "args": ["mcp-server-git"] }

Cursor 中做测试，让它帮我检查改动，提交 commit ，最后 push 到 GitHub ，都可以执行

网页登录 GitHub 检查 commits 提交成功了，这个体验非常好，尤其对新手来说

postgres MCP server

它可以查询 postgres 数据库，但 readonly 只读 —— 这个很重要，你无需担心数据被修改和删除

MCP 配置如下，需要把数据库的地址写上。如果没有 postgres 数据库可以去 Supabase 创建一个在线数据库，免费的，很方便。

{ "mcpServers": { "postgres": { "command": "npx", "args": [ "-y", "@modelcontextprotocol/server-postgres", "postgresql://localhost/mydb" ] } }}

我连接上划水AI 项目的测试数据库，在 Cursor 做测试。你可以用自然语言来操作数据库查询，对于不会 sql 语句的前端开发相当友好。

你可以直接问：数据库有多少个表？某个表有多少条记录？帮我查询符合某某条件的所有记录，按什么排序...

其他的数据库像 MySQL MongoDB Redis SQLLite 都有相应的 MCP server 配置和使用几乎也是一样的。

puppeteer MCP server

MCP 配置如下

{ "mcpServers": { "puppeteer": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-puppeteer"] } }}

Cursor 中测试，让它访问一个网页，点击一个按钮，最后截图。它可以启动浏览器，模拟点击行为，最后截图给我，非常方便。相信很快就会有使用自然语言来描述自动化测试的流程和实践。

另外，playwright-mcp 也是一个很出名的自动化测试工具，有类似的功能。

magic MCP server

文档 github.com/21st-dev/ma…

它是 21st.dev 开发的，像是 v0 和 bolt.new 智能生成 UI 组件和 App ，但它运行在 Cursor 或 Trae 里面的。

首先，要登录 21st.dev 生成 API key 21st.dev/magic/conso…

MCP 配置如下，把 API key 写到里面

{ "mcpServers": { "@21st-dev/magic": { "command": "npx", "args": [ "-y", "@21st-dev/magic@latest", "API_KEY=\"xxxx\"" ] } }}

此时 Cursor 免费试用到期了，我把这个配置粘贴到 Trae 里测试。在 Trae 右侧找到 MCP 找到“手动配置”，再找到 Raw Config 原生配置，即可打开它的 mcp.json 文件。

我参考它文档的提示，输入了一个 prompt /ui create a modern navigation bar with responsive design

它直接给我启动了一个项目，并打开浏览器预览

browser-tools MCP server

文档 browsertools.agentdesk.ai/installatio…

功能很全面，完全符合前端开发调试浏览器的需求

Console logs and errorsXHR network requests/responsesScreenshot capabilities w/ optional auto-paste into CursorCurrently selected DOM elementsRun SEO, Performance & Code Quality Scans via LighthouseRun a NextJS-specific SEO auditEnter into “Debugger Mode” which uses many tools + prompts to fix bugsEnter into “Audit Mode” to perform a comprehensive web app audit

文档也有详细的安装步骤，大概这么几个

第一，下载安装 chrome 插件，还有打开“开发者模式”

第二，配置 MCP

"browserTool": { "command": "npx", "args": ["@agentdeskai/browser-tools-mcp"] }

第三，新开一个控制台窗口，启动本地服务

npx @agentdeskai/browser-tools-server@1.2.0

然后打开网页，就可以看到它在 debug 了