Home
avatar

麒麟剑

Claude Code实战教程(7):连接外部世界——MCP协议与第三方工具集成

《从零开始的 Claude Code 实战系列教程》第 7 篇 · 公众号「麒麟剑的AI自动化Lab」连载

Connected network and integration ▲ MCP 让 Claude 能够连接数据库、API、浏览器等外部工具,打开无限可能


一、没有 MCP 之前,AI 编程助手是什么样?

想象一下,你想让 AI 帮你:

  • “查一下数据库里有多少用户”
  • “在 GitHub 上创建一个新的 Issue”
  • “打开 Chrome 浏览器,帮我测试一下这个页面”

传统的做法

  1. AI 告诉你:“我无法直接访问你的数据库”
  2. 你需要自己查询数据库,然后把结果复制给 AI
  3. AI 分析结果,给出建议

有 MCP 之后

  1. AI 直接连接数据库,查询数据
  2. AI 直接操作 GitHub,创建 Issue
  3. AI 直接控制浏览器,执行测试

这就是 MCP(Model Context Protocol)的革命性意义。


二、什么是 MCP?

MCP(Model Context Protocol)是 Anthropic 推出的开放协议,让 AI 模型能够安全、标准地访问外部工具和系统。

类比理解

把 MCP 想象成:

  • USB-C 接口:一个标准,连接各种外设
  • App Store:各种应用,满足各种需求
  • 插件系统:给软件扩展能力

有了 MCP,Claude 可以:

  • 访问你的数据库(PostgreSQL、MySQL)
  • 操作 GitHub(PR、Issue、代码搜索)
  • 控制浏览器(自动化测试)
  • 读取文件(文件系统)
  • 调用 API(外部服务)

核心优势

优势说明
标准化统一接口,一次开发,多处使用
安全性权限控制,数据隔离
可扩展社区贡献各种 Server
跨平台支持各种语言和平台

三、MCP Server 生态一览

目前已有数十个官方和社区维护的 MCP Server:

Server功能安装命令
GitHubPR、Issue、代码搜索claude mcp add github ...
Playwright浏览器自动化claude mcp add playwright ...
Postgres数据库查询claude mcp add postgres ...
Slack消息通知claude mcp add slack ...
Filesystem文件读写内置支持
FetchHTTP 请求claude mcp add fetch ...

安装来源

  • 官方注册表:https://glama.ai/mcp/servers
  • GitHub 搜索:search “mcp server” on GitHub
  • 社区维护:npx @modelcontextprotocol/server-<name>

四、安装第一个 MCP Server:GitHub

前提条件

# 确保已安装 GitHub CLI
brew install gh
gh auth login

安装步骤

claude mcp add github \
  --transport sse \
  https://mcp.github.com/mcp \
  --header "Authorization: Bearer $GITHUB_TOKEN"

验证安装

在 Claude Code 中:

/mcp

应该能看到 GitHub 服务器已连接。

使用 GitHub MCP

列出我最近的 PR

Claude 会自动调用 GitHub MCP 的 list_prs 工具。

创建一个 Issue,标题是"登录页面有 bug",描述包含复现步骤

五、安装 Playwright MCP(浏览器自动化)

安装

npx @modelcontextprotocol/server-playwright

使用场景

在 Chrome 中打开 https://example.com 并截图
在 https://github.com 搜索 "claude code",列出前 5 个结果

实际用途

  • 自动化测试
  • UI 验证
  • 网页信息提取
  • 性能监控

六、配置 MCP Server

配置文件位置

# 用户级(所有项目可用)
~/.claude.json

# 项目级(仅当前项目)
.claude.json

手动编辑配置

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "$GITHUB_TOKEN"
      }
    }
  }
}

通过命令添加

# 添加 MCP Server
claude mcp add <name> [options]

# 列出已安装的 MCP Server
claude mcp list

# 删除 MCP Server
claude mcp rm <name>

七、MCP 作为 Slash Command

MCP 工具会自动暴露为斜杠命令:

/mcp__github__list_prs
/mcp__github__get_issue 123

格式:/mcp__<server-name>__<tool-name>


八、编写自己的 MCP Server

最简单的 MCP Server(Node.js)

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { CallToolRequestSchema, ListToolsRequestSchema } from "@modelcontextprotocol/sdk/types.js";

const server = new Server({ name: "my-server", version: "1.0.0" }, {
  capabilities: { tools: {} }
});

// 定义工具
server.setRequestHandler(ListToolsRequestSchema, async () => {
  return {
    tools: [
      {
        name: "get_weather",
        description: "获取指定城市的天气",
        inputSchema: {
          type: "object",
          properties: {
            city: { type: "string", description: "城市名称" }
          },
          required: ["city"]
        }
      }
    ]
  };
});

// 实现工具
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === "get_weather") {
    const { city } = request.params.arguments;
    const weather = await fetchWeather(city);
    return {
      content: [{ type: "text", text: JSON.stringify(weather) }]
    };
  }
  throw new Error(`Unknown tool: ${request.params.name}`);
});

async function fetchWeather(city) {
  return { city, temperature: 25, condition: "sunny" };
}

const transport = new StdioServerTransport();
await server.connect(transport);

部署自己的 Server

# 发布到 npm
npm publish

# 或在 GitHub 上分享
# 其他人可以通过 npx 安装使用

九、实战:连接 PostgreSQL 数据库

安装

claude mcp add postgres \
  --transport stdio \
  npx \
  @modelcontextprotocol/server-postgres \
  postgresql://user:password@localhost:5432/mydb

使用

查询 users 表中有多少条记录
找出最近 7 天注册的用户
帮我分析订单数据,找出销售最好的产品

十、本章小结

概念说明
MCP开放标准,让 AI 访问外部工具
MCP Server实现 MCP 协议的中间件
配置位置~/.claude.json 或 .claude.json
常用 ServerGitHub, Playwright, PostgreSQL
命令claude mcp add/list/rm
编写 Server使用 SDK,定义 Tools

下期预告(第 8 篇):Hooks进阶指南——自动化守门员,让代码质量控制在每一次文件修改时自动执行

关注本系列,从入门到专家,系统掌握 Claude Code 的全部技能。

Claude Code MCP 第三方集成 教程 Anthropic