Problem

PocketRoar Mobile needed a direct cable connection from a Sony or other dedicated camera into an iPhone. The goal was to let the iPhone see the camera's live picture so it could monitor, record, and eventually stream it.

Sony cameras can send video using UVC, short for USB Video Class. UVC is the common language used by many USB webcams. Apple lets USB-C iPads expose those external cameras to apps, but does not document the same native camera-input path for iPhone. An iPad can already accept this kind of feed without a custom circuit board. The iPhone is the missing host.

The product benchmark is Accsoon SeeMo 4K. It accepts HDMI—the digital video signal sent by many cameras—compresses that video as H.264, a widely used format that makes video smaller, and sends it over USB to Accsoon's own iPhone app. PocketRoar needs the same basic outcome: translate a camera's output into a form that PocketRoar Mobile can receive on an iPhone. That translation needs dedicated electronics, so this could not be solved by an iPhone app alone.

That exposed a second problem. AI-generated circuit boards can look finished while still hiding missing requirements, unverified parts, incorrect physical pad layouts, old edits, or parts that cannot physically fit together. A clean picture or automated rule check does not prove a board is safe to manufacture. One missed detail can cause an expensive board spin, which means paying to manufacture another corrected version.

Solution

RoarCAD is a local-first circuit-board review and handoff system built to develop that iPhone capture bridge without hiding the remaining risk. Local-first means the project stays in the user's browser unless the user chooses to share it.

The workflow is like passing a save file to a teammate. One person shares a protected checkpoint. A teammate opens it without changing their own work, creates a separate copy, and continues with an AI agent. The first person can then compare the returned board with the version both people started from. Nothing is silently merged. The person must choose whether to adopt the returned board.

RoarCAD gives the AI four narrow WebMCP tools to draft, inspect, preview, and validate. The AI cannot apply its own proposal. Only the visible Approve & apply button can create a new saved version.

