MCP 工具链统一配置
AI 编程工具本身只能读写代码和执行命令。但真实开发中，你需要查数据库、看 Figma 设计稿、浏览网页文档、操作 GitHub Issue——这些能力需要通过 MCP（Model Context Protocol） 来扩展。MCP 是 Anthropic 提出的开放协议，让 AI 工具可以通过标准接口调用外部工具。本章详解 MCP 的协议原理，以及在 Cursor、Claude Code、Windsurf 中如何统一配置数据库、Figma、浏览器、GitHub 等 MCP Server。
1. MCP 协议原理
1.1 什么是 MCP
MCP（Model Context Protocol）是一个开放标准，定义了 AI 应用（Client）与外部工具（Server）之间的通信协议。它的核心思想是：AI 不需要内置所有能力，而是通过标准接口调用外部工具。
AI Agent（Client）
↓ MCP 协议（JSON-RPC）
MCP Server（Tool Provider）
↓
外部资源（数据库 / Figma / GitHub / 浏览器）
1.2 核心概念
| 概念 | 说明 | 示例 |
|---|---|---|
| Tools | AI 可以调用的函数 | query_database(sql) |
| Resources | AI 可以读取的数据 | postgres://table/videos |
| Prompts | 预定义的提示词模板 | analyze_schema |
| Sampling | Server 向 Client 请求 LLM 推理 | Server 需要 AI 帮忙分析 |
最常用的是 Tools——AI 在需要时主动调用工具获取信息或执行操作。
1.3 传输方式
MCP 支持两种传输方式：
| 方式 | 协议 | 适用场景 |
|---|---|---|
| stdio | 标准输入/输出 | 本地进程，最常用 |
| SSE | HTTP Server-Sent Events | 远程服务 |
大部分 MCP Server 用 stdio 方式——AI 工具启动一个本地进程，通过 stdin/stdout 通信。
2. Cursor MCP 配置
2.1 配置文件
Cursor 的 MCP 配置在 .cursor/mcp.json：
{
"mcpServers": {
"postgres": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-postgres"],
"env": {
"DATABASE_URL": "postgresql://postgres:postgres@localhost:5432/ai_video"
}
},
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_TOKEN}"
}
},
"browser": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-puppeteer"]
},
"filesystem": {
"command": "npx",
"args": [
"-y", "@modelcontextprotocol/server-filesystem",
"/Users/dev/projects/ai-video"
]
}
}
}2.2 配置要点
- command：启动 MCP Server 的命令
- args：命令参数，
-y是 npx 的自动确认安装 - env：传给 Server 的环境变量
- 环境变量支持
${VAR_NAME}引用系统环境变量，避免在配置文件中硬编码密钥
3. Claude Code MCP 配置
3.1 配置方式
Claude Code 的 MCP 配置通过 claude mcp 命令管理：
# 添加 MCP Server
claude mcp add postgres -- npx -y @modelcontextprotocol/server-postgres
# 添加带环境变量的 Server
claude mcp add github \
-e GITHUB_PERSONAL_ACCESS_TOKEN=$GITHUB_TOKEN \
-- npx -y @modelcontextprotocol/server-github
# 列出已配置的 Server
claude mcp list
# 删除 Server
claude mcp remove postgres3.2 项目级配置
Claude Code 也支持项目级 MCP 配置文件（.mcp.json）：
{
"mcpServers": {
"postgres": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-postgres"],
"env": {
"DATABASE_URL": "postgresql://postgres:postgres@localhost:5432/ai_video"
}
}
}
}项目级配置跟随项目提交到 Git，团队共享。
3.3 Claude Code 使用 MCP
配置好 MCP Server 后，Claude Code 可以直接调用工具：
$ claude "查看 videos 表的 schema 并告诉我有哪些字段"
# Claude Code 会自动调用 postgres MCP 的 query 工具
# → SELECT column_name, data_type FROM information_schema.columns WHERE table_name = 'videos'
$ claude "创建一个新的 API 路由，返回指定用户的所有视频，按创建时间倒序"
# Claude Code 会先查 schema 理解数据模型，再生成代码4. 数据库 MCP
4.1 PostgreSQL MCP Server
这是最实用的 MCP Server——让 AI 直接查数据库，理解你的数据模型。
{
"postgres": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-postgres"],
"env": {
"DATABASE_URL": "postgresql://postgres:postgres@localhost:5432/ai_video"
}
}
}提供的工具：
| 工具 | 说明 |
|---|---|
query | 执行 SQL 查询（只读） |
list_tables | 列出所有表 |
describe_table | 查看表结构 |
4.2 典型用法
Prompt: "查看 videos 表和 users 表的关系，然后创建一个 API
返回视频列表并包含作者信息"
AI 的行为：
1. 调用 describe_table('videos') → 看到 user_id 外键
2. 调用 describe_table('users') → 看到可用字段
3. 生成 Drizzle ORM 的 JOIN 查询代码
AI 不用你描述数据模型——它直接看数据库，比你口述准确。
4.3 安全注意事项
- 开发环境专用：只连接本地数据库，绝对不要连生产库
- 只读账号：如果可能，使用只有 SELECT 权限的数据库账号
- 敏感数据：数据库可能包含用户数据，确保不会泄露到 AI 日志
5. Figma MCP
5.1 配置
{
"figma": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-figma"],
"env": {
"FIGMA_PERSONAL_ACCESS_TOKEN": "${FIGMA_TOKEN}"
}
}
}5.2 提供的能力
| 工具 | 说明 |
|---|---|
get_file | 获取 Figma 文件结构 |
get_node | 获取特定节点的设计数据 |
get_images | 导出节点为图片 |
get_styles | 获取设计系统的样式 |
5.3 设计到代码的工作流
Prompt: "根据 Figma 文件 xxx 中的视频卡片组件，
创建对应的 Vue 组件，使用 Tailwind CSS"
AI 的行为：
1. 调用 get_node → 获取组件的层级、尺寸、颜色
2. 分析设计数据 → 理解布局、间距、字体
3. 生成 Vue 组件 → 使用 Tailwind 类名还原设计
Figma MCP 让 AI 能"看到"设计稿——不再需要你截图粘贴或口述"卡片宽度 320px，圆角 12px"。
6. Browser MCP
6.1 Puppeteer MCP
{
"browser": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-puppeteer"]
}
}提供的能力：
- navigate：打开 URL
- screenshot：截取页面截图
- click：点击元素
- fill：填写表单
- evaluate：执行 JavaScript
6.2 应用场景
自动化测试：
Prompt: "打开 http://localhost:3000/upload，上传一个视频文件，
截图确认上传进度条出现"
文档查阅：
Prompt: "打开 Nuxt 官方文档中关于 useFetch 的页面，
告诉我 transform 选项的用法"
竞品分析：
Prompt: "打开 bilibili.com 的视频页面，截图分析它的视频播放器布局"
7. GitHub MCP
7.1 配置
{
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_TOKEN}"
}
}
}7.2 提供的工具
| 工具 | 说明 |
|---|---|
list_issues | 列出 Issue |
get_issue | 获取 Issue 详情 |
create_issue | 创建 Issue |
create_pull_request | 创建 PR |
search_code | 搜索代码 |
get_file_contents | 获取文件内容 |
7.3 Issue 驱动开发
Prompt: "查看 repo ai-video-platform 的 open issues，
找到关于视频上传失败的 bug，分析原因并修复"
AI 的行为：
1. 调用 list_issues(state: 'open') → 找到相关 Issue
2. 调用 get_issue(id) → 读取 bug 描述和复现步骤
3. 分析代码找到 bug → 修复
4. 调用 create_pull_request → 提交 PR
8. 统一配置方案
8.1 推荐的 MCP 组合
对于 AI 视频平台项目，推荐配置这些 MCP Server：
| MCP Server | 用途 | 优先级 |
|---|---|---|
| PostgreSQL | 查询数据模型、验证数据 | 必装 |
| GitHub | Issue 管理、PR 创建 | 必装 |
| Browser | 页面测试、文档查阅 | 推荐 |
| Figma | 设计稿到代码 | 有设计稿时 |
| Filesystem | 增强文件操作 | 可选 |
8.2 完整配置文件
{
"mcpServers": {
"postgres": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-postgres"],
"env": {
"DATABASE_URL": "postgresql://postgres:postgres@localhost:5432/ai_video"
}
},
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_TOKEN}"
}
},
"browser": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-puppeteer"]
},
"sequential-thinking": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-sequential-thinking"]
}
}
}8.3 跨工具共享
Cursor（.cursor/mcp.json）和 Claude Code（.mcp.json）的配置格式相同，可以用符号链接共享：
# 项目根目录创建 MCP 配置
echo '{ "mcpServers": { ... } }' > .mcp.json
# Cursor 引用同一个配置
mkdir -p .cursor
ln -s ../.mcp.json .cursor/mcp.json本章小结
- MCP 协议：AI 工具调用外部资源的开放标准，支持 Tools / Resources / Prompts
- PostgreSQL MCP：让 AI 直接查数据库理解数据模型，生成更准确的查询代码
- Figma MCP：AI 读取设计稿数据，自动生成 Tailwind 组件
- Browser MCP：自动化页面测试、文档查阅、截图验证
- GitHub MCP：Issue 驱动开发，AI 读取 Issue 描述并自动修复提交 PR
- 统一配置：
.mcp.json格式跨工具共享，团队提交到 Git 统一管理