Agent SEO Studio

Inspiration

SEO asked one question for twenty years: 'can Google read my page?' Then GEO arrived - 'can an AI assistant cite my answer?' We think WebMCP opens the one that actually matters next: 'can the agent finish the job on my site?'

The unlock clicked when we realized an AI agent literally cannot answer "is my website ready for AI search?" from a browser. It can't fetch other sites cross-origin — CORS blocks it. It can't read the HTML only a server sees. It can only guess from training data. Those are exactly the gaps WebMCP is built to close: the page hands the agent real, named tools that do the work the agent can't do alone. So we built a studio where a business owner and their agent audit, rank, and repair a site together — and, because it felt right, made the studio able to audit whether a site is itself WebMCP-ready.

What we built

Agent SEO Studio registers 13 WebMCP tools on document.modelContext. An agent can audit a site's AI-search readiness, compare it against competitors, mystery-shop whether an agent could book/buy/contact on it, scan a whole market server-side, generate ready-to-paste JSON-LD fixes, and project the score climbing. Every tool call renders into a shared on-screen workspace the human watches and steers — and a live dashboard counts every agent call by tool and by AI engine, a metric no static SEO tool can show.

How we built it

• Frontend + tools: Next.js 15, React 19, TypeScript, Tailwind CSS 4, deployed on Vercel.
• The WebMCP layer (src/lib/register-tools.ts) registers tools with the standard registerTool({ name, description, inputSchema, execute }) shape and returns MCP { content: [{ type: "text", text }] } results. Tools reach the app through a thin StudioBridge seam, so the tool layer never touches React directly.
• Server route (/api/audit) does the cross-origin fetch + deterministic measurement, guarded by an SSRF check that blocks private/metadata IPs and re-validates every redirect hop.
• Market discovery uses OpenStreetMap's Overpass API (keyless). Fix generation is provider-agnostic — OpenAI or Anthropic — with a deterministic template fallback so the demo always produces valid output and never fabricates facts.
• State-dependent tools: verify_fix and export_report register the moment the first audit lands; analyze_gaps after a market scan — so an agent that re-reads the tool list finds actions that weren't there a step ago.

Challenges we faced

• CORS is the whole point — and the whole problem. The reason this needs WebMCP (agents can't fetch cross-origin) is also what forced every measurement server-side. We leaned in: the server-side fetch is the product.
• Honest confidence for check_webmcp. A static server fetch can't run the JavaScript that registers a site's tools at runtime — so "is this site WebMCP-ready?" can't always be answered with certainty. Rather than fake it, the tool reports its confidence honestly (confirmed in served markup vs. likely from a linked bundle vs. none).
• Never guess. Our hardest self-imposed rule: every finding must trace to a fact observed in the page's HTML. A site that doesn't load scores 0 with a reason; a JavaScript-rendered SPA is flagged as such, not falsely accused of having no content. Backed by 57 unit tests on the pure logic.
• Tools that don't stall the agent. A raw rejection is opaque to an agent and stops it cold, so every tool is wrapped to return a descriptive text miss instead of throwing — "loose schema, strict code."

What we learned

WebMCP is less about "add tools to a page" and more about designing a surface a human and an agent share. The tools that felt best weren't the ones that did the most — they were the ones whose results landed somewhere the human could see and redirect. And the honest-confidence work on check_webmcp taught us that the most trustworthy agent tool is one that knows, and says, what it can't be sure of.

Built With

• anthropic
• json-ld
• model-context-protocol
• next.js
• node.js
• openai
• openstreetmap
• react
• tailwindcss
• typescript
• vercel
• webmcp