Declarative & Imperative API integration for agent-ready web applications.
Quick Spec Summary Standard: W3C Community Group Draft (Google + Microsoft, Chrome 146 early preview) APIs: Declarative (HTML form attributes) + Imperative (navigator.modelContext.registerTool()) Scope: Client-side, browser-native — no backend server required Auth: Inherits browser session (same-origin policy enforced) Security: HTTPS required, CSP-compatible, user confirmation for write operations
For standard HTML forms — the lowest-friction path to agent-readiness. We annotate existing forms with toolname and tooldescription attributes, write optimized tool descriptions that maximize agent discoverability, and validate the auto-generated schema against real agent call patterns.
<!-- Before -->
<form action='/contact' method='POST'>
<input name='email' type='email' required>
<button type='submit'>Submit</button>
</form>
<!-- After: WebMCP Declarative API -->
<form action='/contact' method='POST'
toolname='bookConsultation'
tooldescription='Book a free consultation.
Accepts: name (text), email (email), serviceType
(enum: seo|webdev|audit). Returns: confirmation.'>
<input name='email' type='email' required>
<button type='submit'>Submit</button>
</form>
For dynamic, data-driven tools that need custom execution logic. We design inputSchema objects following JSON Schema draft-07, implement execute() functions with proper async handling and error boundaries, and configure readOnly flags correctly for the browser confirmation model.
// WebMCP Imperative API Example
navigator.modelContext.registerTool({
name: 'searchProducts',
readOnly: true,
description: 'Search product catalog...',
inputSchema: {
type: 'object',
properties: {
query: { type: 'string' },
maxPrice: { type: 'number' },
inStock: { type: 'boolean' }
},
required: ['query']
},
async execute({ query, maxPrice, inStock }) {
const res = await fetch(`/api/search?q=${query}`);
return { content: [{ type: 'text',
text: await res.text() }] };
}
});
WebMCP is platform-agnostic — it runs client-side in the browser and does not depend on your backend stack. We have tested and documented implementation patterns for:
Every implementation is tested using the Model Context Tool Inspector (Chrome DevTools extension) before handover. We document:
We follow W3C security guidance and implement defense-in-depth across all tool registrations:
All read/query tools set readOnly: true. All write/submit tools set readOnly: false to enforce browser confirmation.
JSON Schema validates client-side for agent UX. Every tool endpoint validates and sanitizes server-side.
Tool-backing endpoints get rate limits calibrated for agent traffic patterns (higher frequency than human form submissions).
execute() functions use try/catch with user-safe messages — no stack traces or internal paths in tool responses.
SubmitEvent.agentInvoked flag captured and logged for audit trail and analytics.
Only public-safe capabilities are registered. Admin endpoints are never exposed as tools.
We assess your current stack, form hygiene, HTTPS/CSP setup, and JS architecture, then deliver a detailed implementation plan with effort estimates per tool.
Request A Technical AuditWe respond within 24 hours.