剧作家ui mcp
](https://www.npmjs.com/package/playwright-ui-mcp) ](https://nodejs.org)
一个轻量级的MCP（模型上下文协议）服务器，用于使用Playwright进行浏览器UI捕获和分析。专为与Claude配合使用而设计，可实现可视化UI检查、屏幕截图和浏览器自动化。
特性
- 头部浏览器 -始终可见，而非无头，用于真正的UI分析
- 默认情况下为轻量级 -除非明确启用，否则无法录制视频
- 屏幕截图 -返回base64图像供Claude分析
- 视频记录 -可选，仅在需要时启用
- 自动清理 -浏览器关闭时删除所有截图/视频
- 交互元素 -使用选择器获取可点击元素
安装
自动安装（推荐）
在项目中作为依赖项安装。配置(.mcp.json)是自动创建的。
npm install playwright-ui-mcp快速安装（无需安装）
如果您只想配置当前目录而不添加依赖关系：
npx playwright-ui-mcp-install手动配置
创建 .mcp.json 在项目根目录中：
{
"mcpServers": {
"playwright-ui": {
"command": "npx",
"args": ["-y", "playwright-ui-mcp"]
}
}
}然后重新启动Claude Code或运行 /mcp 加载服务器。
可用工具
| 工具 | 说明 |
|---|---|
browser_launch | 启动头部浏览器。选项： width, height, slowMo, recordVideo |
browser_new_page | 创建新选项卡 |
browser_navigate | 导航到URL |
browser_screenshot | 截图（返回base64图像进行分析） |
browser_get_visible_elements | 使用选择器获取交互式元素 |
browser_get_content | 获取页面HTML和文本 |
browser_click | 单击元素 |
browser_type | 在输入框中键入 |
browser_wait_for | 等待元素出现 |
browser_evaluate | 在页面中运行JavaScript |
browser_close_page | 关闭特定选项卡 |
browser_close | 关闭浏览器并清除所有捕获 |
browser_status | 获取会话信息 |
使用示例
基本UI检查
问克劳德：
“打开浏览器，转到https://example.com，并描述你所看到的”
克劳德将：
- 启动浏览器
- 导航到URL
- 截图
- 直观地分析UI
- 关闭浏览器（自动清理）
表单交互
“转到登录页面，填写用户名”test@example.com'和密码'secret'，然后单击提交“
带视频录制（重模式）
“在结账流程中导航时录制视频”
克劳德将使用 recordVideo: true 发射时。
轻量化与重量化模式
| 模式 | 视频 | slowMo | 用例 |
|---|---|---|---|
| 默认值（灯光） | 关闭 | 无 | 快速UI检查 |
| 重的 | 关于 | 100-200ms | 调试、演示 |
// Lightweight (default)
browser_launch()
// Heavy mode for debugging
browser_launch({ recordVideo: true, slowMo: 150 })清理
所有临时文件（截图、视频） 自动删除 当 browser_close 被称为。无需手动清理。
卸载
从项目中删除：
npx playwright-ui-mcp-install uninstall需求
- Node.js>=18.0.0
- Chromium浏览器（首次运行时通过Playwright自动安装）
许可证
麻省理工学院