Deepseek ArtifactsDeepseek Artifacts
MCP 配置 · 16 个步骤

Claude Code MCP 教程:正确添加 MCP 服务器

把 Context7、Playwright 或任何 MCP 服务器接进 Claude Code——传输方式、作用域、.mcp.json、API 密钥和 /mcp 面板,一篇图文讲透。

太长不看版

  • 一条命令装好任何服务器:本地服务器用 claude mcp add name -- npx -y @scope/package,远程服务器用 claude mcp add --transport http name url。
  • 三种传输方式:stdio 在你本机跑一条命令,SSE 是老式远程方案,streamable HTTP 是新一代远程选择。
  • 三种作用域决定谁能用上服务器:local(仅自己)、project(通过 .mcp.json 共享)和 user(你的所有项目)。
  • 会话里输入 /mcp 查看状态和工具列表;第一次工具调用会请求授权,你可以只允许一次,也可以永远放行。

Claude Code Tutorial #7 - MCP Servers

频道:The Net Ninja14:16

在 YouTube 上观看

Claude Code MCP: How to Add MCP Servers (Complete Guide)

频道:Leon van Zyl17:58

在 YouTube 上观看

Model Context Protocol (MCP) — official Claude Code docs

文档:code.claude.com/docs

在 YouTube 上观看

截图来自 The Net Ninja 的章节——干净的全屏录屏。命令拆解、作用域说明和 Windows 修复方案参考了 Leon van Zyl 更完整的实操演示以及官方文档。

视频帧画面归各创作者所有,此处标注出处并附深链直达对应时刻;文字部分为本站撰写。

从零到两个能用的 MCP 服务器

第 1 部分 · MCP 服务器能做什么

  1. 1

    看看 MCP 给 Claude Code 带来什么

    Claude Code 自带文件和终端工具,但代码库之外的世界它够不着。MCP(Model Context Protocol,模型上下文协议)是 Anthropic 标准的外挂工具接口:一个服务器对外暴露能力,Claude Code 就能像调用内置工具一样调用它们。

    Course slide defining MCP, the Model Context Protocol Anthropic designed so Claude Code can interact with external data sources, services and APIs
    课程幻灯片里对 MCP 的一句话定义。在 0:52 观看
  2. 2

    按活儿挑服务器

    每个服务器带自己的工具。Supabase 服务器能列数据表、部署边缘函数、跑 SQL;Playwright 能开真浏览器;Context7 提供最新框架文档。从最能解放你重复劳动的那个开始。

    MCP servers diagram showing the Supabase MCP server giving Claude Code tools like list_tables, deploy_edge_function and execute_sql against a Supabase project
    Supabase 示例:三个工具,对接一个外部服务。在 1:24 观看
  3. 3

    去服务器 README 找安装命令

    服务器作者一般会在 README 里给出现成的 Claude Code 命令——Context7 和 Playwright 都是。拿不准装什么,可以先去 PulseMCP 这类目录站逛逛。

    Playwright MCP server README listing its key features such as fast and lightweight browser automation with accessibility-tree input instead of screenshots
    Playwright MCP 的 README 写明了功能和要求。在 2:02 观看
  4. 4

    搞懂三种传输方式

    官方文档把安装分成本地和远程两类。stdio 服务器在你本机跑一条命令——这是默认方式;SSE 和 HTTP 服务器是你要连接的远程端点,SSE 属于旧方案,接替它的是 streamable HTTP。claude mcp add 的语法三者略有差别。

    Official Claude Code documentation Installing MCP servers page comparing Option 1 local stdio servers with Option 2 and Option 3 remote SSE and HTTP servers
    官方文档对比本地 stdio 与远程 SSE、HTTP。在 3:02 观看

