剧作家MCP示例库
 
剧作家MCP（模型上下文协议） 使用Claude Code中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。
📋 目次
概要
在动态输入提示中Playwright MCP来修改标记元素的显示属性Claude Code中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。
Playwright MCP什么是？
- 官方支持: Microsoft Playwright官方团队维护
- 结构化方法：使用辅助功能树，无需屏幕快照
- 22个工具：导航、屏幕快照、元素操作、JavaScript执行等
- 高速・軽量：不需要视觉模型的决定性行为
三种设置方法
｜方式｜推荐度｜设置时间｜推荐案例｜ |------|--------|-----------------|----------| | npx版 | ⭐⭐⭐⭐⭐ | 5分钟｜个人开发、团队开发、DevContainer | | ** | ⭐⭐⭐⭐ | 5分钟（第一次）｜多项目共享｜ | ** |⭐⭐⭐⭐⭐ | 中程度|本番环境、CI/CD |
快速启动
方法1：npx版本（最简单、推荐）
模式A: DevContainer使用（如果没有Node.js环境）
# 1. このディレクトリに移動
cd npx-setup
# 2. VSCodeで開く
code .
# 3. 「コンテナーで再度開く」をクリック
# または Cmd/Ctrl+Shift+P → "Dev Containers: Reopen in Container"
# 4. 自動的にNode.js環境とChromiumがインストールされます（初回のみ約1分）
# 5. VSCodeをリロード（Cmd/Ctrl+Shift+P → "Developer: Reload Window"）
# 6. Claude Codeで試す
# "Playwright MCPを使用して、https://example.com を開いてページタイトルを取得してください"所要时间：约5分（初回）、约30秒（2回目以降）
模式B: 使用本地环境（如果有Node.js v20+）
# 1. このディレクトリに移動
cd npx-setup
# 2. Chromiumをインストール
npx playwright install chromium
# 3. VSCodeを開く
code .
# 4. VSCodeをリロード（Cmd/Ctrl+Shift+P → "Developer: Reload Window"）
# 5. Claude Codeで試す
# "Playwright MCPを使用して、https://example.com を開いてページタイトルを取得してください"所要时间：约5分
方法2：Docker Compose版本（面向多个项目）
# 1. このディレクトリに移動
cd docker-compose-setup
# 2. Docker Composeで起動
docker compose up -d
# 3. VSCodeを開く
code .
# 4. VSCodeをリロード
# 5. Claude Codeで試す所要时间：约5分（初回）、约10秒（2回目以降）
方法3: Docker直接実行版（本番/CI/CD向け）
# 1. このディレクトリに移動
cd docker-direct-setup
# 2. VSCodeを開く
code .
# 3. VSCodeをリロード
# 4. Claude Codeで試す
# 初回は自動的にDockerイメージがダウンロードされます各方式的详细内容
📁 npx设置/
特徴:
- ✅ 无需安装（通过npx运行）
- ✅ 快速稳定（\<1秒启动）
- ✅ 1个配置文件（
.mcp.json仅限） - ✅ 易于团队共享
- ✅ DevContainer対応（Node.js环境不要）
包含的文件：
.mcp.json- MCP设置（已验证）.devcontainer/- DevContainer设置（Node.js自动设置）README.md-高级设置指南
🐳
特徴:
- ✅ 可在多个项目中共享
- ✅ 驻留（启动后快速）
- ✅ 环境完全分离
- ✅ Docker Compose管理
包含的文件：
compose.yml- Docker Compose设定.mcp.json- MCP设定README.md-高级设置指南
🔒
特徴:
- ✅ 最安全（每个会话独立）
- ✅ 资源高效（仅在使用时启动）
- ✅ 始终使用最新映像
- ✅ 公式推荐的方式
包含的文件：
.mcp.json- MCP设定（Docker直接実行）README.md-高级设置指南
比较表
基本情报
| 项目 | npx版 | Docker Compose版 | Docker直接実行版 |
|---|---|---|---|
| Node.js必须 | ✅ | ❌ | ❌ |
| Docker必须 | ❌ | ✅ | ✅ |
｜设置时间｜5分钟｜5分钟（第一次）、10秒（第二次以后）｜中等｜ ｜磁盘使用量｜约300MB | 约1GB | 约1GB | ｜内存消耗｜低｜中高（常驻）｜低（仅限使用时）｜
性能（实测值）
| 操作 | npx版 | Docker Compose版 |
|---|
浏览器启动｜1-2秒｜1-2秒｜ | example.com 访问量｜\<1秒｜27-94秒（偏差）｜ 屏幕快照（\<1秒｜\<1秒｜
建议案例
｜用例｜推荐方式｜ |------------|---------| ｜个人开发（单一项目）｜ npx版 ⭐⭐⭐⭐⭐ | 团队开发 npx版 ⭐⭐⭐⭐⭐ | ｜多项目共享｜ Docker Compose版 ⭐⭐⭐⭐ | |本番环境| Docker直接実行版 ⭐⭐⭐⭐⭐ | |CI/CD| Docker直接実行版 ⭐⭐⭐⭐⭐ | | DevContainer环境| npx版 ⭐⭐⭐⭐⭐ |
故障排除
常见问题
问题1:配置文件锁定错误（npx版）
错误消息：
Error: Browser is already in use for /home/node/.cache/ms-playwright/mcp-chrome-*解决策：
.mcp.json的--isolated确认是否包含标志- VSCode重新加载
- 根据需要删除锁定文件：
rm -rf ~/.cache/ms-playwright/mcp-chrome-*问题2：MCP未检测到服务器
解决策：
.mcp.json的语法（使用JSON验证器）- 确保文件位于项目根目录中
- VSCode重新加载（Cmd/Ctrl+Shift+P→“Developer:Reload Window”）
- Claude Code的，之Output在面板中检查错误日志
问题3：Chromium无法启动（npx版）
解决策：
npx playwright install chromium问题4：Docker容器无法启动（Docker Compose版）
解决策：
# コンテナの状態を確認
docker compose ps
# ログを確認
docker compose logs playwright-mcp
# 再起動
docker compose restart更多帮助
22个可用工具
验证的工具
- ✅
browser_navigate-页面过渡 - ✅
browser_snapshot-页面结构检索 - ✅
browser_take_screenshot-截图 - ✅
browser_console_messages-获取控制台日志 - ✅
browser_evaluate- JavaScript実行 - ✅
browser_install-浏览器安装
其他工具
要素操作: browser_click, browser_type, browser_fill_form, browser_hover, browser_drag, browser_select_option, browser_press_key
高级功能： browser_tabs, browser_navigate_back, browser_handle_dialog, browser_file_upload, browser_wait_for, browser_resize, browser_close, browser_run_code, browser_network_requests
使用例
基本页面访问
Playwright MCPを使用して、https://example.com を開いてページタイトルを取得してください获取屏幕快照
https://playwright.dev を開いて、スクリーンショットを "screenshot.png" として保存してください查找和检索元素
https://github.com を開いて、メインの見出しテキストを取得してくださいJavaScript実行
https://example.com を開いて、JavaScriptでページの背景色を赤に変更してください版本信息
- 剧作家 MCP: v0.0.47（2025-11-14公开）
- 検证环境：Node.js v20.19.5，Docker v28.0.2
- 検证日: 2025-11-17〜18
参考链接
许可证
这个样本存储库MIT在许可证下公开。
Playwright MCP啊Apache-2.0许可证是。
貢献
我们欢迎臭虫报告和改进建议。Issue中所述修改相应参数的值。
______________________________________________________________________
最终更新: 2025-11-19 作成者：克劳德代码 已验证: ✅ 所有安装方法均已确认工作正常