WebMCP integration with real Stripe checkout

说明与用途

将 WebMCP 与真实 eSIM 页面集成，使 AI 代理能够使用与人类用户相同的 API 列出计划并启动 Stripe 结账。

问题

Integrating a browser‑based AI tool (WebMCP) with a live eSIM product page to expose real inventory and checkout via Stripe, avoiding toy demos and ensuring consistency between AI and human flows.

结果

AI agents can now list eSIM plans and initiate real Stripe checkout sessions directly from the browser, with identical logic for both AI and human users.

工作流

• 1. Import WebMCP tools component on eSIM catalog page.
• 2. In component’s useEffect, check for document.modelContext.
• 3. Register "list_esim_plans" tool with execute() calling GET /api/v1/esim-catalog.
• 4. Register "buy_esim_plan" tool with execute() POST /api/v1/esim-checkout and redirect to returned checkoutUrl.
• 5. Use AbortController to clean up on component unmount.
• 6. Ensure checkout logic is shared via createEsimCheckoutSession in lib/esim-checkout.ts for consistency.

证据

Two tools call the same public JSON endpoints the page itself would use if this were rendered as an API instead of HTML

来源