@reticlehq/core
v1.3.1
Published
One-install Reticle: the dev-only SDK (browser + React adapter) and the spec runner under one package, with subpaths for the source-mapping plugins and the MCP server.
Readme
Reticle
Your AI writes the code. Reticle tells it whether the code actually works — with evidence, not screenshots.
TypeScript · Model Context Protocol · React-first · dev-only · localhost-only · open-core (Apache-2.0 SDK + FSL server)
Docs & full README · Getting Started · Why it's ~73× cheaper
The problem: your agent has hands, but no eyes
You ask your AI agent to build a feature. It edits the files, says "done ✅" — and then you open the browser, click around, and find out it isn't. Every. Single. Time. The agent can't really check its own work, so you become its QA department. Screenshots are bad eyes: ~1,500+ tokens through a vision model, slow, non-deterministic, and blind to everything non-visual — the failed request, the console error, the route that didn't change, the webhook that never came.
The idea: your app already knows what happened — let the agent ask
Reticle exposes your running app to your agent over MCP as a tight loop — look → act → observe → assert — and one call checks many things at once and comes back with proof:
// The agent clicked "Pay". Did the right things actually happen? One call, ~33 tokens, no screenshot:
reticle_assert({
predicate: { allOf: [
{ kind: "net", method: "POST", urlContains: "/api/order", status: 200 },
{ kind: "element", query: { role: "dialog", name: "Order confirmed" }, state: "visible" },
{ kind: "signal", name: "order:saved" }, // the charge actually committed
{ kind: "console", level: "error", absent: true } // ...and nothing errored
]}
})
// → { pass: false, evidence: { net: { status: 500, url: "/api/order" } },
// failureReason: "POST /api/order returned 500, expected 200",
// source: { file: "src/checkout/PayButton.tsx", line: 42 } } ❌ caught before you ever saw itDeterministic (structured events, not pixels), cheap (any model, no vision), and it points at the file:line to fix.
Quickstart
One install — SDK, React adapter, source-mapping plugins, spec runner, and the MCP server all ship in a single package:
npm i -D @reticlehq/core1. Point your agent at the MCP server (Claude Code .mcp.json, Cursor, Windsurf, …):
{ "mcpServers": { "reticle": { "command": "npx", "args": ["@reticlehq/core"] } } }2. Embed the SDK in your app (dev only):
import { reticle } from '@reticlehq/core';
if (import.meta.env.DEV) reticle.connect({ session: 'my-app' });Run your app and ask your agent: "add a logout button and verify it works with Reticle." → Full Getting Started walkthrough.
What it can verify
API calls (net) · DOM changes · SPA navigation · console & errors (incl. "no errors") · animations · app signals (webhooks, store commits, async jobs you surface via reticle.signal()) · regressions (baseline now, diff later) · source mapping (DOM → React component → file:line). Plus an autonomous crawler. ~44 MCP tools in total.
~73× fewer tokens than feeding the agent the whole page
| | Tokens per step | | ------------------------------------------------------ | --------------: | | Full accessibility-tree snapshot (e.g. Playwright MCP) | ~7,300 | | Reticle verify loop (query + observe + assert) | ~100 |
The honest version: force Reticle to dump the whole tree too and the gap is only ~1.8×. The 73× comes from not needing the whole tree — that's architectural. Full methodology + caveats →
Benchmarked two ways — a toy app and a real one — both published
On a real production app (the Reticle dashboard — React 19, auth, live data), Reticle observed the authenticated app for 1,023 tokens vs Chrome DevTools MCP 1,357 vs Playwright MCP 2,193 (2.1× leaner) — and was the only tool that could assert login actually succeeded from the app's own signal (46 tok, un-fakeable) and read program state the DOM never shows. On the first uninstrumented pass it even caught two live 500s the page completely hid (a missing DB migration). Full honest breakdown, including where Reticle loses (true pixels, sites you don't own): docs/benchmarks.md.
How is this different?
Everyone now gives agents eyes; Reticle gives agents a verdict. Playwright/Cypress are scripted CI tests you write and maintain. Playwright MCP / Chrome DevTools MCP let an agent drive a separate browser (token-heavy snapshots, no first-class assert/regression/source-map). Reticle runs inside your real running app (your session/auth), returns a verdict-with-evidence in ~100 tokens, sees what screenshots can't, catches silent regressions, and points at the file to fix. They compose: drive with Playwright MCP, verify with Reticle.
dev-only and localhost-only by default · no telemetry · tree-shaken out of production · open-core (Apache-2.0 SDK + FSL server)
