Agent Recording

Let AI coding agents like Claude Code drive a real browser while VibeCheck records everything — video, console, network, and actions — and returns a shareable bug report link.

Overview

Agent Recording makes VibeCheck agent-friendly. You give your AI coding assistant a task in plain English — "go to this page, click this and that, and check the result" — and the VibeCheck MCP server opens a real browser on your machine. The agent performs the steps while VibeCheck records the entire session. When it finishes, you get a normal VibeCheck track link you can share with anyone:

Video of everything the agent did
Console logs, including JS errors
Network requests, with response bodies for API calls
A labeled action timeline ("Clicked: Login button") synced to the video

No AI runs inside VibeCheck — your assistant does the thinking and clicking, VibeCheck is the recorded browser. You pay nothing extra beyond your existing AI tool.

How it works

You: "Go to staging.myapp.com/cart and validate the total is $42.
      Record it and give me the link."
        │
        ▼
Claude Code / Cursor ──▶ opens a local Chromium window (visible)
        │                 • navigates, clicks, types — every step recorded
        ▼
browser_finish ──▶ uploads to VibeCheck ──▶ shareable link:
                   https://app.vibecheck-qa.com/tracks/1783...

Because the browser runs locally, the agent can test anything you can reach — including localhost dev servers and staging environments behind a VPN.

Setup

1. Install the browser

The recording tools use Playwright's Chromium (a one-time install):

npx playwright install chromium

2. Generate an API key

Recordings are uploaded to your VibeCheck account, so the MCP server needs a personal API key:

Sign in at app.vibecheck-qa.com
Open Settings → API Keys
Click Generate key and copy the vck_... value — it is shown only once

Keys can be revoked anytime from the same page. You can have up to 5 active keys (e.g. one per machine).

3. Add the MCP server with your key

Claude Code

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

Claude Desktop / Cursor / Windsurf

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

VS Code

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

If you only use the read-only MCP tools (analyzing existing tracks), no API key is needed.

Usage

Start a session in your AI tool and describe the task naturally. End with "finish the recording and give me the link" so the agent knows to upload:

Go to https://staging.myapp.com/pricing, verify the Pro plan
shows $29/month, then finish the recording and give me the link.

The agent opens a Chromium window (you can watch it work), performs the steps, and replies with something like:

Recording uploaded to VibeCheck.
Shareable link: https://app.vibecheck-qa.com/tracks/1783009013047-dc126eed
Duration: 12s · console errors: 0 · network errors: 0 · actions: 5

Open the link to watch the video with synced Console, Network, and Actions tabs — and share it with anyone, no account needed.

Example tasks

Validate something on a page

Open localhost:3000/checkout, add the first product to the cart,
and confirm the total updates. Record it and send me the link.

Reproduce a bug from an existing report

Here's a bug report: https://app.vibecheck-qa.com/tracks/abc123
Analyze it, then try to reproduce the same steps on localhost:3000
and record your attempt.

Prove a fix works

You just fixed the login redirect bug — now prove it. Go through
the login flow on localhost:3000 and attach the recording link
to the PR description.

Smoke-test after a deploy

We just deployed. Go through sign-in → dashboard → create project
on production and record it. Flag any console errors you see.

Throw a recording away

Actually, discard that recording — don't upload it.

The recording tools

Your AI assistant uses these automatically — you don't call them yourself:

Tool	What it does
`browser_navigate`	Opens a URL. The first call launches the browser and starts recording
`browser_snapshot`	Reads the page structure so the agent can find elements
`browser_click` / `browser_type` / `browser_press_key` / `browser_select_option` / `browser_hover` / `browser_scroll`	Page interactions — each becomes a labeled step on the track timeline
`browser_screenshot`	Visual check of the current page
`browser_wait_for`	Waits for text to appear/disappear or a fixed time
`browser_finish`	Closes the browser, uploads the recording, returns the shareable link

Good to know

Plan limits: agent recordings count toward your plan's monthly recordings (Free: 25/month), and the limit is checked before the browser opens.
Safe by default: the browser is a fresh, isolated profile — no cookies or logins from your daily browser. Nothing is uploaded until the agent calls browser_finish (and discard throws it away).
Failed upload ≠ lost recording: if the upload fails, the video is kept locally and the agent tells you the file path.
Sharing model: track links are public-by-URL (unguessable ID) — the same as extension-recorded tracks. Don't record pages showing secrets you wouldn't put in a bug report.
Headless mode: set VIBECHECK_HEADLESS=1 in the server's env to hide the browser window (useful in CI).

Requirements

Node.js 18 or later
Playwright Chromium (npx playwright install chromium)
A VibeCheck account with a personal API key
An AI tool that supports MCP (Claude Code, Claude Desktop, Cursor, Windsurf, VS Code)

MCP Server Blur Sensitive Data