什么是MCP？

把MCP想象成你的AI的通用插头。它将AI连接到你的仓库、数据库或其他任何你正在使用的东西，这样你就不必逐字逐句地给它提供上下文了。

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

---

将其粘贴到.mcp.json文件中，你的AI就准备好运行了。现在，让我们来看看8个能让编码不再那么像工作的服务器。

1. GitMCP：您的仓库，轻松无忧

是否曾遇到过AI完全搞错你项目的上下文？GitMCP可以解决这个问题。将github.com替换为gitmcp.io，在你的仓库链接中，这样你的AI就可以实时查看你的代码和文档了。

它为何出色：无需描述你的项目。你的AI自然知晓情况。

试一试：

1. 获取了一个仓库

2. 将此添加到您的配置中：

{
  "mcpServers": {
    "gitmcp": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your_token"
      }
    }
  }
}

---

询问“我的仓库里有什么新内容？”，它就会提取最新的内容。

按回车键或点击以查看全尺寸图像

2. Supabase MCP：轻松打造数据库

如果你使用的是Supabase，这个功能堪称瑰宝。它能将你的AI与数据库相连，这样你就无需使用仪表盘，直接告诉它要做什么，比如创建表格或设置安全措施。

无需再手动编写 SQL。你的 AI 会处理它。

试一试：

1. 获取你的 Supabase 项目引用和令牌。

2. 设置如下：

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server-supabase@latest", "--read-only", "--project-ref=your_ref"],
      "env": {
        "SUPABASE_ACCESS_TOKEN": "your_token"
      }
    }
  }
}

---

说“创建一个带有安全规则的用户表”，它就会为你生成 SQL 语句。

3. 浏览器MCP：无需离开编辑器即可搜索

被bug卡住了？Browser MCP让你的AI直接在IDE中搜索资料或查看文档，无需在标签页之间来回切换。

让你专注其中，无需浏览器。

按回车键或点击以查看全尺寸图像

添加以下内容：

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

---

询问“查找Java中‘空指针异常’的解决方法”，它会在网上搜索答案。

按回车键或点击以查看全尺寸图像

4. 任务大师：将想法付诸行动

有了好主意却没有计划？Claude Taskmaster 能梳理你的想法，制定出合理的待办事项清单。它就像一个帮你整理思路的伙伴。

将模糊的想法转化为明确的任务，即使你是独自编码。

1. 设置它：

{
  "mcpServers": {
    "taskmaster": {
      "command": "npx",
      "args": ["-y", "@eyaltoledano/claude-task-master"]
    }
  }
}

---

1. 说“规划一个带用户登录功能的待办事项应用程序”，你会得到如下列表：

- 制作登录系统 - 设置任务数据库 - 构建任务列表 UI

---

然后，你的AI就可以处理每一部分了。

按回车键或点击以查看全尺寸图像

5. Exa Search MCP：真实情况，而非猜测

AI有时会编造内容。Exa Search MCP会让你的AI在网络上查找真实信息，比如最新的API文档或统计数据。

不再有虚假数字或过时事实。

添加以下内容：

{
  "mcpServers": {
    "exa": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.exa.ai/mcp?exaApiKey=your-exa-api-key"
      ]
    }
  }
}

---

询问“Python 3.12 功能的最新情况如何？”，它就会抓取真实数据。

按回车键或点击以查看全尺寸图像

6. 知识图谱记忆：保存你的成果

当你成功实现一项功能时，知识图谱记忆会保存你实现它的方式。下次你需要类似的东西时，你的AI就会调用它。

它为何出色：停止重复做同样的工作。

试一试：

1. 设置它：

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

---

构建暗模式切换开关后，说“保存这个”。稍后，询问“再次使用那个暗模式代码”，它就会为你的新项目进行调整。

7. 21st Dev Magic AI Agent：美观的 UI

不会设计？21世纪开发魔法让你用通俗易懂的语言描述UI，它就能输出简洁、现代的代码。

无需设计师，让你的应用看起来很专业。

添加以下内容：

{
  "mcpServers": {
    "magic-ui": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic-mcp"]
    }
  }
}

---

说“制作一个带绿色按钮的登录表单”，你会得到：

function LoginForm() {
  return (
    <div className="p-4 bg-white rounded">
      <input type="email" placeholder="邮箱" className="p-2 border mb-2 w-full" />
      <input type="password" placeholder="密码" className="p-2 border mb-2 w-full" />
      <button className="p-2 bg-green-500 text-white rounded w-full">登录</button>
    </div>
  );
}

---

将其添加到你的 React 应用中，你就大功告成了。

按回车键或点击以查看全尺寸图像

8. Vibe Check MCP：揪出愚蠢错误

Vibe Check MCP会扫描你的代码，查找诸如缺少错误检查或命名混乱之类的问题。它就像一个能发现你拼写错误的朋友。

防止小错误演变成大问题。

1. 设置它：

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

---

询问“检查我的表单代码是否存在问题”，它就会标记出任何可疑之处。