Vibe Playwright MCP Agent

Vibe剧作家+MCP代理（无限循环）

在Ubuntu 22.04上 Playwright E2E+MCP工具+无限循环代理一次。

1）安装

cd vibe-playwright-mcp-agent
npm i
npm run prepare    # playwright deps

2）构建

npm run build

3）运行MCP服务器（可选）

npm run mcp:server   # tools: qa.run_playwright, crawl.visit

在Claude Desktop等MCP客户端注册此服务器后，可以使用工具调用E2E和CROL。

4）无限循环代理

export LLM_CMD="claude code"       # 너의 LLM CLI
export REPO="$PWD"                 # 작업 리포
export VERIFY="npm run -s test:e2e" # QA 게이트
export CRAWL_URL="https://example.com" # (선택) QA 성공 시 크롤

./src/agent/agent.sh               # 큐(tasks.txt) 소진 후에도 대기하며 반복
# 일시정지: touch agent.pause / 재개: rm agent.pause
# 정지:     touch agent.stop

5） 剧作家

• 设置： playwright.config.ts
• 示例测试： tests/example.spec.ts

6）抓取机

npm run crawl:run                 # env START_URL / MAX_PAGES / DELAY_MS 로 제어

7）任务队列

tasks.txt如果在每行中写入goal，agent将按顺序处理。

备忘录

• 运营时，通过systemd--user将agent.sh服务化，可以实现24/7。
• 安全性：阻止agent.sh中的allowlist筛选器中的危险命令。

🚀 快速开始

1） 初始设置

# Clone or navigate to project directory
cd vibe-playwright-mcp-agent

# Run automated setup
./setup.sh

# Copy and configure environment
cp .env.example .env
# Edit .env to configure your LLM_CMD

2） 实时监控选项

选项A：多功能仪表板

./monitor.sh dashboard    # Requires tmux (recommended)

选项B：单个组件

# Terminal 1: Start agent with logging
./monitor.sh agent

# Terminal 2: Monitor all logs in real-time
./monitor.sh tail

# Terminal 3: Monitor only LLM communication
./monitor.sh tail-llm

选项C：手动设置

# Terminal 1: Agent
export LLM_CMD="claude code"
export ENABLE_LOGGING=true
./src/agent/agent.sh

# Terminal 2: Real-time monitoring
tail -f logs/agent.log logs/llm.log logs/communication.log

📊 监控和日志

日志文件

• logs/agent.log -代理生命周期和决策
• logs/llm.log -LLM请求/响应定时
• logs/communication.log -全LLM输入/输出（截断）
• logs/mcp.log -MCP服务器活动

实时命令

./monitor.sh help         # Show all commands
./monitor.sh tail         # Follow all logs
./monitor.sh tail-agent   # Follow agent only
./monitor.sh tail-llm     # Follow LLM only
./monitor.sh dashboard    # Live dashboard (tmux)
./monitor.sh stop         # Stop all processes
./monitor.sh clean        # Clean all logs

环境变量

# LLM Configuration
LLM_CMD="claude code"              # Your LLM command
LLM_CMD="ollama run llama2"        # Alternative: Ollama
LLM_CMD="python llm_wrapper.py"   # Alternative: Custom wrapper

# Monitoring
ENABLE_LOGGING=true                # Enable file logging
LOG_LEVEL=info                     # Log level
REAL_TIME_MONITORING=true          # Enable real-time output

# Agent Behavior
MAX_LOOPS=5                        # Max retry attempts
COOLDOWN=5                         # Seconds between retries
VERIFY="npm run -s test:e2e"       # QA gate command

🎭 LLM通信流程

代理与LLM的通信分为3个阶段：

1.规划阶段

INPUT: Goal + Repository context + Constraints
OUTPUT: JSON with step-by-step plan

2.行动阶段

INPUT: Step details + Files to edit
OUTPUT: Unified diff patches + Commands to run

3.反射阶段（如果失败）

INPUT: Failure logs + Goal + Constraints
OUTPUT: Corrected patches + Commands

监控LLM通信

# See LLM timing and status
tail -f logs/llm.log

# See actual input/output content
tail -f logs/communication.log

# Full dashboard view
./monitor.sh dashboard

故障射击

• 运行MCP服务器时 server.tool is not a function 错误→ npm run build 执行
• Playwright浏览器安装失败→手动 npx playwright install 执行
• 日志未显示→ Check ENABLE_LOGGING=true 在.env中
• 代理挂→ 检查LLM_CMD是否正常工作： echo "test" | $LLM_CMD