Model Context Protocol (MCP) & WebMCP: Building Agent-Ready Web Architecture
A practical research guide to MCP servers, browser-native WebMCP tools, TypeScript implementation, JSON-LD, API integration, security and performance benchmarking.
Model Context Protocol (MCP) is an open protocol that standardises communication between AI applications and external tools, services and data sources. WebMCP is an emerging browser-facing API that enables websites to expose structured JavaScript tools to compatible AI agents.
MCP connects AI applications to backend capabilities, while WebMCP exposes selected website functionality through the browser. Together, they create a foundation for secure, machine-accessible digital experiences.
- Understand MCP client-server architecture and its three major primitives.
- Learn how WebMCP exposes browser-level functionality.
- Build a lightweight local MCP server with TypeScript.
- Connect JSON-LD, JSON Schema and OpenAPI with MCP tools.
- Explore practical agentic web architecture.
- Understand latency benchmarking and production security.
- Prepare websites for AI-driven interactions without confusing MCP with SEO ranking factors.
1. The Internet Is Moving Towards an Agentic Architecture
For decades, the internet has primarily been designed around human interaction. Visitors navigate websites, click buttons, complete forms and manually interact with digital services.
Artificial intelligence is introducing another interaction model. Modern AI agents can interpret objectives, plan workflows, retrieve information, call APIs and interact with authorised digital systems.
Instead of asking an AI assistant how to book a flight, users increasingly expect software to compare options, prepare an itinerary and help complete the booking.
This creates a new architectural requirement: websites must become understandable and actionable by authorised machines without sacrificing usability, security or human control.
Three technologies are especially relevant:
- MCP: Standardised communication between AI applications and external systems.
- WebMCP: Structured browser-level tools exposed by websites.
- Structured data and APIs: Machine-readable descriptions of entities, information and application operations.
2. Understanding Model Context Protocol (MCP)
Introduced by Anthropic in November 2024, Model Context Protocol is an open standard designed to simplify connections between AI applications and external systems.
Before MCP, developers often needed separate integrations for different AI platforms. MCP introduces a common client-server architecture that reduces this fragmentation.
How MCP works
Assistant or application
Connection manager
Tools and resources
APIs and databases
The host manages the AI experience. The client maintains communication with an MCP server, which exposes defined capabilities to the application.
The three main MCP primitives
Executable operations such as searching products, calculating prices, creating records or retrieving information.
Contextual information such as documentation, database records and reference data.
Reusable prompt templates that help standardise particular interactions and workflows.
Communication and transport
MCP uses JSON-RPC 2.0 for its message format and separates protocol functionality from the transport used to exchange messages.
- stdio: Local communication through standard input and output streams. Commonly used when an AI host launches a local server process.
- Streamable HTTP: HTTP-based communication for remote MCP services, supporting streaming where appropriate.
Always check the current specification and SDK compatibility before deploying. Transport and authorisation requirements can evolve between specification versions.
3. What Is WebMCP and Why Does It Matter?
Traditional browser automation often relies on an agent identifying buttons, reading page content and simulating clicks. This can become unreliable when layouts or element labels change.
WebMCP introduces a structured alternative: websites can expose defined tools through a browser-facing JavaScript interface.
For example, an online retailer could expose:
- Search products.
- Check inventory.
- Calculate delivery estimates.
- Prepare a shopping basket.
- Apply an authorised discount.
Two WebMCP approaches
Uses HTML form annotations to expose existing form functionality as structured tools.
Useful for search, contact and standard submission workflows.
Uses JavaScript tool registration to expose custom application functionality.
Useful for interactive applications and complex operations.
MCP versus WebMCP
| Feature | MCP | WebMCP |
|---|---|---|
| Environment | Backend and application integrations | Browser and website |
| Communication | JSON-RPC 2.0 | Browser-native JavaScript interface |
| Transport | stdio and Streamable HTTP | Browser-level tool interaction |
| Tool discovery | MCP protocol | Browser tool registration |
| Resources | Supported | Not part of the current tool interface |
| Prompts | Supported | Not part of the current tool interface |
| Main use | External services and data | Website functionality |
.webp "Model Context Protocol (MCP) & WebMCP – Building Agent-Ready Web Architecture")
4. Designing an Agent-Ready Web Architecture
An agent-ready website provides machine-accessible information and controlled operations without removing its conventional human interface.
Human interface
Browser tools
Business logic
Agent integration
Databases and services
Five architectural layers
Experience layer: Maintain responsive layouts, accessible forms and conventional navigation.
Browser interaction layer: Expose appropriate client-side operations through WebMCP where supported.
Application API layer: Keep business rules, validation and permission checks in trusted application services.
MCP integration layer: Translate approved application capabilities into discoverable tools and resources.
Data layer: Connect databases, search systems, inventory services, payment providers and other infrastructure.
5. Building a Local MCP Server from Scratch
Let's create a lightweight technology documentation server using TypeScript and the MCP SDK.
Our example exposes three operations:
- Search documentation.
- Retrieve an article by ID.
- Calculate an estimated file transfer time.
Step 1: Install the requirements
Install a supported Node.js version and initialise a project.
mkdir agent-ready-mcp
cd agent-ready-mcp
npm init -y
npm install @modelcontextprotocol/server zod
npm install --save-dev typescript tsx @types/nodeStep 2: Configure TypeScript
Create a tsconfig.json file.
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"outDir": "dist"
},
"include": ["index.ts"]
}Set your package to use ES modules in package.json:
{
"type": "module",
"scripts": {
"start": "tsx index.ts"
}
}Step 3: Create the MCP server
Create index.ts. This version uses the standard Zod package import for broad compatibility with supported Zod installations.
import { McpServer } from "@modelcontextprotocol/server";
import { serveStdio } from "@modelcontextprotocol/server/stdio";
import { z } from "zod";
const server = new McpServer({
name: "tech-reflector-knowledge",
version: "1.0.0"
});
// Example documentation catalogue
const articles = [
{
id: "mcp-101",
title: "Understanding Model Context Protocol",
topic: "MCP",
description:
"Introduction to MCP architecture and tools."
},
{
id: "webmcp-101",
title: "Understanding WebMCP",
topic: "WebMCP",
description:
"Introduction to browser-based AI tools."
},
{
id: "agent-architecture",
title: "Agent-Ready Web Architecture",
topic: "Architecture",
description:
"Designing websites for authorised AI agents."
}
];
// TOOL 1: Search documentation
server.registerTool(
"search_documentation",
{
description:
"Search the technology documentation catalogue.",
inputSchema: z.object({
query: z.string().min(2).max(100)
})
},
async ({ query }) => {
const matches = articles.filter(article =>
(
article.title + " " +
article.topic + " " +
article.description
).toLowerCase().includes(query.toLowerCase())
);
return {
content: [{
type: "text",
text: JSON.stringify(matches, null, 2)
}]
};
}
);
// TOOL 2: Retrieve documentation
server.registerTool(
"get_documentation",
{
description:
"Retrieve a documentation article by its ID.",
inputSchema: z.object({
article_id: z.string().min(1)
})
},
async ({ article_id }) => {
const article = articles.find(
item => item.id === article_id
);
if (!article) {
return {
isError: true,
content: [{
type: "text",
text: "Article not found."
}]
};
}
return {
content: [{
type: "text",
text: JSON.stringify(article, null, 2)
}]
};
}
);
// TOOL 3: Calculate transfer time
server.registerTool(
"calculate_transfer_time",
{
description:
"Estimate theoretical file transfer time in seconds.",
inputSchema: z.object({
sizeMB: z.number().positive().max(100000),
speedMbps: z.number().positive().max(1000000)
})
},
async ({ sizeMB, speedMbps }) => {
const seconds = (sizeMB * 8) / speedMbps;
return {
content: [{
type: "text",
text: JSON.stringify({
fileSizeMB: sizeMB,
connectionMbps: speedMbps,
estimatedSeconds:
Number(seconds.toFixed(3)),
note:
"Theoretical estimate excluding real-world overhead."
})
}]
};
}
);
// Start the local MCP server
serveStdio(() => server);This uses the conventional package entry point instead of explicitly importing a version-specific subpath. It is suitable for standard Zod package installations. Confirm that your installed SDK and Zod versions satisfy their peer dependencies.
Step 4: Run the server
npm startThe local server communicates through standard input and output streams.
Step 5: Test using MCP Inspector
npx @modelcontextprotocol/inspector npx tsx index.tsConnect through the Inspector and examine the available tools. Test search_documentation with the query "WebMCP". Then test invalid inputs and missing article IDs.
Successful testing should confirm that:
- Tool names are discoverable.
- Input schemas are correctly exposed.
- Valid requests return structured content.
- Invalid inputs are rejected.
- Errors are handled predictably.
6. Exposing Website Functions Through WebMCP
Imagine that the documentation service also has a conventional website. Users can search articles through a standard search interface.
WebMCP can expose this existing functionality as a browser-level tool.
The following is an illustrative implementation of the imperative WebMCP approach. Confirm the current browser API names, schema requirements and execution signature against the live specification before using it in production.
const searchTool = {
name: "search_tech_articles",
description:
"Search published technology articles by topic.",
inputSchema: {
type: "object",
properties: {
query: {
type: "string",
description:
"The technology topic to search for."
}
},
required: ["query"]
},
annotations: {
readOnlyHint: true
},
execute: async ({ query }) => {
const response = await fetch(
"/api/articles?q=" +
encodeURIComponent(query)
);
if (!response.ok) {
throw new Error("Article search failed");
}
return await response.json();
}
};
if (document.modelContext) {
await document.modelContext.registerTool(searchTool);
}The workflow is straightforward:
- The browser checks whether the WebMCP interface exists.
- The website registers its search tool.
- The agent supplies structured arguments.
- The tool calls the existing application API.
- The application returns the search results.
Conventional website functionality must remain available even when WebMCP is unsupported.
7. JSON-LD, API Schemas and MCP: Connecting the Data Layer
Machine-readable information is essential for interoperable web architecture. JSON-LD, Schema.org, OpenAPI, JSON Schema and MCP contribute different capabilities.
| Technology | Purpose | Example |
|---|---|---|
| JSON-LD | Describe entities and relationships | Article, Product, Organisation |
| Schema.org | Shared vocabulary for structured data | TechArticle, Product |
| OpenAPI | Describe HTTP API contracts | GET /api/products |
| JSON Schema | Define valid data structures | Required fields and types |
| MCP | Expose agent-accessible capabilities | search_products |
| WebMCP | Expose browser-level website tools | search_tech_articles |
Example: Article information using JSON-LD
{
"@context": "https://schema.org",
"@type": "TechArticle",
"headline": "Understanding WebMCP",
"description":
"A guide to browser-based AI agent tools.",
"author": {
"@type": "Organization",
"name": "Tech Reflector"
},
"publisher": {
"@type": "Organization",
"name": "Tech Reflector"
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "ARTICLE_CANONICAL_URL"
},
"inLanguage": "en-GB",
"keywords": [
"WebMCP",
"Model Context Protocol",
"Agentic AI"
]
}Replace ARTICLE_CANONICAL_URL with the exact published article URL. JSON-LD describes the article but does not create an MCP server or grant an AI agent permission to execute operations.
Example: Map an API to an MCP tool
Consider a hypothetical product endpoint:
GET /api/products?q=wireless+headphonesExample response:
{
"products": [
{
"id": "P101",
"name": "Wireless Headphones",
"price": 2499,
"currency": "INR",
"availability": "in_stock"
}
]
}The MCP layer can expose the same operation using a defined tool schema:
{
"name": "search_products",
"description":
"Search the authorised product catalogue.",
"inputSchema": {
"type": "object",
"properties": {
"query": {
"type": "string"
}
},
"required": ["query"]
}
}The MCP handler calls the existing API and returns a controlled response.
8. Real-World Applications and Industry Examples
GitHub and developer workflows
The GitHub MCP Server demonstrates how repository information and development capabilities can be exposed to compatible AI clients. Depending on configured permissions, developers can work with supported repository, issue, pull-request and code-search operations.
Cloud infrastructure
MCP integrations can help authorised AI applications retrieve deployment information, investigate errors and interact with development infrastructure. Access should remain restricted to the capabilities required by each workflow.
E-commerce and conversational shopping
An agent-ready retailer could support a workflow in which an AI assistant searches the live catalogue, checks stock, compares prices and prepares a shopping basket.
A purchase should still require appropriate user authorisation and payment controls.
Customer support automation
Support agents can retrieve knowledge-base articles, check ticket status and prepare responses through defined tools. Human approval can remain mandatory before issuing refunds or changing customer account information.
- Well-defined tool contracts.
- Reliable underlying APIs.
- Appropriate permissions.
- Useful error handling.
- Auditability and human oversight.
9. MCP and WebMCP Latency Benchmarks
Performance is important when designing agentic applications. However, there is no universal latency figure for MCP or WebMCP.
Response times depend on transport, network conditions, server initialisation, API processing, database performance, payload size and model reasoning.
Where latency originates
Illustrative relative indicators, not measured benchmark results.
Build a reproducible benchmark
Compare the same business operation through:
- Direct application API.
- Local MCP server over stdio.
- Remote MCP server over Streamable HTTP.
Keep the database, query, payload and workload consistent. Measure cold-start and warm-request performance separately.
Node.js HTTP benchmark
import { performance } from "node:perf_hooks";
const URL =
"http://localhost:3000/api/articles?q=MCP";
const ITERATIONS = 100;
async function benchmark() {
const samples = [];
// Warm-up
for (let i = 0; i < 10; i++) {
const response = await fetch(URL);
if (!response.ok) throw new Error("Warm-up failed");
await response.arrayBuffer();
}
for (let i = 0; i < ITERATIONS; i++) {
const start = performance.now();
const response = await fetch(URL);
if (!response.ok) {
throw new Error("Request failed");
}
await response.arrayBuffer();
samples.push(performance.now() - start);
}
samples.sort((a, b) => a - b);
const percentile = p =>
samples[Math.ceil(p * samples.length) - 1];
const mean =
samples.reduce((a, b) => a + b, 0) /
samples.length;
console.log({
iterations: ITERATIONS,
meanMs: Number(mean.toFixed(2)),
medianMs: Number(percentile(0.50).toFixed(2)),
p95Ms: Number(percentile(0.95).toFixed(2)),
maxMs: Number(samples[samples.length - 1].toFixed(2))
});
}
benchmark().catch(console.error);For a fair comparison, adapt the benchmark so each route performs the same operation and returns equivalent results. The script above measures HTTP request latency; it is not, by itself, an MCP-versus-WebMCP benchmark.
Benchmark evaluation matrix
| Metric | Measurement |
|---|---|
| Cold-start | Initialisation and first successful request |
| Warm latency | Response time after warm-up |
| p50 | Median response time |
| p95 | 95th-percentile response time |
| Throughput | Successful operations per second |
| Error rate | Failed requests divided by total requests |
| Payload size | Transferred bytes |
| Token overhead | Tokens used by tool descriptions and outputs |
10. MCP Security: Protecting Agentic Applications
AI tool access creates a new security boundary. Incorrectly designed integrations can expose sensitive information, execute unauthorised operations or create prompt-injection vulnerabilities.
Give each tool only the permissions it requires.
Use properly validated credentials and supported OAuth flows.
Validate all arguments against strict schemas.
Require confirmation for consequential actions.
Record tool calls, identities and outcomes.
Treat retrieved content as untrusted data.
Important authorisation controls
- Validate access tokens for the intended MCP resource.
- Do not blindly forward MCP client tokens to upstream APIs.
- Use supported OAuth security practices and PKCE where required.
- Protect remote endpoints with HTTPS.
- Store credentials securely and prefer short-lived access tokens.
- Implement Origin validation and appropriate network protections for HTTP deployments.
11. Expert Engineering Recommendations
The official MCP and WebMCP documentation, combined with established application-security practices, points towards several practical engineering priorities.
1. Start with application APIs
Create predictable, documented and versioned APIs before introducing an MCP integration.
2. Write precise tool descriptions
Define purpose, arguments, expected results and limitations. Avoid vague tool names and ambiguous parameters.
3. Use progressive enhancement
Websites must continue to work conventionally when WebMCP is unavailable.
4. Separate read and write operations
Searching information and deleting records require different permissions and approval processes.
5. Measure complete workflows
Evaluate total task-completion time, not just protocol response time. Excessive tool calls and model reasoning can dominate the overall experience.
Official technical resources
- MCP Official Documentation
- MCP TypeScript SDK v2
- Chrome WebMCP Developer Guide
- WebMCP Community Group Specification
- OWASP LLM Application Security
- MCP Reference Servers
12. Agentic Web SEO: SEO, AEO, GEO and LLMO
AI-powered discovery is changing how users access information. Traditional SEO remains essential, but publishers and developers can also improve the machine readability and usefulness of their digital content.
SEO: Search Engine Optimisation
Maintain crawlable pages, descriptive titles, canonical URLs, meaningful headings, internal links and high-quality content.
AEO: Answer Engine Optimisation
Provide direct answers, clear definitions, concise explanations and useful question-based content.
GEO: Generative Engine Optimisation
Publish original insights, transparent research methods, credible references and well-organised information.
LLMO: Large Language Model Optimisation
Use consistent terminology, descriptive metadata, structured relationships and clear source attribution.
Does MCP improve SEO rankings?
No. MCP is an interoperability protocol, not a direct Google ranking factor. Installing an MCP server does not automatically improve rankings or guarantee citations in AI-generated answers.
For a publisher, a strong foundation includes:
- Accurate Article and Organisation structured data.
- Clear author and editorial information.
- Stable URLs and accessible content.
- Useful internal links and topic organisation.
- Documented APIs where a genuine use case exists.
- Carefully scoped tools for authorised content discovery.
You do not need an MCP server simply to publish a blog. Crawlable articles, accurate structured data and genuinely useful information should come first. MCP becomes valuable when you have a service or workflow that compatible AI clients need to access.
13. The Future of Agent-Accessible Websites
The web is likely to support several interaction models simultaneously. Humans will continue using visual interfaces, search engines will crawl pages and AI assistants will increasingly use structured information and authorised tools.
Imagine a travel platform where an agent can:
- Retrieve destination information.
- Search accommodation through backend tools.
- Compare transport options through APIs.
- Interact with supported browser tools.
- Prepare an itinerary for user approval.
Websites will not necessarily disappear. Their capabilities will become accessible through more interaction models.
Five developments worth watching
- Standardised agent-to-service interfaces.
- Improved browser-native AI interactions.
- Stronger identity and consent frameworks.
- More reliable structured tool discovery.
- Better agent observability and performance measurement.
14. Key Takeaways
- MCP standardises connections between AI applications and external services.
- WebMCP exposes browser-level website functionality.
- Both technologies complement each other.
- JSON-LD describes entities and relationships.
- OpenAPI documents HTTP interfaces.
- JSON Schema validates data structures.
- Existing application APIs should remain the source of trusted business logic.
- stdio is useful for local MCP servers; Streamable HTTP supports remote services.
- Security requires authentication, authorisation, least privilege and human oversight.
- Performance claims require reproducible benchmarks.
- MCP does not automatically improve SEO rankings.
- Progressive enhancement is essential while WebMCP evolves.
15. Conclusion: Build for Both Humans and AI Agents
The evolution of the web is entering an important architectural phase. Digital applications are no longer designed exclusively around human navigation. They are increasingly expected to provide structured and controlled interfaces for intelligent software agents.
Model Context Protocol provides a common foundation for connecting AI applications to external tools, services and data. WebMCP extends this direction into the browser, allowing websites to expose selected interactive capabilities through structured JavaScript tools.
However, adopting these technologies requires more than adding a new protocol. Developers must consider API design, data modelling, permissions, reliability, security and measurable performance.
The practical strategy is to build a strong application foundation, expose well-defined APIs, introduce MCP where agent integration creates genuine value and experiment with WebMCP as browser support matures.
The future-ready website will not merely tell an AI agent what it contains. It will provide a secure and understandable way for that agent to accomplish useful tasks on behalf of its user.
That is the foundation of the agent-ready web.
16. Frequently Asked Questions (FAQs)
1. What is Model Context Protocol (MCP)?
MCP is an open standard that allows AI applications to connect with external tools, services and data sources through a common client-server architecture using JSON-RPC 2.0.
2. What is WebMCP?
WebMCP is an emerging browser API that allows websites to expose structured JavaScript tools to compatible AI agents.
3. What is the difference between MCP and WebMCP?
MCP connects AI applications with backend services through standardised transports. WebMCP exposes selected website functionality through a browser-native interface.
4. How do I build an MCP server using TypeScript?
Install the MCP TypeScript server SDK, create an McpServer instance, register tools with validated input schemas and connect the server using an appropriate transport.
5. Is WebMCP an official W3C standard?
No. As of November 2026, WebMCP is a Web Machine Learning Community Group Draft, not an adopted W3C Standard.
6. Can MCP improve website SEO?
MCP is not a direct Google ranking factor. It can expose application capabilities to compatible AI clients, but technical SEO and content quality remain separate requirements.
7. What is the role of JSON-LD in MCP architecture?
JSON-LD describes entities and their relationships in machine-readable form. MCP exposes tools and capabilities. They complement each other but serve different purposes.
8. What is the difference between MCP and OpenAPI?
OpenAPI documents HTTP API endpoints and operations. MCP provides a protocol for AI applications to discover and interact with tools, resources and prompts.
9. Is MCP suitable for small businesses?
Yes. It can support product search, customer support, inventory lookup and appointment management when a business has useful digital services to expose.
10. Is MCP secure?
MCP does not automatically provide application security. Developers must implement authentication, authorisation, token validation, input validation, least privilege and human approval for sensitive actions.
11. Does WebMCP replace traditional browser automation?
No. WebMCP provides structured access to selected website actions. Conventional browser automation remains useful where WebMCP is unavailable.
12. What is the best transport for a local MCP server?
stdio is generally suitable for local MCP servers launched by an AI host. Streamable HTTP is generally suitable for remote MCP services.
17. Research References and Further Reading
Consult these primary technical resources for implementation details and specification updates.