Plain-English Definitions

  • PCB (printed circuit board): the flat board that holds electronic parts and connects them with copper paths.
  • Agent: AI software that can reason about a task and call approved tools.
  • WebMCP: a browser standard that lets a web page offer named, structured tools to an AI. The AI receives exact data instead of guessing from pixels and mouse clicks.
  • Revision: one saved version of a project.
  • Immutable: unable to be secretly changed after it is saved. RoarCAD creates a new revision instead of rewriting an old one.
  • Checkpoint: a portable package containing one board revision and its history information. It works like a save point that can be handed to another person.
  • Read-only: viewable but not editable. Incoming checkpoints always start this way.
  • Fork: a separate working copy made from a checkpoint. Changes to the fork do not change the sender's project.
  • Common ancestor: the last revision that two copies share. It tells RoarCAD where the work split.
  • Semantic diff: a list of meaningful engineering changes, such as a moved component or changed connection, rather than a list of changed text characters.
  • Adopt: deliberately copy an incoming board snapshot into the local project as a new revision.
  • Provenance: the recorded history of where a revision came from.
  • Schema: a set of rules describing what valid data must contain and what type each value must be.
  • Hash: a short digital fingerprint calculated from data. If the data changes, the fingerprint changes.
  • SHA-256: the specific, widely used fingerprint algorithm RoarCAD uses for revisions, checkpoints, and export manifests.
  • Tamper-evident: able to show that content changed. A hash proves unchanged content; it does not prove who sent it.
  • BoardGraph: RoarCAD's structured map of a board, including parts, pins, connections, layers, placement, holes, and safety constraints.
  • Component: a physical electronic part, such as a resistor, connector, or chip.
  • Pin: one electrical contact on a component.
  • Net: a named electrical connection joining one or more pins.
  • Footprint: the exact copper pads and physical space a component needs on the board.
  • Differential pair: two carefully matched copper paths that carry one high-speed signal together and reject noise.
  • Copper pour: a larger filled copper area, often used for ground or power.
  • Keepout: an area where parts or copper are not allowed.
  • Compile: turn RoarCAD's structured board description into diagrams, checks, and manufacturing files.
  • Background worker: a browser helper that does heavy calculations separately, so the page can still respond. RoarCAD uses one for board compilation and export, with progress, cancellation, and a time limit.
  • tscircuit: the open-source electronics toolchain RoarCAD uses to compile and render boards.
  • DRC (design-rule check): an automated check for layout problems such as copper paths being too close together. Passing DRC does not prove the whole product works.
  • Evidence: a source or test result supporting an engineering claim, such as a manufacturer datasheet or physical measurement.
  • Engineering candidate: a design useful for review and testing that still has known unanswered questions.
  • Fabrication-ready: a design that has passed RoarCAD's required evidence and validation gates for preparing manufacturing files.
  • Preview: a proposed change shown before it is saved.
  • Non-mutating: unable to change stored project data. Agent previews are non-mutating.
  • Stale change: a proposal created from an older revision after the board has already changed. RoarCAD rejects it.
  • JSON: a common text format for structured data.
  • IndexedDB: the database built into modern browsers. RoarCAD uses it for local project history.
  • gzip: a standard way to compress data so it takes less space.
  • base64url: a way to turn compressed data into characters that are safe inside a web link.
  • URL fragment: the part of a link after #. Browsers do not send this fragment to the web server, so checkpoint data stays client-side.
  • Server-side: code that runs on a hosted server instead of inside the user's browser.
  • Netlify Function: a small server-side program. RoarCAD uses one to independently recheck manufacturing requests. The Vercel fallback uses the same underlying logic.
  • HDMI: a digital connection that carries video and often audio from cameras and other devices.
  • UVC (USB Video Class): the standard language that makes many USB cameras behave like webcams.
  • H.264: a common video-compression format that reduces the amount of data needed to carry video.
  • MIPI CSI-2: a fast chip-to-chip connection commonly used to move camera pixels inside hardware.
  • USB-C: the reversible connector shape. The connector alone does not guarantee that a device supports every USB feature or video format.
  • Gerber files: the layer-by-layer drawing files a PCB factory uses to make the board.
  • BOM (bill of materials): the shopping list of electronic parts.
  • CPL or placement file: the list telling an assembly machine where each part goes and how it is rotated.
  • SI (signal integrity): whether fast electrical signals arrive clearly enough to be understood.
  • PI (power integrity): whether every chip receives clean, stable power.
  • DFM (design for manufacturing): checking that a factory can reliably build the design.
  • Order handoff: opening the exact MacroFab project that RoarCAD created, so the signed-in user can review shipping, payment, and the final total before placing the order with MacroFab.

Why WebMCP

Circuit-board work is a poor fit for AI that guesses by looking at buttons. A wrong click could move the wrong part or edit an old version. WebMCP gives the agent four clearly named tools over the exact revision already open in the browser. The agent can inspect one small area, propose a repeatable change, and explain the result. The person sees the meaningful difference and remains the only one who can save it.

Ordinary browser automation mostly sees pixels and clickable areas. RoarCAD instead gives the AI validated data. Schemas reject malformed inputs, hashes detect changed content, previews cannot change storage, and evidence stays untrusted until a person reviews it.

Why This Matters

Software can often be fixed after release. Hardware mistakes become physical objects. They cost parts, factory time, shipping, and another board spin. RoarCAD helps people reach a reviewable design faster while preserving who changed what and why. It also keeps the final manufacturing decision with a person.

How We Used AI

The browser agent turns plain-English requests into a bounded BoardGraph, RoarCAD's structured board map. Bounded means the agent can only use supported parts and operations. It can inspect risks, prepare a preview, and ask RoarCAD to run validation. Information suggested by AI stays marked as unreviewed until a person checks it. No AI tool can download manufacturing files, request a quote, place an order, pay, store shipping details, or accept replacement parts.

How We Used Codex

Codex helped research WebMCP, tscircuit, PCB validation, PocketRoar’s HDMI-to-iPhone bridge, the SeeMo 4K comparison, and the JLCPCB trust boundary. It implemented and debugged the typed domain model, generic compiler, viewers, immutable revision flow, server-side manufacturing revalidation, tests, deployment, documentation, and submission materials. Jonathan Gan directed the product, claims, safety boundaries, and approval decisions.

