6.4 MCPs 模型上下文协议

什么是 MCP？

MCP（Model Context Protocol，模型上下文协议）是 Anthropic 推出的标准化协议，用于连接 AI 模型与外部服务。通过 MCP，Claude Code 可以直接与数据库、API、开发工具等外部系统交互，而不仅仅是生成代码。

Supabase MCP 集成

MCP 工作原理

┌─────────────────────────────────────────────────────────────┐
│                     Claude Code                              │
├─────────────────────────────────────────────────────────────┤
│                          │                                   │
│                    MCP Protocol                              │
│                          │                                   │
│    ┌─────────┬───────────┼───────────┬─────────┐            │
│    │         │           │           │         │            │
│    ▼         ▼           ▼           ▼         ▼            │
│ ┌──────┐ ┌──────┐ ┌──────────┐ ┌──────┐ ┌──────────┐       │
│ │GitHub│ │Stripe│ │Supabase  │ │ Neon │ │Playwright│       │
│ └──────┘ └──────┘ └──────────┘ └──────┘ └──────────┘       │
│                                                              │
└─────────────────────────────────────────────────────────────┘

MCP 配置文件结构

json

{
  "mcpServers": {
    "server-name": {
      "description": "服务描述",
      "command": "npx",
      "args": ["-y", "@package/mcp-server"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}

安装 MCPs

bash

# 安装单个 MCP
npx claude-code-templates@latest --mcp database/supabase --yes

# 安装多个 MCPs
npx claude-code-templates@latest \
  --mcp database/supabase \
  --mcp devtools/context7 \
  --mcp browser_automation/playwright-mcp \
  --yes

# 交互式选择
npx claude-code-templates@latest

安装后的配置位置：

全局配置：~/.claude/settings.json
项目配置：.claude/settings.json（仅对当前项目生效）

MCP 分类

Claude Code Templates 包含 59+ 个预置 MCP 配置，按功能分类：

1. 数据库 (database)

MCP	描述
`supabase`	Supabase 数据库连接
`neon`	Neon PostgreSQL 连接
`postgresql-integration`	PostgreSQL 集成
`mysql-integration`	MySQL 集成

2. 开发工具 (devtools)

MCP	描述
`context7`	实时文档拉取
`stripe`	Stripe 支付 API
`sentry`	错误监控
`grafana`	监控面板
`elasticsearch`	搜索服务
`mongodb`	MongoDB 连接

3. 浏览器自动化 (browser_automation)

MCP	描述
`playwright-mcp`	Playwright 自动化
`browsermcp`	浏览器控制
`chrome-devtools`	Chrome 开发工具

4. 文件系统 (filesystem)

MCP	描述
`filesystem-access`	文件系统访问

5. 深度研究 (deepresearch)

MCP	描述
`deepresearch-mcp`	深度研究工具

经典 MCP 示例

Supabase

json

{
  "mcpServers": {
    "supabase": {
      "description": "Connect your Claude Code to Supabase",
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server-supabase@latest",
        "--read-only",
        "--project-ref=<project-ref>"
      ],
      "env": {
        "SUPABASE_ACCESS_TOKEN": "<personal-access-token>"
      }
    }
  }
}

使用场景：

查询数据库表结构
执行 SQL 查询
管理数据库迁移
监控数据库性能

Context7

json

{
  "mcpServers": {
    "context7": {
      "description": "Pull up-to-date documentation and code
        examples straight from the source into your prompt.",
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    }
  }
}

使用场景：

获取最新框架文档
拉取版本特定的 API 参考
获取示例代码

Playwright

json

{
  "mcpServers": {
    "playwright-server": {
      "description": "Browser automation capabilities using
        Playwright. Enables LLMs to interact with web pages.",
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

使用场景：

网页自动化测试
数据抓取
UI 交互模拟
截图和 PDF 生成

Neon

json

{
  "mcpServers": {
    "Neon": {
      "description": "MCP server for interacting with Neon
        Management API and databases",
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.neon.tech/mcp"]
    }
  }
}

使用场景：

管理 Neon 数据库项目
创建和管理分支
执行 SQL 查询
监控数据库使用情况

Stripe

json

{
  "mcpServers": {
    "stripe": {
      "description": "Let your AI agents interact with
        the Stripe API.",
      "command": "npx",
      "args": ["-y", "@stripe/mcp", "--tools=all"],
      "env": {
        "STRIPE_SECRET_KEY": "your_stripe_secret_key_here"
      }
    }
  }
}

使用场景：

创建支付链接
管理订阅
查询交易记录
处理退款

配置环境变量

大多数 MCP 需要配置 API 密钥：

bash

# Supabase
export SUPABASE_ACCESS_TOKEN="your-token"

# Stripe
export STRIPE_SECRET_KEY="sk_test_..."

# Sentry
export SENTRY_AUTH_TOKEN="your-token"

# OpenAI (用于某些 MCP)
export OPENAI_API_KEY="sk-..."

在项目中使用 MCP

步骤 1：安装 MCP

bash

npx claude-code-templates@latest --mcp database/supabase --yes

步骤 2：配置环境变量

bash

# 在 .env 或环境中设置
export SUPABASE_ACCESS_TOKEN="your-token"

步骤 3：启动 Claude Code

bash

claude

步骤 4：使用 MCP 功能

在对话中直接使用：

查询 Supabase 中 users 表的结构

Claude Code 会自动调用 Supabase MCP 获取数据。

MCP 与其他组件的配合

MCP + Agents

bash

# 安装数据库架构师 Agent 和 Supabase MCP
npx claude-code-templates@latest \
  --agent database/database-architect \
  --mcp database/supabase \
  --yes

MCP + Commands

bash

# 安装 Supabase 相关命令和 MCP
npx claude-code-templates@latest \
  --command database/supabase-migration-assistant \
  --command database/supabase-security-audit \
  --mcp database/supabase \
  --yes

完整示例：全栈开发环境

bash

#!/bin/bash
# 全栈开发 MCP 配置

# 1. 数据库
npx claude-code-templates@latest \
  --mcp database/supabase \
  --mcp database/neon \
  --yes

# 2. 支付
npx claude-code-templates@latest \
  --mcp devtools/stripe \
  --yes

# 3. 监控
npx claude-code-templates@latest \
  --mcp devtools/sentry \
  --mcp devtools/grafana \
  --yes

# 4. 浏览器自动化
npx claude-code-templates@latest \
  --mcp browser_automation/playwright-mcp \
  --yes

# 5. 文档
npx claude-code-templates@latest \
  --mcp devtools/context7 \
  --yes

echo "全栈开发 MCP 配置完成！"
echo ""
echo "已配置服务："
echo "  - Supabase 数据库"
echo "  - Neon PostgreSQL"
echo "  - Stripe 支付"
echo "  - Sentry 错误监控"
echo "  - Grafana 监控"
echo "  - Playwright 自动化"
echo "  - Context7 文档"

自定义 MCP 配置

你可以在 .claude/settings.json 中添加自定义 MCP：

json

{
  "mcpServers": {
    "my-custom-api": {
      "description": "我的自定义 API",
      "command": "npx",
      "args": ["-y", "@my-org/mcp-server"],
      "env": {
        "API_KEY": "${MY_API_KEY}"
      }
    }
  }
}

最佳实践

安全第一：不要在配置文件中硬编码密钥
环境隔离：开发/生产使用不同的 API 密钥
按需加载：只安装项目需要的 MCP
定期更新：使用 @latest 获取最新版本
权限最小化：使用 --read-only 限制写操作

常见问题

Q: MCP 无法连接？

检查：

环境变量是否正确设置
网络是否可以访问 MCP 服务
API 密钥是否有效

Q: 如何查看已安装的 MCP？

bash

cat ~/.claude/settings.json | jq '.mcpServers'

Q: 如何卸载 MCP？

手动编辑 ~/.claude/settings.json，删除对应的 MCP 配置。

下一步

6.5 Skills 技能 - 可复用工作流
6.6 Analytics 工具 - 开发分析

6.4 MCPs 模型上下文协议 ​

什么是 MCP？ ​

MCP 工作原理 ​

MCP 配置文件结构 ​

安装 MCPs ​

MCP 分类 ​

1. 数据库 (database) ​

2. 开发工具 (devtools) ​

3. 浏览器自动化 (browser_automation) ​

4. 文件系统 (filesystem) ​

5. 深度研究 (deepresearch) ​

经典 MCP 示例 ​

Supabase ​

Context7 ​

Playwright ​

Neon ​

Stripe ​

配置环境变量 ​

在项目中使用 MCP ​

步骤 1：安装 MCP ​

步骤 2：配置环境变量 ​

步骤 3：启动 Claude Code ​

步骤 4：使用 MCP 功能 ​

MCP 与其他组件的配合 ​

MCP + Agents ​

MCP + Commands ​

完整示例：全栈开发环境 ​

自定义 MCP 配置 ​

最佳实践 ​

常见问题 ​

Q: MCP 无法连接？ ​

Q: 如何查看已安装的 MCP？ ​

Q: 如何卸载 MCP？ ​

下一步 ​

6.4 MCPs 模型上下文协议

什么是 MCP？

MCP 工作原理

MCP 配置文件结构

安装 MCPs

MCP 分类

1. 数据库 (database)

2. 开发工具 (devtools)

3. 浏览器自动化 (browser_automation)

4. 文件系统 (filesystem)

5. 深度研究 (deepresearch)

经典 MCP 示例

Supabase

Context7

Playwright

Neon

Stripe

配置环境变量

在项目中使用 MCP

步骤 1：安装 MCP

步骤 2：配置环境变量

步骤 3：启动 Claude Code

步骤 4：使用 MCP 功能

MCP 与其他组件的配合

MCP + Agents

MCP + Commands

完整示例：全栈开发环境

自定义 MCP 配置

最佳实践

常见问题

Q: MCP 无法连接？

Q: 如何查看已安装的 MCP？

Q: 如何卸载 MCP？

下一步