🤔 What is webMCP?
webMCP (Web Machine Context & Procedure) is a new way to describe the actions and flows on your web pages in a small JSON block. Instead of AI agents “guessing” your UI by scraping, they can read your declared intents, inputs, selectors, and outcomes directly — making your site faster, more reliable, and ready for the emerging “agentic web.”
⚡ Why It Matters
- 💡 Agents complete tasks on your site without brittle scraping.
- ⚡ Faster automations and lower AI costs.
- 🛡️ Safer because you control what’s exposed.
- 🔗 Works alongside MCP (Model Context Protocol) for secure, server-side tools.
🧰 Prerequisites
- You can edit your theme/templates (WordPress, Laravel, Next.js, etc.).
- You can add a
<script type="application/json">block to your pages. - (Optional) an MCP server for sensitive, server-side actions.
✅ Step 1 — Add a Minimal webMCP Manifest
At the end of <head> or just before </body> on a page with a form (like “Contact”), add a block like this:
<script type="application/json" id="webmcp">
{
"spec": "webmcp/0.1",
"page": {
"url": "https://example.com/contact",
"title": "Contact — RightWebHost"
},
"context": {
"purpose": "Lead capture for consulting inquiries",
"entities": ["company", "contact_request"],
"auth": {"required": false}
},
"intents": [
{
"id": "submit_contact_form",
"description": "Send a consulting inquiry",
"inputs": [
{"name": "name", "type": "string", "required": true},
{"name": "email", "type": "email", "required": true},
{"name": "message", "type": "string", "required": true, "maxLength": 2000}
],
"ui": {
"selectors": {
"form": "#contactForm",
"name": "input[name='name']",
"email": "input[name='email']",
"message": "textarea[name='message']",
"submit": "button[type='submit']"
}
},
"policy": {
"rateLimit": "5/min",
"allowedOrigins": ["agents/*"],
"safety": ["no PII scraping", "submit-only", "no file upload"]
},
"outcome": {
"successSelector": ".alert-success",
"errorSelector": ".alert-danger"
}
}
]
}
</script>
This declares a safe intent (fill and submit your form) and how to detect success or errors.
🗺️ Step 2 — Expose Discoverability with llms.txt
At https://example.com/llms.txt put:
# Where to find AI-facing metadata
MCP: /mcp/manifest.json
webMCP: /webmcp/site.json
SITEMAP: /sitemap.xml
This is a simple “directory” for AI systems. The webMCP line points to your site-level index (next step).
🌐 Step 3 — Add a Site-Level webMCP Index
Create /webmcp/site.json with page and flow info:
{
"spec": "webmcp/0.1",
"site": {
"name": "RightWebHost",
"version": "2025.09",
"pages": [
{"url": "https://example.com/", "intents": ["search_docs"]},
{"url": "https://example.com/contact", "intents": ["submit_contact_form"]},
{"url": "https://example.com/insights/subscribe", "intents": ["subscribe_newsletter"]}
],
"flows": [
{
"id": "newsletter_signup",
"steps": [
{"intent": "subscribe_newsletter", "page": "https://example.com/insights/subscribe"},
{"intent": "confirm_optin", "page": "https://example.com/thanks"}
]
}
]
}
}
Now an agent can plan across pages without guessing navigation.
🔐 Step 4 — (Optional) Add an MCP Server for Secure Tools
If you need back-end access (like creating a support ticket or fetching invoices), expose an MCP manifest at /mcp/manifest.json and require OAuth scopes for security.
🧪 Step 5 — Validate Selectors & UX Cues
- Use stable selectors (e.g.,
data-testid) so style changes don’t break automations. - Ensure success/error elements exist after submission.
- Match your
policy.rateLimitserver-side.
🔒 Step 6 — Privacy & Safety Controls
- Start with low-risk intents (newsletter, search, contact).
- Never put secrets in webMCP JSON.
- Log agent actions and cap frequency.
🧭 Step 7 — Test with an Agent-Aware Browser
Check that the agent:
- Reads
llms.txtand finds your manifests. - Completes the intent end-to-end.
- Detects outcomes correctly and respects rate limits.
📝 Production Checklist
☑ llms.txt points to /webmcp/site.json and (optionally) /mcp/manifest.json
☑ Page-level <script id="webmcp"> with intents, inputs, selectors, outcomes
☑ Stable selectors (data-* attributes recommended)
☑ Server-side rate limiting + logs
☑ Version tags in your manifests (e.g., "version": "2025.09")
💡 WordPress Quick Tips (RightWebHost Insights)
- Add the manifest via a “Custom HTML” block on the page (or in
header.phpfor site-wide). - Keep form selectors stable in WPForms/Gravity Forms.
- Upload
llms.txtandwebmcp/site.jsonto your root via File Manager or SFTP.
🤝 Recommended Tools for Hosting & Deployment
If you’re experimenting with AI-native features like webMCP, you’ll want hosting that’s fast and flexible. Our picks:
- 🌥️ Cloudways Managed Cloud Hosting — great for scalable WordPress and Laravel apps.
- 🖥️ Hosting.com — reliable traditional hosting with enterprise support.
- 🚀 Hostinger options:
• Default Hosting
• Cloud Hosting
• Website Builder
• Agency Hosting
• VPS Hosting
These links support our work at RightWebHost Insights and help us keep producing in-depth guides like this one. 🙌
📝 About RightWebHost Insights
RightWebHost Insights is the blog section of RightWebHost.com, a consulting and service provider helping businesses choose and optimize the right hosting solutions since 2003. We publish actionable, up-to-date tutorials on hosting, cloud, and cutting-edge web technologies — blending real-world experience with hands-on, step-by-step guides to help you stay ahead of the curve.
