AI导哈

浏览器会话记录工具

MCP服务器为AI助手提供浏览器会话记录功能，可录制并分享包含视频、控制台日志、网络请求和操作时间线的错误报告。

  • by kosbay
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 kosbay/vibecheck-mcp

使用说明

@vibecheck mcp/mcp

MCP服务器 VibeCheck --将人工智能助手（Claude Code、Claude Desktop、Cursor、Windsurf、VS Code）连接到您的错误报告，并让他们 记录自己的浏览器会话 如可共享的错误报告。

📖 完整指南——功能、安装、用例→ DOCS.md

🎬 记录浏览器会话（新）

用简单的英语给你的AI代理一个任务——它在你的机器上驱动一个真正的浏览器，而VibeCheck记录所有内容，然后返回一个可共享的链接：

You:   Go to staging.myapp.com/cart, add a product and check the total
       updates. Record it and send me the link.

Agent: ⏺ Opening browser — recording started
       ⏺ Clicked: Add to cart
       ⏺ Validated: total updated to $42.00 ✓

       Recording uploaded to VibeCheck.
       Shareable link: https://app.vibecheck-qa.com/tracks/1783…

该链接打开一个完整的错误报告： 视频 在会议期间， 控制台日志, 网络请求 （带响应体），并标有 行动时间表 --全部同步。任何人都可以观看，无需账号。

  • 内部没有AI --你的助手会进行推理和点击；此服务器是一个录制浏览器加上传器。没有额外的LLM费用。
  • 本地浏览器 --反对 localhost 仅用于开发服务器和VPN。自动使用您安装的Chrome/Edge（新的隔离配置文件）；如果两者都不存在，则自动下载浏览器。
  • 11工具 — browser_navigate, browser_snapshot, browser_click, browser_type, browser_press_key, browser_select_option, browser_hover, browser_scroll, browser_screenshot, browser_wait_for, browser_finish （上传+返回链接）。

非常适合：“去验证此页面”，从现有报告中复制错误，在PR之前证明修复，冒烟测试部署。

安装

需求

  • Node.js 18+
  • 浏览器 --如果你有谷歌Chrome或微软Edge（自动检测），则无需安装任何东西。否则，第一次运行时会自动下载一个（或预下载： npx playwright install chromium)
  • 一个VibeCheck API密钥 （仅记录——下面的读取工具不需要钥匙）：
    1. 登录地址： App.vibecheck-quer.com
    2. 打开 API密钥 页面(app.vibecheck-qa.com/api-keys) → 生成密钥
    3. 该对话框为您提供了一个现成的设置：一个复制粘贴Claude Code命令，其中已经包含您的密钥，再加上一次单击 添加到光标 / 添加到VS代码 按钮——使用这些按钮，跳过下面的手动配置

克劳德代码

claude mcp add vibecheck \
  -e VIBECHECK_API_KEY=vck_your_key_here \
  -- npx -y @vibecheck-mcp/mcp

克劳德桌面版

添加到 claude_desktop_config.json （macOS： ~/Library/Application Support/Claude/，Windows： %APPDATA%\Claude\)，然后重新启动Claude Desktop：

{
  "mcpServers": {
    "vibecheck": {
      "command": "npx",
      "args": ["-y", "@vibecheck-mcp/mcp"],
      "env": { "VIBECHECK_API_KEY": "vck_your_key_here" }
    }
  }
}

光标

将同一块添加到 .cursor/mcp.json （或使用一键 添加到光标 VibeCheck的API密钥页面上的按钮）：

{
  "mcpServers": {
    "vibecheck": {
      "command": "npx",
      "args": ["-y", "@vibecheck-mcp/mcp"],
      "env": { "VIBECHECK_API_KEY": "vck_your_key_here" }
    }
  }
}

帆板运动

添加相同内容 mcpServers 阻止到 ~/.codeium/windsurf/mcp_config.json.

VS Code

添加到 .vscode/mcp.json （注意，关键是 servers):

{
  "servers": {
    "vibecheck": {
      "command": "npx",
      "args": ["-y", "@vibecheck-mcp/mcp"],
      "env": { "VIBECHECK_API_KEY": "vck_your_key_here" }
    }
  }
}

验证它是否正常工作

打开A 新 在AI工具中创建会话并粘贴：

Go to https://example.com, then finish the recording titled "Setup test"
and give me the link.

浏览器窗口打开，代理在大约15秒内回复 .../tracks/... 链接。如果视频播放，你就准备好了。 🎉

环境变量

变量 必填 描述
VIBECHECK_API_KEY 用于录制 个人API密钥(vck_...)从API密钥页
VIBECHECK_API_URL 否 覆盖平台URL（默认 https://app.vibecheck-qa.com)
VIBECHECK_HEADLESS 否 设置 1 隐藏浏览器窗口（CI）
VIBECHECK_NO_CONDENSE 否 设置 1 上传全长视频而不是压缩视频

可观看视频

录音显示 移动到每个元素的光标 代理与 点击波纹和a 标题 描述每个动作(Click — Place order button)，所以任何观看视频的人都可以了解发生了什么。

如果 ffmpeg 已安装(brew install ffmpeg / apt install ffmpeg)，在上传之前，动作之间的空闲“代理思考时间”会自动缩短——5分钟的会话通常会缩短到1分钟以下，控制台/网络/动作时间线会重新同步到较短的视频中。如果没有ffmpeg，全长视频将按原样上传。

🔍 分析错误报告

粘贴一个VibeCheck跟踪URL，您的AI将进入完整的调试上下文-不需要API密钥：

工具 描述 图像？
get_track 完整的错误报告——控制台日志、网络、用户操作、生命体征 是（截图）
analyze_track_errors 重点错误分析——控制台错误+失败的网络请求 是（截图）
get_track_network 网络深度挖掘——失败的请求、缓慢的请求、汇总表 否
get_track_performance 绩效报告——网络生命体征、导航时间、评估 否
get_track_actions 用户操作时间线+自动生成的重现步骤 否

get_track

获取并格式化完整的VibeCheck错误报告。

参数：

  • url_or_id （必填）--跟踪URL或ID
  • include （可选）——章节包括： logs, network, actions, vitals, all

analyze_track_errors

只关注错误视图——带有堆栈跟踪的控制台错误和带有响应体的失败网络请求。

参数：

  • url_or_id （必填）--跟踪URL或ID

get_track_network

通过失败/慢速请求检测对网络请求进行深入分析。

参数：

  • url_or_id （必填）--跟踪URL或ID
  • slow_threshold_ms （可选，默认值：1000）--标记慢速请求的阈值（毫秒）
  • status_filter （可选，默认值： all)--筛选器： all, errors, success

get_track_performance

提供评级和优化建议的网络生命体征分析。

参数：

  • url_or_id （必填）--跟踪URL或ID

get_track_actions

用户操作时间线，带有自动生成的步骤进行再现。

参数：

  • url_or_id （必填）--跟踪URL或ID
  • action_types （可选）--按类型筛选： click, input, scroll, navigation等等。

屏幕截图支持

对于 截图 轨道， get_track 和 analyze_track_errors 使用MCP返回屏幕截图图像和文本报告 ImageContent 类型。视频轨道仅返回文本数据（不获取视频）。

发展

git clone https://github.com/kosbay/vibecheck-mcp.git
cd vibecheck-mcp
npm install
npm run build
npm start

许可证

麻省理工学院

相关 MCP