Key Features

  • Four focused WebMCP tools that use the same checked actions as the buttons in the app. There is no AI-callable apply tool.
  • Checkpoint links and JSON files for safe review, separate forks, meaningful comparison, return, and deliberate adoption.
  • A generic 1–10 layer BoardGraph covering parts, pins, connections, physical pad layouts, placement, copper, holes, and safety rules.
  • PCB and schematic diagrams, automated checks, and manufacturing-file preparation through tscircuit.
  • Plain-English definitions for every supported part kind, with exact part and footprint details retained for technical review.
  • Digital fingerprints for previews and revisions, plus rejection of proposals based on old work.
  • Human-only review of requirements, evidence, parts, and footprints.
  • Clear separation between an engineering candidate and a fabrication-ready board.
  • Gerber factory drawings, BOM part lists, CPL placement lists, structured project data, validation reports, and SHA-256 manifests.
  • A server-side manufacturing recheck so changing a browser label cannot unlock a quote.
  • A visible MacroFab quote request that creates and uploads the exact provider project, returns a live price, and links that same project into MacroFab's shipping, payment, and order flow without exposing credentials.
  • A complete manual workflow when WebMCP is unavailable.

What Works Today

The contest update supports draft_board → focused inspect_designpreview_design_change → visible Approve & applyvalidate_and_export. Checkpoint links open read-only and never overwrite IndexedDB; continuing or adopting requires an explicit human action. The same app remains fully usable in manual mode when WebMCP is unavailable.

Three boards demonstrate one project-independent compiler:

Board Demonstrated result
Power indicator Compiles, passes the fabrication gate, prepares Gerber/BOM/CPL artifacts, received a live MacroFab quote, and links to that exact provider project for final ordering.
Environmental monitor Starts from a new structured brief and completes the bounded engineering workflow with agent inputs visibly unreviewed.
PocketRoar Capture Bridge Compiles a 2,566-element eight-layer feasibility slice with zero compiler/checker errors and prepares review artifacts while fabrication export and quoting remain blocked.

PocketRoar is the deliberate stress test. The current eight-layer graph explores clean non-HDCP HDMI into a Toshiba TC358743XBG, four-lane MIPI CSI-2 into an Infineon CYUSB3065-BZXC CX3 bridge, then UVC over USB-C. The repaired feasibility slice uses exact upstream KiCad connector geometry, documented bridge-critical BGA balls, the correct 19.2 MHz CX3 clock part, net-class widths, and explicit via-in-pad escapes. RoarCAD deterministically produces 2,566 Circuit JSON elements with zero compiler or independent checker errors.

That is useful digital evidence, not a claim that the complete product works. Only eleven routes are modeled; the full support schematic, differential impedance/coupling/skew, power behavior, firmware, manufacturing process, and physical hardware remain unproven. The research also exposed a decisive product limitation: standard UVC is a supported native path on USB-C iPads, not a demonstrated iPhone ingest path.

The intended PocketRoar product therefore needs a SeeMo-class architecture—HDMI ingest, hardware video compression, an iPhone-compatible USB/accessory transport, and a native PocketRoar Mobile integration—rather than merely shipping the current UVC candidate. RoarCAD blocks fabrication because that transport architecture, connector mechanics, power, firmware, signal integrity, licensing, and physical iPhone evidence remain unresolved. That refusal is intentional proof that an ambitious design can be useful without being falsely certified for manufacture.

RoarCAD also begins translating the engineering surface for newcomers. The app explains what each general kind of part normally does and uses clearer labels such as How it works, Parts, and Connections, while preserving exact manufacturer data, footprints, nets, evidence, and validation results for expert audit. It never guesses a part's exact purpose from its type alone.

Architecture

React builds the visible interface, and TypeScript helps catch incorrect data while the code is being written. Zod checks every project and tool input at runtime. One compileBoardGraph() function translates every supported board into tscircuit; there is no hidden special-case compiler for PocketRoar. IndexedDB stores limited revision history inside the browser. The WebMCP tools call the same checked actions as the buttons. A native Netlify Function independently reads, compiles, and validates manufacturing requests using the same handlers as the Vercel fallback. Private credentials never enter browser code.

