↑ ↓ navigate↵ selectesc close

Client-Side WebMCP & RFC 9727 Agent Discovery

Making Your Web Application Discoverable to Browser and Cloud Agents

Browser-based AI agents shouldn't have to scrape fragile DOM selectors when your app can register structured tools directly on navigator.modelContext.

📄 src/scripts/webmcp.tstypescript
if (typeof navigator !== "undefined" && "modelContext" in navigator) {
  (navigator as any).modelContext.registerTool({
    name: "open_course_lesson",
    description: "Navigate directly to a CodingCat.dev course lesson by slug",
    inputSchema: {
      type: "object",
      properties: { courseSlug: { type: "string" }, lessonSlug: { type: "string" } },
      required: ["courseSlug", "lessonSlug"],
    },
    execute: async ({ courseSlug, lessonSlug }: { courseSlug: string; lessonSlug: string }) => {
      window.location.href = `/course/${courseSlug}/lesson/${lessonSlug}`;
      return { navigated: true };
    },
  });
}

Production Architecture Takeaway

Pair client-side WebMCP tools with /.well-known/api-catalog and /llms.txt so both browser agents and headless crawlers discover your capabilities.

✏️ Visual Architecture Diagram

how this course connects together.

Follow AJ from first principles to production-ready architecture.

✏️ Visual Diagram: MCP in Production: Building & Securing Model Con…
✓ Good PatternVISUAL DIAGRAM
Visual Diagram: MCP in Production: Building & Securing Model Con…Visual architectural diagram showing: Step 1: Core Architecture & Production Implementation (Mental model & why it matters) -> Step 2: MCP in Production: Building & Securing Model Context Protocol Servers (Under the hood & live code) -> Step 3: Ship It Purrfectly (✓ Production trade-offs). Step-by-step diagram breakdown for MCP in Production: Building & Securing Model Context Protocol Servers: Client-Side WebMCP & RFC 9727 Agent Discovery: start with Core Architecture & Production Implementation, implement MCP in Production: Building & Securing Model Context Protocol Servers, and ship to production.✓Step 01Core Architecture & Prod…Mental model & why it matters✓Step 02MCP in Production: Build…Under the hood & live code✓Step 03Ship It Purrfectly✓ Production trade-offsunroll the yarn✓ production ready
[Diagram Walkthrough]Step-by-step diagram breakdown for MCP in Production: Building & Securing Model Context Protocol Servers: Client-Side WebMCP & RFC 9727 Agent Discovery: start with Core Architecture & Production Implementation, implement MCP in Production: Building & Securing Model Context Protocol Servers, and ship to production.
AAA Contrast Verified