> Canonical URL: https://codingcat.dev/course/mcp-in-production/lesson/client-side-webmcp-rfc-9727-agent-discovery

# Client-Side WebMCP & RFC 9727 Agent Discovery | MCP in Production: Building & Securing Model Context Protocol Servers | CodingCat.dev Course

[🧶 MCP in Production: Building & Securing Model Context Protocol Servers](/course/mcp-in-production)Section 1.4 · Lesson 4 of 5[← Prev Lesson](/course/mcp-in-production/lesson/securing-remote-mcp-servers-oauth-better-auth)[Next Lesson →](/course/mcp-in-production/lesson/connecting-mcp-verified-knowledge-bases-sanity-context)

# Client-Side WebMCP & RFC 9727 Agent Discovery

![MCP in Production Architecture Diagram](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/dd8b89a42ee37457891b58d39c6273a31ac013e4-1376x768.jpg?rect=6,0,1365,768&w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=gH9Q6-b1b4Y&list=UUnKZ8gEb78zXKMi1ns-IQ2g)

## 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.

Copied! 🐾📄 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.

Let’s build it!✏️ Visual Diagram: MCP in Production: Building & Securing Model Con…✓ Good PatternVISUAL DIAGRAM[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[Course Outline](/course/mcp-in-production)

## MCP in Production: Building & Securing Model Context Protocol Servers

4/51

### Core Architecture & Production Implementation

- [1.1What MCP Actually Is (Architecture Diagram & Stdio vs. Streamable HTTP)](/course/mcp-in-production/lesson/what-mcp-actually-is-stdio-vs-streamable-http)
- [1.2Building Your First TypeScript MCP Server on Cloudflare Workers](/course/mcp-in-production/lesson/building-typescript-mcp-server-cloudflare-workers)
- [1.3Securing Remote MCP Servers with OAuth 2.1 & Better-Auth](/course/mcp-in-production/lesson/securing-remote-mcp-servers-oauth-better-auth)
- [1.4Client-Side WebMCP & RFC 9727 Agent Discovery▶](/course/mcp-in-production/lesson/client-side-webmcp-rfc-9727-agent-discovery)
- [1.5Connecting MCP to Verified Knowledge Bases (Sanity Context vs. Naive RAG)](/course/mcp-in-production/lesson/connecting-mcp-verified-knowledge-bases-sanity-context)

@CodingCatDev on YouTube62.5K / 100K

Subscribe for new course lessons and architecture deep dives every week.

[Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)