2.7 在 Claude Code 中使用 MCP 服务
你可以通过添加 MCP（Model Context Protocol，模型上下文协议）服务器来扩展 Claude Code 的能力。这些服务器可在远程或本机运行，为 Claude 提供其原本不具备的新工具与能力。
最受欢迎的 MCP 服务器之一是 Playwright，它让 Claude 能控制网页浏览器，为 Web 开发工作流打开强大可能性。
安装 Playwright MCP 服务器
要将 Playwright 服务器添加到 Claude Code，请在终端（不是在 Claude Code 内）运行：
claude mcp add playwright npx @playwright/mcp@latest
该命令完成两件事：
1.将 MCP 服务器命名为“playwright”。
2.提供在本机启动该服务器的命令。
管理权限
首次使用 MCP 服务器工具时，Claude 每次都会请求权限。如果你不想反复确认，可以在设置中预先批准该服务器。
打开 .claude/settings.local.json 文件，并在 allow 数组中加入该服务器：
{
“permissions”: {
“allow”: [“mcp__playwright”],
“deny”: []
}
}
注意 mcp__playwright 中的双下划线。这样 Claude 就能在每次使用 Playwright 工具时无需再询问权限。
实例：改进组件生成
以下是 Playwright MCP 服务器如何改进开发工作流的真实示例。无需手动反复测试与微调提示词，你可以让 Claude：
1.打开浏览器并访问你的应用。
2.生成一个测试组件。
3.分析其视觉样式与代码质量。
4.根据观察结果更新生成提示。
5.使用新组件测试改进后的提示。
例如，你可以让 Claude 执行：
访问 localhost:3000，生成一个基础组件，审查样式，并更新 @src/lib/prompts/generation.tsx 中的生成提示，以便今后生成更好的组件。
Claude 会使用浏览器工具与应用交互，检查生成结果，然后修改提示文件，以鼓励更有创意的设计。
效果与收益
实践中，这种方式能带来显著更好的结果。相比通用的紫到蓝渐变与标准 Tailwind 模式，Claude 可能将提示更新为鼓励：
1.温暖的日落渐变（橙→粉→紫）。
2.海洋深度主题（青→祖母绿→青色）。
3.不对称设计与重叠元素。
4.更具创意的留白与非常规布局。
关键优势在于 Claude 能看到实际的视觉输出，而不仅是代码，从而能更明智地做出样式改进决策。
探索其他 MCP 服务器
Playwright 只是 MCP 服务器能力的一个例子。生态中还包括适用于以下场景的服务器：
1.数据库交互
2.API 测试与监控
3.文件系统操作
4.云服务集成
5.开发工具自动化
考虑探索与你的具体开发需求相匹配的 MCP 服务器。它们可将 Claude 从代码助手提升为能与整个工具链交互的全能开发伙伴。
