Inspiration
I run a Thai agri-export company that invoices Chinese buyers in USD/CNY. Every month a deposit lands with the wrong amount and a useless reference — "INWARD REMIT REF 88213" — and I have to guess which invoice it was, work out how much the bank silently skimmed, and remember which client always pays like this. I already built GotPaid to fix that. For this challenge, I asked a narrower question: reconciliation questions ("which buyer is slipping?", "why did this deposit match that invoice?") only really make sense pointed at a real row on a real screen — so what if the agent helping me could act inside the dashboard I'm already looking at, instead of just answering in a disconnected chat window?
What it does
GotPaid reconciles cross-border invoice payments against messy bank deposits — tolerant of hidden fees, batched payments, and split payments — learns each buyer's payment behavior over time, and surfaces what's still unpaid. The WebMCP layer adds 8 tools so a human and an AI agent can work the same dashboard together: the agent reads structured data (no screen-scraping — an embedded JSON island), switches tabs and flashes the exact row it's talking about in the human's own view, and drafts a chaser letter that opens on screen for review. Nothing is ever sent automatically — the agent proposes, the human decides, both looking at the same thing. That's the gap WebMCP closes: before, an agent could only describe what's on screen; now it can point at it.
How we built it
Python renders a static dashboard (dashboard.py) with all data baked into an embedded JSON script tag. On top of that, 8 tools are registered via document.modelContext.registerTool(): 5 read-only (list_companies, list_unpaid_invoices, get_buyer_profile, explain_match, get_dashboard_totals) and 3 UI-action tools (show_company, highlight_invoice, draft_chaser_letter) that manipulate the DOM the human is looking at. Every tool call is echoed to an on-page "Agent activity" log so the human always sees what their agent just did. Deployed static on Cloudflare Pages — no server, no build step.
Challenges we ran into
WebMCP is brand new — Chrome support is flag-gated (chrome://flags/#enable-webmcp-testing), so I had to design a graceful fallback banner rather than assume every judge has it enabled. I also had to resist just exposing raw data dumps as tools; the ones that ended up mattering most act in the human's view (highlight, draft) rather than just answering questions in text.
Accomplishments that we're proud of
A working execute implementation behind every tool — not stubs — verified end-to-end (filtering, cross-company lookups, a chaser letter that actually reflects a buyer's real payment history) before ever opening Chrome's WebMCP flag. And keeping the human-in-the-loop boundary hard: the letter tool drafts and opens for review, it never sends.
What we learned
A "reasonable-sounding" tool surface (just dump every field as a tool) is worse than a smaller set of tools that do something in the human's view. Also: sponsor sandboxes don't always match their public docs — worth verifying the live account rather than trusting documentation alone when they disagree.
What's next for GotPaid Agent Desk
GotPaid already plugs into my company's deployed durian-export platform (2 awards at the Nanning ASEAN summit). This WebMCP layer is the template for making the rest of that platform agent-native — inventory, grading, logistics — all queryable and actionable by an agent working alongside the person actually running the business.
Built With
- anthropic-claude-api
- cloudflare-pages
- html
- javascript
- json
- python
- webmcp
Log in or sign up for Devpost to join the conversation.