RelayPay

• 

• 

• 

Inspiration

Refunds are simple when everything works. But when a return is verified and the money never arrives, resolving the exception can require checking multiple systems, interpreting evidence, deciding what action is safe, and manually coordinating the recovery.

We wanted to explore a different model: what if an AI agent could investigate the exception and prepare the recovery, while the human remained firmly in control of the consequential action?

That became RelayPay.

What it does

RelayPay is a WebMCP-powered refund recovery system where an AI agent can investigate refund exceptions through structured browser tools.

The agent can discover and call tools to find an order, inspect return status, check refund status, prepare an escalation, and verify the resulting case.

The critical boundary is human approval: the agent can investigate and prepare a proposed recovery, but cannot authorize its own consequential action. The human reviews the exact proposal and explicitly approves it before recovery submission.

This makes WebMCP more than a way to expose buttons to an agent—it becomes the interface through which an agent collaborates with a human inside a real application workflow.

How we built it

RelayPay was built with Next.js, React, TypeScript, Tailwind CSS, Three.js/React Three Fiber, and browser-native WebMCP.

We registered six structured WebMCP tools using document.modelContext.registerTool():

find_order get_return_status get_refund_status prepare_escalation submit_escalation verify_case

The workflow separates investigation, preparation, consequential execution, and verification.

We also built an application-enforced human approval boundary. Approval is tied to the exact proposed action, is single-use, and is consumed when the recovery is successfully submitted.

The result is a deterministic demo environment that lets an agent repeatedly reproduce the same recovery scenarios without relying on external merchant or payment APIs.

Challenges we ran into

The biggest challenge was making WebMCP the actual product interface for the agent, rather than adding WebMCP as a thin integration on top of an existing UI.

We had to think carefully about tool boundaries, structured inputs, read-only versus consequential operations, and what an agent should be allowed to do autonomously.

The hardest design problem was the approval boundary. We wanted the agent to be genuinely useful without allowing it to silently turn its own recommendation into an irreversible action.

We also had to make the experience work across WebMCP-capable environments while honestly handling browsers where WebMCP is unavailable.

Accomplishments that we're proud of

We're proud that RelayPay demonstrates a complete agent → tools → reasoning → human approval → action → verification loop rather than just a chatbot calling an API.

The agent can investigate a real-looking refund exception through multiple WebMCP tools, build a recovery proposal, and reach a clear human decision point.

We're especially proud of the separation between preparation and execution. The agent can do the investigative work, but the application—not the agent—enforces the final approval boundary.

We also built an execution trace so the interaction is observable rather than hidden behind a black box.

What we learned

We learned that building an agent-native application requires designing around capabilities and boundaries, not just adding AI to an existing interface.

WebMCP made us think of the browser itself as an agent-accessible application surface. Tool descriptions, schemas, permissions, state transitions, and failure cases all become part of the product design.

Most importantly, we learned that human-agent collaboration works best when the agent handles the tedious investigation and preparation while the human retains authority over consequential decisions.

What's next for RelayPay

The next step is connecting RelayPay to real commerce and payment infrastructure so the same workflow can operate on live refund data.

We want to add richer evidence collection, policy-aware recovery recommendations, merchant-side integrations, audit trails, and stronger verification.

Longer term, RelayPay could evolve from a refund exception tool into an agent-native operations layer for commerce, where humans set the boundaries and agents handle the repetitive work inside them.

Built With

• css
• fiber
• next.js
• react
• tailwind
• three
• three.js
• typescript
• vercel
• webmcp