E-ternal × WebMCP

An open-source ERP that works with your browser agent — same screen, same state. The agent drafts; only a human can approve. Built on WebMCP.

Comment

Judge access: live demo at https://et-demo.kaiwu.com.tw — sign in as judge / webmcp-judge. Best experienced in the ChatGPT desktop app's built-in browser (GPT-5.6 Sol/Terra) or Chrome 146+ with the WebMCP flag. Prior-work vs. challenge-period work is documented in HACKATHON.md in the repo.

Inspiration

ERPs are where small businesses actually keep their money, stock and tax obligations — and they are exactly the software agents are worst at: dense forms, hidden state, and one wrong click posts a journal entry. We didn't want an agent that "operates" the ERP by guessing its way through the UI. We wanted the ERP to tell the agent what it may do, show the human everything the agent does, and keep the one irreversible step — committing to the books — in human hands. WebMCP is the first standard that makes that shape natural: the tools live in the page the human is already looking at.

What it does

E-ternal is an open-source ERP for Taiwanese SMEs (quotes → orders → shipping, double-entry accounting, e-invoicing, VAT filing, HR/payroll). For this challenge every page now registers WebMCP tools on document.modelContext (ChatGPT's built-in browser) and navigator.modelContext (Chrome). A person and their agent then work on the same screen:

  • Ask, don't click. "What did we sell this month, who still owes us money?" → the agent calls query_report, get_dashboard_summary, search_partners and answers with real ledger numbers. No scraping, no menu navigation.
  • Draft together. "Draft a quote for Blue Harbor: 20 Control Hubs plus one maintenance plan" → draft_quote fills a live draft card on screen, field by field. Nothing is written to the ERP. The human can edit any line on the card; the agent reads the same draft back with get_current_view. One draft, two editors.
  • Approve by structure. submit_draft suspends the tool call and shows an approval card. Only a human can click it. There is deliberately no tool that posts, approves or voids anything — that door was never registered, so it cannot be jailbroken.
  • See everything. An on-screen activity panel streams every tool call the agent makes; a status chip shows which tools are registered for the signed-in role.

How we built it

  • apps/web/src/webmcp/ — a self-contained layer inside the existing React app: a modelContext wrapper (feature detection, name-keyed dynamic registration, AbortSignal unregistration), 12 tools with English descriptions and strict JSON-Schema inputs, a framework-free state bus (activity log, co-edited draft, approval requests), and the UI (draft card, approval card, activity panel — fully i18n'd, light/dark aware).
  • Tools are recomputed from role × current page and re-synced on every change: logout ⇒ only describe_site remains; a sales account never sees finance tools.
  • Domain guardrails live inside the tools: prices are untaxed integers, VAT is computed server-side from user-maintained tax parameters (never by the agent), ambiguous customer/product names return candidate lists instead of guesses.
  • Also built during the challenge: full English i18n of the ERP, a one-command demo dataset, and the live deployment (Vercel + Supabase).

Challenges we ran into

  • Two APIs, one standard. Chrome exposes navigator.modelContext; ChatGPT's browser exposes document.modelContext. Supporting only one means "the API exists but the page never registers tools" on the other — we shipped a resolver that handles both.
  • Discovery timing. Agents scan for tools at page load, before sign-in. We register a read-only describe_site tool at module load so the registry is never empty, and it tells the agent which tools appear after sign-in.
  • Chrome 151 has no unregisterTool. Logout could leave tools behind. We switched to the spec's registerTool(tool, { signal }) and abort to unregister — verified in the browser.
  • Roles that are read-only on the server. Our "general manager" role is read-only by design; the judge account had to be a finance role so the approval path can actually create the quote.

Accomplishments that we're proud of

  • A real agent (ChatGPT desktop, GPT-5.6 Sol) ran the whole flow on the live site with zero clicking: reporting → draft → human edit → approval → quote #6 created with server-side VAT. That is the demo video, edited for pacing only.
  • The red line is architectural, not a prompt: judges can read the tool registry and confirm the missing doors.
  • Everything is open source (LGPL-3.0-or-later) with a public commit history for the challenge period.

What we learned

WebMCP's real power isn't "an API for agents" — it is that the agent and the human share the same pixels. Once the draft lives on screen, trust stops being a prompt-engineering problem and becomes a UI problem, which we know how to solve.

What's next

Approval-gated tools for the other document types (orders, purchase receipts, HR requests), page-level context (get_current_view reporting filters and selected rows), and undo for agent actions — all inside the same registry discipline.

Reusable playbook (open source)

We distilled this whole integration into an open-source agent skill so any team can make their own site agent-ready the same way: kaiwutech-TW/webmcp-skill (MIT) — the API reality check, the six browser traps we hit, the five structural guardrails (registry red-line, central validation, untrusted-content quarantine, idempotent submission, live schemas), and framework-free TypeScript templates.

Built With

Share this project:

Updates

Submission history