The Netlify deployment needs no hosted database or AI API key. Netlify serves the website and its guides, while the board remains in the browser. The server reads manufacturing requests with a strict byte limit, rejects unsupported methods, and does not cache private responses. A person can visibly request a bare-board quote for a supported two-layer design. RoarCAD recompiles it on the server, uploads Gerber and drill files through MacroFab's signed flow, and polls with a short-lived tamper-resistant token. It shows a monetary value only when MacroFab returns an unambiguous total. MacroFab's API omits a currency field, so RoarCAD labels it USD only because MacroFab's published Manufacturing Services Agreement defines its prices in U.S. dollars and the interface discloses that limitation. A valid quote opens the exact MacroFab project RoarCAD created; MacroFab then collects shipping and payment and places the final order. RoarCAD does not store those details or call MacroFab's undocumented browser-only order endpoint. PCBA and agent access remain disabled; JLCPCB remains a manual-upload fallback.

Heavy board calculations run in a native browser worker, using the same compiler as the server. This keeps the page usable while an engineering export runs. A person can cancel, and changing revisions discards obsolete work. Checkpoint links also work when opened in an existing tab; integrity checks finish before editing is allowed.

WebMCP is a tool connection inside a browser page, not a remote MCP-server address. A coding agent needs a browser integration that exposes these page tools. RoarCAD does not claim that pasting its website URL into any agent's MCP settings will work.

Verified Software Release

The current Netlify production release, build status, public HTTP checks, live provider proof, and browser checks are separately recorded in docs/NETLIFY_RELEASE.md.

  • CI (continuous integration) automatically checked types, formatting, all 38 tests across 12 files, and the production build.
  • The production smoke test, a quick check of essential behavior, passed the website, six guides, discovery files, and manufacturing safety boundary.
  • A production-only secret authenticated the server to MacroFab. After a visible quote request, the indicator's 11 Gerber/drill files were recognized, imported, and quoted by MacroFab at $591.08 USD total for five boards with a 22-business-day lead time. The returned manifest was b621a2da34752e89ed8a295d42a742c6f9aadd6f6a769572fdbbac1c59a36c4c. RoarCAD returned the exact provider project at https://factory.macrofab.com/pcb/g22x00i7, which served successfully for the final shipping, payment, and order review. This timestamped test quote is evidence of the integration, not a standing price or an order; shipping and tax were not returned.
  • Live production WebMCP preview preserved the saved revision. The visible approval button created a new revision, and background export prepared fabrication artifacts while still requiring a human download click.
  • On the Netlify release candidate, an end-to-end test followed the whole share → backup → fork → return → adopt journey across isolated origins. Older local history and incoming provenance survived adoption; incoming approvals did not survive as trusted claims.
  • PocketRoar's engineering bundle downloaded successfully. All nine file fingerprints and the manifest fingerprint matched; the bundle contains 2,566 Circuit JSON elements and zero compiler errors. Its 159 review/check warnings remain visible, and fabrication is refused. This is digital verification of the modeled slice, not proof of working iPhone hardware.
  • Mobile checks at 390×844 found no sideways overflow and a stable schematic height. Chrome also passed the manual preview, approval, and worker-export journey. A blind first-call AI-selection benchmark is not yet measured.

Earlier Vercel evidence

  • A smoke test is a quick check that the most important parts of a product start and respond. RoarCAD's public production URL passed its clean-browser smoke test.
  • An end-to-end test follows a whole user journey across the real product. RoarCAD passed a production A → B → A handoff: one browser shared a checkpoint, another continued it, and the first reviewed and adopted the returned revision.
  • CI (continuous integration) is an automated robot that checks every proposed code change. RoarCAD's CI passed type checking, formatting and code-quality checks, all Bun tests, and the production build.
  • A regression test proves that an old bug did not return. The 390×844 mobile test passed without sideways scrolling or an endlessly growing schematic.
  • Thirty focused tests across nine files covered the board model, checkpoints, WebMCP tools, electronics compilation, browser storage, manufacturing gates, and interface contracts.
  • Chrome 149 executed the four live WebMCP tools. ChatGPT's in-app browser completed the clean-profile checkpoint journey and the manual fallback interface.