第 2 部分 · 添加第一个服务器

  1. 5

    用 project 作用域添加 Context7

    在终端里执行:claude mcp add context7 --scope project -- npx -y @upstash/context7-mcp。名字随你取,双横杠后面才是要运行的命令,--scope project 会把服务器写进项目共享配置而不是你的个人配置。

    Windows PowerShell terminal running claude mcp add context7 --scope project -- npx -y @upstash/context7-mcp to register the Context7 docs server
    添加 Context7 文档服务器的完整命令。在 5:22 观看
  2. 6

    看看它生成的 .mcp.json

    project 作用域的服务器会写进仓库根目录的 .mcp.json,放在 mcpServers 键下。每个条目记录类型——这里是 stdio——以及命令和参数:结构和 Cursor、Claude Desktop 用的格式一致。

    VS Code editor showing the mcpServers block inside a project .mcp.json file with type stdio, the cmd command and the Context7 npm package arguments
    .mcp.json 内部:stdio 服务器的 type、command 和 args。在 6:42 观看
  3. 7

    Windows 用户注意 cmd /c 前缀

    在不套 WSL 的原生 Windows 上,stdio 命令要在 npx 前面加 cmd /c,服务器跑完后 shell 才能干净退出。官方文档用警告框专门提了这一点,演示视频也给出了具体改法。

    Claude Code documentation warning box telling Windows users to prefix MCP stdio commands with cmd /c so npx-based servers close the shell cleanly
    官方文档关于 Windows stdio 服务器的警告框。在 3:24 观看
  4. 8

    确认文件已经进了仓库

    project 作用域添加完成后,.mcp.json 会作为新的未跟踪文件出现在文件管理器里,提交后队友就能用上同一批服务器。local 作用域永远不会碰这个文件。

    VS Code explorer highlighting a new .mcp.json at the project root next to CLAUDE.md after Claude Code wrote the MCP server configuration to disk
    项目根目录下新建的 .mcp.json,还未跟踪,随时可提交。在 8:32 观看
  5. 9

    更喜欢远程?走 HTTP 传输

    stdio 本地跑不顺时,远程端点是最快的退路:claude mcp add --transport http context7 --scope project https://mcp.context7.com/mcp。不用本地进程,也不用 npm——Claude Code 直接访问这个 URL。

    PowerShell terminal typing claude mcp add --transport http context7 --scope project https://mcp.context7.com/mcp to connect the remote Context7 endpoint
    针对 Context7 端点的 HTTP 版添加命令。在 8:36 观看
  6. 10

    在 /mcp 里确认连接

    启动 Claude Code,输入 /mcp。每个服务器都会显示状态和工具列表。连接失败一般点一下内置的重连就好;还不行的话,下面的排错章节覆盖了常见原因。

    Claude Code /mcp panel reporting context7 connected with a green tick after a reconnect, listing the resolve-library-id and get-library-docs tools
    /mcp 面板显示 context7 已连接,带着它的两个工具。在 9:22 观看

