Claude Code MCP服务器配置教程：连接外部数据源完整指南

什么是MCP服务器？

MCP（Model Context Protocol，模型上下文协议）是Anthropic公司设计的一套标准协议，用于定义AI模型与外部资源的交互方式。该协议于2024年11月正式开源，其设计灵感来源于LSP（Language Server Protocol，语言服务器协议）——正是LSP让VS Code等编辑器能够通过统一接口支持数十种编程语言的智能提示。MCP采用类似的「协议标准化」思路：与其让每个AI应用分别实现与数据库、API、文件系统的对接逻辑，不如定义一套通用协议，让工具提供方一次实现、所有兼容AI均可调用。协议底层基于JSON-RPC 2.0通信规范，支持stdio（标准输入输出）和HTTP+SSE（服务器推送事件）两种传输方式，前者适合本地进程通信，后者适合远程服务调用。

Claude Code本身只能在代码库范围内工作——读写文件、运行命令都没问题，但无法直接连接数据库、调用第三方API或浏览网页。

MCP服务器正是解决这个问题的桥梁。你可以把它理解为一个"插件"，安装后会为Claude Code提供额外的工具集。不同的MCP服务器配备不同的工具，对接不同的外部资源：

• Supabase MCP服务器：列出数据表、部署边缘函数、执行SQL命令
• Playwright MCP服务器：打开浏览器、浏览网页、检查元素、截图
• Context7 MCP服务器：从各种框架和库中获取最新文档

需要明确的一点是，并不是AI本身直接连接外部资源，而是MCP服务器负责实际的连接工作，然后将结果返回给Claude Code使用。

如何添加MCP服务器到Claude Code

三种作用范围（Scope）

添加MCP服务器时，你需要选择一个作用范围：

1. Project（项目范围）：配置会被推送到远程仓库，所有项目参与者都能使用
2. Local（本地范围）：仅当前用户在当前项目中可用（默认值）
3. Global（全局范围）：在电脑上的任何项目中都可使用

安装Context7 MCP服务器

基本命令格式如下：

claude mcp add <服务器名称> --scope project -- <命令及参数>

对于Context7，推荐使用远程HTTP连接方式。在其官方文档页面找到Claude Code对应的安装命令，添加--scope project参数后执行即可。

Context7解决的是AI「知识截止日期」问题。大语言模型的训练数据存在时间截止点，这意味着模型对Tailwind CSS v4、Next.js 15等新版本框架的API可能一无所知，甚至会「自信地」生成已被废弃的旧版语法。Context7通过实时抓取并索引各主流框架的官方文档、GitHub仓库的CHANGELOG和README，构建了一个持续更新的文档知识库。当Claude调用Context7时，实际上是在执行一次「检索增强生成」（RAG）操作——先用语义搜索定位相关文档片段，再将其注入到上下文窗口中，让模型基于最新信息作答，而非依赖可能过时的训练记忆。

Windows用户注意事项：

如果你在Windows上原生运行Claude Code，对于使用NPX的本地服务器，需要在命令前加上cmd /c前缀。此外，NPX的-y标志可能导致"未知选项"错误，解决方法是先去掉该标志运行命令，然后手动在生成的mcp.json文件的参数数组中添加-y。

安装成功后，项目根目录会生成一个mcp.json文件，包含所有项目级MCP服务器的配置信息。

安装Playwright MCP服务器

Playwright是微软开源的跨浏览器自动化测试框架，支持Chromium、Firefox和WebKit三大引擎，是Selenium的现代继任者。其核心优势在于原生支持异步操作和现代Web特性（如Shadow DOM、iframe、Service Worker），并内置了自动等待机制，无需手动编写等待逻辑。Playwright MCP服务器将这套能力封装为AI可调用的工具集，本质上是在本地启动一个受控浏览器实例，通过Chrome DevTools Protocol（CDP）与页面交互。这意味着Claude不仅能「看到」页面文本，还能获取DOM结构、CSS计算样式、网络请求等底层信息，为AI辅助的UI调试和视觉回归测试提供了全新可能。

Playwright的安装命令类似，同样需要指定--scope project。Windows环境下需要添加cmd /c前缀，但这个服务器不需要-y标志。

安装完成后，mcp.json文件中会同时包含Context7和Playwright两个服务器的配置。

实战演示：用Context7获取最新框架文档

启动Claude Code后，输入/mcp命令可以查看所有已连接的MCP服务器状态。看到绿色对勾表示连接成功。

实际使用示例：

你能检查一下最新的Tailwind文档，看看全局CSS文件里的主题变量配置是否正确吗？使用Context7。文件路径是 src/app/global.css

关键技巧：在提示词中明确指出"使用Context7"，这样Claude就知道要通过该MCP服务器获取最新信息，而不是依赖可能过时的训练数据。

Claude会先调用Context7的"解析库ID