Testing Instructions

  1. Open the live URL in ChatGPT’s in-app browser, or enable chrome://flags/#enable-webmcp-testing in Chrome and relaunch.
  2. Confirm the header says WebMCP ready when the browser exposes document.modelContext; otherwise use the complete manual workflow.
  3. Open the indicator, create a checkpoint link, and open it in a clean browser profile. Confirm it starts read-only.
  4. Click Download local backup and confirm the file is saved before choosing Continue as local fork. Preview moving D1 with an agent, confirm the revision ID is unchanged, then click Approve & apply and observe a new revision.
  5. Return the new checkpoint to the original profile. Confirm the common ancestor and semantic diff, then manually adopt it as a new local revision.
  6. Select the bundled indicator to test fabrication export. Incoming checkpoint approvals are intentionally reset, so an adopted board is not automatically fabrication-ready. Confirm the browser requires a visible download click.
  7. Open PocketRoar, prepare an engineering bundle, then confirm fabrication export and quoting remain blocked.
  8. Load the environmental-monitor sample and confirm its agent-supplied requirements, parts, footprints, and evidence are unreviewed.
  9. On the two-layer indicator, read the disclosure and request a live MacroFab quote. If provider processing exceeds one minute, use Retry status without uploading again. Confirm that the returned result includes its provider, currency basis, lead time, timestamp, manifest, and unavailable shipping/tax labels. Open Review and order this board at MacroFab and verify it is the same provider project. Stop before payment unless you intend to buy the boards.

No visitor credentials are required. The MacroFab credential stays in the server-side production environment.

Public Demo Link

https://roarcad.netlify.app/

Vercel remains available at https://roarcad.vercel.app/ so existing browser-local projects are not stranded.

Public Repository Link

https://github.com/jongan69/RoarCAD

Demo Video

https://youtu.be/DEJ6Mwa9TYU

The replacement master is 2:46.635, 1920×1080, H.264/AAC. It opens with the checkpoint handoff, shows a live WebMCP-created environmental monitor from scratch, preserves the revision during agent preview, shows the visible human approval that creates revision two, and closes on PocketRoar's zero-error modeled slice and honest fabrication refusal. Every product frame comes from the deployed application; the narration is AI-generated.

Known Limitations

  • RoarCAD does not execute arbitrary TSX or uploaded KiCad files.
  • It does not replace professional schematic, SI/PI, DFM, compliance, or physical validation.
  • JLCPCB live quoting remains disabled until the approved endpoint contract is verified.
  • MacroFab bare-PCB quoting fails closed unless its live response supplies an unambiguous total and matches the selected supported configuration. The API omits currency, so RoarCAD's USD label depends on MacroFab's published U.S.-dollar contract terms and is disclosed. A quote is not electrical proof or final DFM signoff. RoarCAD links to the exact project for provider-owned shipping, payment, and order placement because MacroFab does not publish a supported create-order API contract.
  • PocketRoar is an engineering candidate, not a fabrication-ready or physically validated product.
  • PocketRoar's zero-error feasibility slice is not a complete schematic; differential-pair impedance, coupling, and skew remain unverified.
  • The current CX3/UVC graph is not the final iPhone bridge. It does not yet implement SeeMo-class H.264 compression or an app-specific iPhone accessory transport.
  • iPhone ingest, accessory/compliance requirements, cable behavior, thermals, sustained frames, reconnects, and simultaneous cellular streaming all require physical proof before compatibility is claimed.

What's Next

The next RoarCAD usability step is clickable schematic auditing: select a part, read its general definition, see its exact BoardGraph connections, and keep proposed design intent separate from reviewed evidence. Functional drag-and-drop blocks such as USB power or a status light are research ideas, not shipped features; any future visual edit must still become a typed preview and wait for visible human approval.

For PocketRoar, the next gate is transport proof on the exact Sony camera, iPhone, iOS version, cable, and PocketRoar app. After that comes a complete reviewed schematic, zero unexplained ERC and DRC findings, vendor-model power and high-speed analysis, fabricator DFM review, current-limited prototype bring-up, and sustained physical-device testing. A clean render or manufacturing-file export cannot replace those gates.

Inspiration Sources

Built With

Share this project:

Updates