A shared board for human and agent reasoning
Visual reasoning spaces work well for people and poorly for agents. A person can glance at a corkboard and understand a suspicious cluster, a directional relationship, or a provisional theory. A browser agent usually sees pixels, coordinates, and brittle labels. Moving the investigation into a chatbot would make it legible to the model, but discard the spatial interface that makes the reasoning useful to the person.
Conspiracy gives the person and the agent one living evidence board. People can pin, edit, drag, search, group, connect, discard, restore, and audit clues through a tactile noir interface. Compatible browser agents discover 22 typed WebMCP tools that operate on the same cases, cards, directional strings, semantic regions, trash, viewport, and undo boundary.
Why WebMCP is essential
WebMCP makes the visual workspace understandable as a semantic tool surface instead of a screenshot. Stable evidence IDs, typed directional relationships, strict schemas, provenance, and proposal status let an agent act on what the board means without guessing at screen coordinates.
People and agents can now collaborate on the same visible artifact: the person contributes spatial judgment and context, while the agent contributes structured inspection, search, synthesis, and traceable proposals. Every resulting change appears in the interface the person already understands.
The mystery is a playful demonstration of a broader pattern that can support research synthesis, incident review, threat modeling, debugging, reporting, and risk analysis.
Human judgment remains authoritative
Agent-created deductions are deliberately provisional. A proposed string records its direction, relationship type, rationale, confidence, and provenance, then appears visibly on the corkboard for review. The person can inspect why it was suggested, accept it, reject it, or undo it.
The resident WIRE detective can inspect, search, audit, and trace the case, then stage a proposed string or semantic group. It cannot edit source evidence, delete clues, accept its own deductions, or manage cases. If hosted inference is unavailable, a deterministic detective keeps the core experience usable.
Implementation
The React interface and WebMCP tools cross the same WebMCPActions boundary into one canonical local CaseLibrary. Cards, directional threads, semantic regions, freehand strokes, trash, and viewport state are persisted per case in browser local storage. Agent deductions always enter the model as proposed objects.
src/webmcp/registerTools.ts defines the shared 22-tool catalog. A stable delegating action facade keeps registered browser tool handles current while React refreshes its handlers. Strict enums, stable IDs, coordinate bounds, color validation, additionalProperties: false, destructive annotations, and untrusted-content hints constrain the surface.
WIRE executes seven allowlisted read/proposal operations through that catalog. Its same-origin server route adds request and output caps, rate limiting, timeouts, structured validation, store: false, and pseudonymous safety identifiers. Local attachment bytes, machine paths, and object URLs never enter model requests, exports, or WebMCP results.
AI and Codex
Codex was the primary build collaborator across implementation, debugging, regression tests, deployment hardening, QA, documentation, and demo editing. Agent-driven QA exposed stale tool handles, overlapping asynchronous registration, duplicate proposals, model prose getting ahead of successful tool calls, deployment-secret formatting, and mobile scrolling problems. Each issue was isolated, fixed, and preserved as a test or QA procedure.
Conspiracy also uses the OpenAI Responses API for WIRE. Claude- and Qwen-shaped tool sequences generated from a sanitized public contract were replayed through the registered execution layer to test schema clarity and multi-step flows; these were contract replays, not claims of direct browser integration.
The project produced significant learning. I have already begun applying WebMCP patterns to Android Hell and my Drabzin CAD editor, turning the experimental browser API into a professional skill I can bring to future products.
Try it
- Open the live app and choose Open a Case.
- Confirm WEBMCP BRIDGE LIVE and open the 22-tool workbench.
- Inspect or search the board, then ask WIRE to propose a useful connection.
- Review its rationale and use Accept, Reject, or Undo.
No account or credentials are required. The sample case and deterministic fallback provide the fastest judge path.
Live app: https://conspiracy.alirezaafshan.com/
Built With
- caddy
- cloudflare
- codex
- css
- docker
- openai-responses-api
- react
- svg
- typescript
- vinext
- vite
- vitest
- webmcp