第 3 部分 · 在真实工作里用起来

  1. 11

    用真实提问调用服务器

    挑一件内置工具干不了的事,并点名服务器:对照我的全局 CSS 文件查一下最新的 Tailwind 文档——用 context7。用 @ 提及把文件带上,回答就能贴合你的代码。

    Claude Code prompt asking to check the latest Tailwind docs for theme variables in the global CSS file, explicitly telling the agent to use context7 with globals.css attached
    通过 context7 请求最新 Tailwind 文档的提示词。在 9:38 观看
  2. 12

    批准工具调用

    服务器工具第一次运行时,Claude Code 会请求授权。批准一次,或者对信任的服务器选「总是允许」,之后的调用就不再弹窗。

    Claude Code permission card asking to run the Context7 resolve-library-id MCP tool for Tailwind CSS v4 with yes and always-allow options
    Context7 的 resolve-library-id 工具的授权卡片。在 10:00 观看
  3. 13

    读有据可查的回答

    工具返回相关文档——这里是 Tailwind v4 的主题变量指引,还标注了 token 消耗,然后 Claude Code 把改动应用到你的文件。这就是 MCP 的意义:答案来自最新文档,而不是训练数据的猜测。

    Context7 get-library-docs tool response confirming Tailwind CSS v4 theme variables are properly structured, with code snippets and a token usage count
    get-library-docs 的返回结果,确认了主题配置。在 10:15 观看
  4. 14

    把习惯写进 CLAUDE.md

    输入井号键可以添加项目记忆,比如:实现新库或新框架时,用 Context7 查最新文档。这行字会落进 CLAUDE.md,之后每个会话都自动继承。

    CLAUDE.md project memory gaining the line use Context7 to check up-to-date docs when implementing new libraries or frameworks
    一行 CLAUDE.md 记忆,让 Context7 成为默认选择。在 10:42 观看
  5. 15

    加第二个服务器:Playwright

    浏览器自动化照搬同一套路:claude mcp add playwright --scope project -- cmd /c npx @playwright/mcp@latest——在 macOS 或 Linux 上去掉 cmd /c 部分。一个仓库,多个服务器,一份配置文件。

    Windows terminal adding the Playwright MCP server with claude mcp add playwright --scope project -- cmd /c npx @playwright/mcp@latest
    以 project 作用域添加 Playwright MCP 服务器。在 11:22 观看
  6. 16

    看它开浏览器干活

    让 Claude Code 打开一个页面并总结——Playwright 负责导航、点击和阅读,然后汇报结果。有了 Context7 的文档和 Playwright 的浏览器,大多数外部杂事一句话就能搞定。

    Claude Code session where the Playwright MCP navigates to netninja.dev and returns a structured summary of the site content
    Playwright MCP 打开网站做总结。在 12:42 观看

环境变量、请求头和 API 密钥

远程服务器和需要鉴权的 API 都要凭据。Claude Code 对 stdio 服务器用环境变量、对远程服务器用请求头来传入,不需要手动改配置文件。

  • 1stdio 服务器:claude mcp add myserver -e API_KEY=your-key -e ZONE=your-zone -- npx -y @some/mcp-server——每个变量重复一次 -e 参数,紧跟在服务器名后面写。
  • 2远程 HTTP 服务器:claude mcp add --transport http myserver https://example.com/mcp --header "Authorization: Bearer your-key"——这个请求头会随每次工具调用一起发送。
  • 3作用域复习:local 只在当前项目里给你用;project 通过 .mcp.json 共享给整个仓库;user 装到你的所有项目。添加时用 -s 或 --scope 指定。
  • 4删除服务器:claude mcp remove name——project 作用域的话,把 .mcp.json 的改动提交上去,队友那边也会同步移除。

用 -e 传入的值会以明文存在配置文件里。API 支持的话尽量用权限收窄的密钥,绝对不要把真实凭据提交进 project 作用域的 .mcp.json。

/mcp 显示 failed 怎么办

Claude Code 上的 MCP 故障大多逃不出这几个根源。删掉重装之前,先按这份清单过一遍。

  • 1Windows 上报 Unknown option -y:某些终端吃不消 npm 的这个参数。改在 PowerShell 或命令提示符里运行添加命令;或者先去掉 -y 添加成功,再手动把 -y 补回 .mcp.json 的 args 数组。
  • 2原生 Windows stdio 失败:给命令加 cmd /c 前缀——例如 cmd /c npx -y @some/package@latest。不套 WSL 时这步必不可少,@latest 标签还能避免用到过期的缓存构建。
  • 3状态显示 failed:打开 /mcp 点重连——偶发故障第二次基本就通了。还不行的话,面板会显示服务器日志的位置,去看真正的报错。
  • 4另一个项目里看不到服务器:这是作用域在正常工作。project 作用域的服务器只存在于那个仓库的 .mcp.json 里;想全局安装就切到 user 作用域。
  • 5服务器连上了却从不被调用:在提示词里点名——用 context7 查文档——或者加一条 CLAUDE.md 记忆,因为不明确说的话,模型总是顺手用熟悉的内置工具。

都不奏效时的终极大法:claude mcp remove name,重启终端,再用你验证过能跑通的传输方式重新添加——远程 HTTP 版本最省心。

Claude Code MCP 常见问题

相关 Claude Code 教程