Introduction

VibeCheck is a browser performance instrument for the AI-built frontend. AI agents ship code that passes review and looks fine in the happy path — then leaks memory across route changes, bloats the DOM, fires the same request eight times, janks on scroll, shifts layout as things load, and quietly fails Core Web Vitals and SEO. Nobody is watching, because the person who "wrote" it was an agent and the human never opened DevTools.

VibeCheck is the observer that was missing. It runs in the corner of your app, catches the problem, and hands the evidence straight to your coding agent in the agent's own language — the Model Context Protocol (MCP).

The pipeline

Browser (core collectors)
  → VibeCheckEngine
    → BeaconClient  (POST /api/snapshot)
      → MCP server  (localhost:4200)
        → VibeStore  (immutable state)
          → MCP tools  (your AI agent reads)

Three packages form the pipeline:

• @wcgw/vibe-check-core — collects metrics in the browser (FPS, long frames, memory, web vitals, resources, console) and runs the detectors. Zero runtime dependencies.
• @wcgw/vibe-check — the React overlay widget (<VibeCheck />, <PerfToggle />) plus hooks.
• @wcgw/vibe-check-mcp — the MCP server that receives snapshots over HTTP and exposes them to AI agents through six MCP tools.

Next steps