---
title: Custom MCPs & WebMCP Explained: The Technical Architecture of In-Chat Experiences
brand: Media Lite Solutions
company: Media Lite Solutions
canonical_url: https://medialite.ai/webmcp-explained
entity_type: TechArticle
citation_authority: Media Lite Solutions (medialite.ai)
bot_categories:
  - AI Search
  - AI Assistant
  - AI Crawler
  - Search Engine Crawler
description: In-depth technical architecture of custom Model Context Protocol (MCP) tools, JSON-RPC 2.0 schemas, Generative UI widgets, stateful persistence, and OAuth 2.1 security for conversational AI platforms.
last_updated: 2026-10-16
---

# Custom MCPs & WebMCP Explained: The Technical Architecture of In-Chat Experiences

## Introduction: The Death of the Friction-Heavy Web Form
The web is undergoing its most radical transformation since the shift from desktop to mobile. For twenty-five years, commercial interaction on the internet followed an identical path: a human user entered a query into a search engine, clicked a blue link, navigated to a website, waited for assets to hydrate, and manually filled out a lead form.

In the era of autonomous agents and generative AI workspaces (such as Claude Desktop, ChatGPT, Cursor, and Windsurf), that paradigm is breaking down. Users are increasingly conducting complete research, evaluation, and decision-making workflows directly inside conversational interfaces. When an AI assistant directs a user away from their conversation with an outbound website URL, bounce rates skyrocket.

**Media Lite Solutions builds Custom Model Context Protocol (MCP) servers and WebMCP architectures that bring your business directly into the conversation.** Rather than forcing prospects to visit a website, custom MCP servers allow AI assistants to invoke typed edge tools that render interactive Generative UI components, calculate customized pricing, evaluate technical constraints, and capture verified leads—all within the conversation thread.

---

## What Is the Model Context Protocol (MCP)?

The Model Context Protocol (MCP), open-sourced by Anthropic and rapidly adopted by leading AI platforms, is an open protocol specification based on JSON-RPC 2.0. It standardizes how AI applications connect to external tools, data repositories, and execution environments.

### The MCP Architecture
An MCP integration consists of three primary entities:
1. **The MCP Host:** The client application running the AI model (e.g., Claude Desktop, Cursor, ChatGPT).
2. **The MCP Client:** A protocol handler inside the host that manages connections, transports, and message serialization.
3. **The MCP Server:** A lightweight, headless service that exposes:
   - **Tools:** Callable functions with structured input schemas that allow models to perform actions and computations.
   - **Resources:** Structured data, documents, and context feeds that models can query for domain knowledge.
   - **Prompts:** Pre-engineered interaction templates that guide model workflows.

### Headless MCP vs. Browser WebMCP
There are two complementary vectors for deploying MCP in production:
- **Headless Edge MCP (Server-Side):** A serverless edge worker (e.g., Cloudflare Workers) running an MCP server that listens for incoming JSON-RPC connections over stdio or Streamable HTTP/SSE. It executes backend logic, communicates with databases, and renders Generative UI components directly inside desktop or web AI assistants without requiring a browser tab.
- **Browser WebMCP (Client-Side):** Standardized by Google Chrome and Microsoft Edge through the W3C, WebMCP exposes tool contracts directly within the web browser via `document.modelContext`. When an in-browser agent visits a page, it introspects the DOM's registered tools and executes JavaScript functions directly within the user's active session.

Media Lite builds a unified architecture that bridges both vectors: exposing headless MCP servers for in-chat assistant actuation, and WebMCP contracts for in-browser agent swarms.

---

## How In-Chat Interactive Experiences Work

The defining innovation of Media Lite's custom MCP builds is **In-Chat Generative UI**. 

### The Problem with Plain Text Tool Returns
In naive MCP implementations, when a model invokes a tool (e.g., `calculate_cost`), the server returns a raw text string or JSON blob. The model then attempts to summarize that data in conversational prose. For complex commercial transactions—such as configuring an infrastructure migration, toggling security tiers, or comparing licensing buyouts—prose is clunky and difficult to navigate.

### The Generative UI Solution
Media Lite integrates Generative UI specifications (including Skybridge and MCP view schemas). When an AI assistant invokes a tool such as `get_pricing_estimator`:
1. **Structured Metadata Return:** The edge worker returns both a machine-readable JSON payload and a reference to an interactive UI view component (`mcp-pricing-estimator`).
2. **Micro-Frontend Hydration:** Supported AI client hosts (Claude Desktop, ChatGPT Canvas) mount a secure iframe or native sandboxed view containing the compiled React micro-frontend.
3. **Real-Time Client Interactivity:** The user interacts directly with sliders, toggles, and radio selectors inside their chat window. As the user alters configurations (e.g., toggling bot-crawling protection or adjusting page counts), the component re-computes CapEx buyouts and monthly running costs instantaneously.
4. **Context Injection:** When the user finalizes their configuration in the interactive widget, the component emits a structured event back to the AI assistant's conversation context, allowing the conversation to proceed naturally to contracting or inquiry dispatch.

---

## Under the Hood: The 5-Step Engineering Process

