第十一节

MCP 服务器扩展

通过 MCP 服务器为 Claude Code 添加新工具和能力

你可以通过添加 MCP（Model Context Protocol）服务器来扩展 Claude Code 的能力。这些服务器可以在远程或本地机器上运行， 为 Claude 提供它原本不具备的新工具和功能。

什么是 MCP 服务器

MCP 服务器是扩展 Claude Code 功能的插件系统。最流行的 MCP 服务器之一是 Playwright，它赋予 Claude Code 控制浏览器的能力，为 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
用改进后的提示词测试新组件
示例提示词

"导航到 localhost:3000，生成一个基础组件，审查样式， 然后更新 @src/lib/prompts/generation.tsx 中的生成提示词， 以便将来能生成更好的组件。"

Claude 将使用浏览器工具与你的应用交互，检查生成的输出， 然后修改你的提示词文件以鼓励更原创和有创意的设计。

结果与优势

在实践中，这种方法可以带来显著更好的结果。与其使用通用的紫蓝渐变和标准 Tailwind 模式， Claude 可能会更新提示词以鼓励：

暖色夕阳渐变

橙色到粉色到紫色

海洋深度主题

青色到翠绿到青色

不对称设计

重叠元素的创意布局

创意间距

非常规的排版方式

核心优势：Claude 可以看到实际的视觉输出， 而不仅仅是代码，这使它能够对样式改进做出更明智的决策。

探索其他 MCP 服务器

Playwright 只是 MCP 服务器可能性的一个例子。生态系统包括用于以下功能的服务器：

数据库交互
API 测试和监控
文件系统操作
云服务集成
开发工具自动化
更多扩展...

考虑探索与你特定开发需求相符的 MCP 服务器。它们可以将 Claude 从一个代码助手 转变为一个全面的开发伙伴， 能够与你的整个工具链进行交互。