本文介绍了Model Context Protocol（MCP）在编程领域的应用，特别是结合大型语言模型（LLM）实现自然语言编程。文章探讨了MCP服务器的多种实现方式，包括文件系统、fetch、GitHub、git、Postgres、puppeteer和magic等，并提供了相应的配置和使用方法。通过实例演示，展示了MCP在VSCode、Cursor和Trae等编辑器中的应用，以及在代码编写、数据库查询、自动化测试等方面的潜力。作者还展望了MCP的未来发展，认为它将降低配置和使用成本，实现开箱即用。

🚀 **MCP的定义与应用**: MCP允许开发者使用自然语言控制编程任务，结合LLM实现代码编写、文件操作、数据库查询等功能，极大地提高了编程效率。

💻 **多种MCP Server实现**: 文章详细介绍了多种MCP服务器，包括文件系统、fetch、GitHub、git、Postgres、puppeteer和magic等，并提供了相应的配置方法和使用示例，涵盖了前端开发中的常见需求。

🛠️ **编辑器与工具集成**: 介绍了MCP在VSCode、Cursor和Trae等编辑器中的应用，展示了如何在这些环境中配置和使用MCP服务器，从而实现自然语言编程。

💡 **未来发展趋势**: 作者预测MCP将朝着更易用、更强大的方向发展，随着LLM、MCP协议和服务器的升级，以及Agent的改进，MCP将降低配置和使用成本，实现开箱即用，对前端开发产生深远影响。

原创 前端双越老师 2025-06-03 08:30 重庆

点击关注公众号，“技术干货” 及时达！

（创作者训练营强势上线，速戳上图了解）

大家好，我是双越老师，也是 wangEditor 作者。

开始这段时间 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 ServerMCP 官方 GitHub repo 里收录了很多常用的 MCP server 我都是从这个文档找的

https://github.com/modelcontextprotocol/servers

fileSystem MCP server文档：https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem文档里有各个 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文档：

https://github.com/modelcontextprotocol/servers/tree/main/src/fetch

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

安装完验证，控制台输入 

python3 --version

 可以查看版本

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

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

uvx

npx

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

uvx mcp-server-fetch

"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"      }    }}

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

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

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

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

/ui create a modern navigation bar with responsive design

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

npx @agentdeskai/browser-tools-server@1.2.0

AI编程资讯AI Coding专区指南：

https://aicoding.juejin.cn/aicoding

点击"阅读原文"了解详情~

阅读原文

跳转微信打开

Fish AI Reader

Fish AI Reader

AI辅助创作，多种专业模板，深度分析，高质量内容生成。从观点提取到深度思考，FishAI为您提供全方位的创作支持。新版本引入自定义参数，让您的创作更加个性化和精准。

FishAI

鱼阅，AI 时代的下一个智能信息助手，助你摆脱信息焦虑

联系邮箱 441953276@qq.com