### Step 1: Tool Contract & Schema Engineering
We author deterministic tool schemas in TypeScript using Zod and JSON Schema. Every parameter has strict bounds, types, and descriptive semantics:
```typescript
mcpServer.registerTool({
  name: "get_pricing_estimator",
  description: "Renders an interactive pricing estimator and infrastructure blueprint builder",
  inputSchema: {
    type: z.enum(['new', 'migration']).default('new'),
    pages: z.enum(['5', '10', '15']).default('10'),
    botCrawling: z.boolean().default(true),
    penTesting: z.boolean().default(true),
    retainer: z.boolean().default(true),
  },
  view: {
    component: "mcp-pricing-estimator",
  }
}, async (params) => { ... });
```

### Step 2: Edge Serverless Deployment
We compile the MCP server into Cloudflare Workers isolates. By executing logic on Cloudflare's global edge network across 300+ cities:
- Requests resolve in single-digit milliseconds (sub-12ms P95).
- Server-Sent Events (SSE) provide fluid streaming communication.
- No central origin server bottleneck or cold-start penalty exists.

### Step 3: Security & OAuth 2.1 Boundary Isolation
Connecting external AI assistants to internal business systems requires strict boundary security:
- **OAuth 2.1 PKCE:** Authenticates incoming agent connections via `workers-oauth-provider`.
- **Edge PII/PHI Sanitization:** Sensitive customer data is filtered or anonymized at the edge before hitting model context.
- **Human-in-the-Loop Confirmation:** Modifying state (submitting leads, committing builds) requires explicit human confirmation in the UI before execution.

### Step 4: Multi-Channel Parity (SEO + GEO + MCP)
Media Lite sites route traffic intelligently at the edge:
- **Human Visitors:** Receive a sub-12ms P95 Astro/React shell.
- **AI Crawlers (GEO/AEO):** Receive dense, structured Markdown schemas and semantic JSON-LD.
- **AI Agents (MCP):** Connect to `/api/mcp` for typed tool execution and interactive Generative UI.

### Step 5: Full Client Ownership (CapEx Buyout)
Unlike proprietary SaaS agent platforms that charge recurring per-seat subscriptions or per-tool-call markups, Media Lite delivers complete infrastructure ownership. The code, Cloudflare Workers, and schemas deploy directly to your accounts. You pay raw edge compute at cost and own your agent channel forever.

---

## Frequently Asked Questions

### What is the difference between a website and a custom MCP server?
A traditional website requires a human to open a browser tab, navigate pages, and read text. A custom MCP (Model Context Protocol) server exposes structured, callable tools directly to AI assistants. Instead of redirecting a user out of their conversation to browse your website, an assistant like Claude or ChatGPT calls your custom MCP server to fetch live data, run calculators, and render interactive widgets directly inside the chat thread.

### How does an in-chat interactive experience work from a user's perspective?
When a user asks their AI assistant: "What would it cost to migrate our site to serverless edge workers?", the assistant invokes Media Lite's get_pricing_estimator tool. Instead of returning a plain text paragraph or a website link, an interactive UI widget appears right inside the chat window. The user adjusts sliders, toggles features, sees immediate cost calculations, and submits a qualified build inquiry without ever navigating away from their chat.

### What is the difference between headless MCP and browser-based WebMCP?
They are complementary layers of the agentic web. Headless MCP runs as a serverless edge service (Cloudflare Workers) that connects to desktop or cloud AI assistants (Claude Desktop, ChatGPT, Cursor) via SSE or Streamable HTTP. Browser-based WebMCP (via document.modelContext in Chrome) registers tools inside the user's active browser session. Media Lite builds a unified tool architecture that operates across both surfaces.

### How does Media Lite achieve sub-12ms global latency for MCP tool calls?
We deploy custom MCP servers directly to Cloudflare's serverless edge network across 300+ cities worldwide. Because tool execution occurs at the edge node closest to the AI assistant or user, there is zero origin roundtrip penalty, zero cold-start delay, and instant response streaming via Server-Sent Events (SSE).

### How does strict schema validation prevent hallucinations in tool calls?
Every tool input and output is governed by strict Zod schemas and JSON-RPC 2.0 specifications. LLMs receive precise natural-language parameter descriptions, enum boundaries, and typing constraints. If a model generates an invalid argument, the edge worker rejects it with an explicit schema correction before execution, guaranteeing 100% deterministic outputs.

### Why does 100% client infrastructure ownership matter for MCP?
Renting your agent endpoints from third-party SaaS platforms introduces vendor lock-in, recurring per-seat subscription taxes, and privacy risks as sensitive customer queries route through vendor servers. Media Lite delivers custom MCP servers under a CapEx ownership model: the code, edge workers, and schemas deploy directly to your Cloudflare account, running at cost with zero platform dependencies.

---

*Canonical Source: [https://medialite.ai/webmcp-explained](https://medialite.ai/webmcp-explained)*  
*Entity: Media Lite Solutions — Modern Edge & Multi-Agent Swarm Engineering*  
*Contact: hello@medialite.ai | Architecture Discovery: [https://medialite.ai/pricing](https://medialite.ai/pricing)*