vibecheck0.3.0

How it works

The packages that make up VibeCheck, and when you need each one.

VibeCheck is a small pipeline of focused packages. You rarely need all of them at once.

The VibeCheck round-trip pipelineBrowser collectors feed the VibeCheckEngine, which the beacon POSTs to the MCP server on localhost:4200; the AI agent reads the detected issues and proposes the fix.BROWSERCollectorssample the pageENGINEVibeCheckEnginesnapshot · 500msBEACONPOST /api/snapshotevery 2sMCP SERVERlocalhost:4200holds VibeStoreAI AGENTget_detected_issuesreads the evidenceFIXproposes the diffyou review & ship
The VibeCheck round-trip pipelineBrowser collectors feed the VibeCheckEngine, which the beacon POSTs to the MCP server on localhost:4200; the AI agent reads the detected issues and proposes the fix.BROWSERCollectorssample the pageENGINEVibeCheckEnginesnapshot · 500msBEACONPOST /api/snapshotevery 2sMCP SERVERlocalhost:4200holds VibeStoreAI AGENTget_detected_issuesreads the evidenceFIXproposes the diffyou review & ship
The loop that was missing from vibe coding: the browser measures, the beacon ships it, your agent reads the evidence — and proposes the fix.

The packages

PackageWhat it doesWhen you need it
@wcgw/vibe-check-coreFramework-agnostic engine: collectors + detectors. Zero runtime deps.Always — it's the measurement layer.
@wcgw/vibe-checkReact overlay widget (<VibeCheck />, <PerfToggle />) + hooks.React / Next apps that want the visual panel.
@wcgw/vibe-check-mcpShared local hub + per-client MCP bridge exposing nine tools.When you want your AI agent to read or receive project issues.

The dependency chain

core  (zero deps)
  → react  (depends on core)
    → your app

mcp  (standalone — receives snapshots over HTTP)

The MCP package does not import core. It receives snapshots over HTTP and mirrors core's VibeSnapshot shape, so the browser and the agent stay decoupled.

What runs where

  • In the browser: collectors measure the page; detectors analyze snapshots; the engine orchestrates them and (optionally) beacons snapshots out.
  • On your machine: the MCP server holds the latest snapshot in an immutable store and answers your agent's tool calls.

Continue with the Quickstart, or dig into Concepts.

Quickstart

Go from an unconfigured React app to a real widget-to-agent issue dispatch.

Architecture

How core, react, mcp, and the protocol package fit into one pipeline.

On this page

The packagesThe dependency chainWhat runs where