webmcp-sdk
Make any website agent-ready for Chrome 146's navigator.modelContext.
The first implementation of the W3C WebMCP standard. Add React hooks and Express middleware to expose your site's capabilities to autonomous AI agents browsing the agent-ready web.
Key Features
W3C WebMCP Standard
Implements the emerging W3C WebMCP specification. One SDK to make your site compliant with the agent-readable web standard before it becomes mandatory.
Chrome 146 Compatible
First SDK to support Chrome 146's navigator.modelContext API. When browsers ship built-in AI model access, your site is already ready for agents browsing with full context.
React Hooks
Drop-in hooks for React apps. useWebMCP(), useAgentContext(), useModelContext() — add agent-readiness to any component in one line.
Express Middleware
One-line Express.js middleware exposes MCP endpoints on your existing API. Agents discover your capabilities, call your functions, and pay via x402 — zero code restructuring required.
WebMCP SEO Ownership
We own the WebMCP namespace. Target keywords: webmcp, webmcp sdk, navigator.modelContext, w3c webmcp, agent ready website, webmcp chrome 146.
Read our WebMCP articles →Usage Example
import { WebMCPProvider, useWebMCP } from 'webmcp-sdk';
// 1. Wrap your app
export default function App() {
return (
<WebMCPProvider
capabilities={['read', 'interact', 'purchase']}
x402Endpoint="/api/pay"
>
<YourApp />
</WebMCPProvider>
);
}
// 2. Use in any component
function ProductPage({ product }) {
const { agentContext, isAgentBrowsing } = useWebMCP();
return (
<div data-mcp-context={JSON.stringify(product)}>
{isAgentBrowsing && (
<div data-mcp-action="purchase" data-mcp-price={product.price}>
Agent-optimized purchase endpoint ready
</div>
)}
<h1>{product.name}</h1>
</div>
);
}
// 3. Express middleware (backend)
import { webmcpMiddleware } from 'webmcp-sdk/express';
app.use('/mcp', webmcpMiddleware({
tools: [
{ name: 'search', description: 'Search products', handler: searchProducts },
{ name: 'buy', description: 'Purchase item', handler: buyProduct, requiresPayment: true },
],
x402Config: { wallet: agentWallet },
}));Community Plugins
Platform adapters built on webmcp-sdk. Want to contribute? Open a PR.