Next.js SDKChrome 146+

Make Your Next.js App
Agent-Ready

Google's WebMCP protocol shipped in Chrome 146. This SDK gives you React hooks, App Router integration, and the only testing suite that proves AI agents use your tools correctly.

Quick Start

MIT licensed · Free SDK · Paid plans add testing & optimization

ProductSearch.tsx

1  'use client';
2  import { useTool } from '@webmcp/next';
3  
4  export function ProductSearch() {
5    const { isRegistered } = useTool({
6      name: 'search_products',
7      description: 'Search catalog by keyword',
8      inputSchema: {
9        type: 'object',
10       properties: {
11         query: { type: 'string' },
12       },
13     },
14     execute: async (params) => {
15       const res = await fetch(`/api/search?q=${params.query}`);
16       return { content: [{ type: 'text', text: await res.text() }] };
17     }
18   });
19 }

Model Context Tools

1 active

search_products

Search catalog by keyword

type:imperative

params:query (string, required)

schema:Valid ✓

Terminal

$ npx webmcp-cli audit http://localhost:3000

✓ Tools found: 1 · Agent Readiness Score: 87/100 · ████████████████████░░

WebMCP in 30 Seconds

A browser protocol by Google and Microsoft. Websites publish structured tools AI agents discover and invoke directly — typed parameters, validated inputs, structured responses. One API under the hood:

The Raw Browser API

WebMCP Spec

navigator.modelContext.registerTool({
  name: 'search_flights',
  description: 'Search available flights between two airports by date',
  inputSchema: {
    type: 'object',
    properties: {
      origin:      { type: 'string', description: 'Departure IATA airport code' },
      destination: { type: 'string', description: 'Arrival IATA airport code' },
      date:        { type: 'string', description: 'Departure date (YYYY-MM-DD)' }
    },
    required: ['origin', 'destination', 'date']
  },
  execute: async ({ origin, destination, date }) => {
    const flights = await fetch(`/api/flights?from=${origin}&to=${destination}&date=${date}`);
    const data = await flights.json();
    return { content: [{ type: 'text', text: JSON.stringify(data) }] };
  }
});

This SDK wraps the raw API with React lifecycle management, TypeScript inference, SSR safety, and testing tools that prove your implementation works.

Full spec →

From Zero to Agent-Ready in 4 Steps

10 minutes to your first working WebMCP tool.

Prerequisites

WebMCP is available today in Chrome 146+ behind a flag.

1. Open Chrome 146 (Beta channel or later)

2. Navigate to chrome://flags/#model-context-protocol

3. Enable the flag and restart Chrome

💡Early Preview

WebMCP is co-authored by Google and Microsoft and shipping to stable Chrome soon. You're building for the future — and you'll be first.

Install

$ npm install @webmcp/next

Add Provider

app/layout.tsx

import { WebMCPProvider } from '@webmcp/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <WebMCPProvider
          siteId="your-site-id"     // Optional: enables analytics
          fallback="graceful"       // Degrades silently
        >
          {children}
        </WebMCPProvider>
      </body>
    </html>
  );
}

Register Your First Tool

'use client' — Tools MUST register in Client Components (browser context required).

app/components/ProductSearch.tsx

'use client';

import { useTool } from '@webmcp/next';

export function ProductSearch() {
  const { isRegistered } = useTool({
    name: 'search_products',
    description: 'Search the product catalog by keyword, category, or price range',
    inputSchema: {
      type: 'object',
      properties: {
        query:    { type: 'string', description: 'Search keywords' },
        category: { type: 'string', description: 'Product category',
                    enum: ['electronics', 'clothing', 'home', 'sports'] },
        maxPrice: { type: 'number', description: 'Maximum price in USD' }
      },
      required: ['query']
    },
    execute: async ({ query, category, maxPrice }) => {
      const res = await fetch(
        `/api/products/search?q=${query}&cat=${category || ''}&max=${maxPrice || ''}`
      );
      const products = await res.json();
      return { content: [{ type: 'text', text: JSON.stringify(products) }] };
    }
  });

  return (
    <form action="/search">
      <input name="q" placeholder="Search products..." />
      <button type="submit">Search</button>
    </form>
  );
}

✦ Bonus: Check Your Score

webmcp-cli audit

$ npx webmcp-cli audit http://localhost:3000

WebMCP Audit — http://localhost:3000

Tools found: 1

├── search_products ✅ registered

│ ├── Description quality: Good (specific verb, clear scope)

│ ├── Schema completeness: 3/3 params described

│ └── Security: No issues detected

Agent Readiness Score: 71 / 100

Improvements available:

├── +8 pts: Add toolparamdescription to enum values

├── +6 pts: Add readOnlyHint annotation

└── +5 pts: Add a second tool to cover more user intents

Run `webmcp-cli audit --deep` for prompt coverage testing (Pro)

Where Things Run

The WebMCP + Next.js architecture. Tools register in the browser. Heavy lifting happens on the server. WebMCP makes it feel like writing normal React.

Browserwhere WebMCP lives

Client Components ('use client')

├── useTool() → registerTool()

├── useToolForm() → HTML attributes

├── useAgentEvent() → event listeners

└── Auto-cleanup on unmount

WebMCPProvider

├── Feature detection

├── SSR safety (no-op on server)

└── Analytics + scoring context

fetch() / Server Action

Server

Server Components

├── Prepare data, render UI

└── Cannot register WebMCP tools

Server Actions

├── Backend handlers for tool execution

├── Database, APIs, business logic

└── Called by tool execute() via fetch

CDN / Edge

Edge Middleware

├── Rate-limit API routes tools call

├── Validate request signatures

└── Geographic routing for tool backends

📋Protocol Fact: Why Client Components?

The WebMCP spec requires a browsing context for tool registration. navigator.modelContext only exists in the browser. This is how the protocol works — and it's actually GOOD architecture: your tool registration is declarative (React components), your tool execution can call any server-side resource, and your UI gracefully degrades when WebMCP isn't available.

The Hybrid Pattern

app/products/page.tsx

Server Component

import { ProductSearch } from './ProductSearch';

export default async function ProductsPage() {
  const categories = await db.categories.findMany();
  const featured = await db.products.findMany({
    where: { featured: true }, take: 10
  });

  return (
    <div>
      <h1>Products</h1>
      <ProductSearch
        categories={categories}
        featured={featured}
      />
    </div>
  );
}

app/products/ProductSearch.tsx

Client Component

'use client';
import { useTool } from '@webmcp/next';

export function ProductSearch({ categories, featured }) {
  useTool({
    name: 'search_products',
    description: 'Search products...',
    inputSchema: {
      type: 'object',
      properties: {
        query: { type: 'string' },
        category: {
          type: 'string',
          enum: categories.map(c => c.slug)
        }
      }
    },
    execute: async (params) => {
      const res = await fetch('/api/products/search', {
        method: 'POST',
        body: JSON.stringify(params)
      });
      return { content: [{ type: 'text',
        text: await res.text() }] };
    }
  });

  return <form>{/* Search UI */}</form>;
}

Server Component fetches categories from DB → passes to Client Component → Client Component uses them as enum values in the tool schema. Best of both worlds.

Your Existing Forms Are Already 80% There

WebMCP has a declarative API that turns standard HTML forms into agent-callable tools — no JavaScript required. Just add a few attributes.

Beforeapp/contact/page.tsx

16 lines

export default function ContactPage() {
  return (
    <form action="/api/contact" method="POST">
      <label htmlFor="name">Full Name</label>
      <input id="name" name="name" required />
 
      <label htmlFor="email">Email Address</label>
      <input id="email" name="email" type="email" required />
 
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required />
 
      <button type="submit">Send</button>
    </form>
  );
}

+5 attrs

+5 attributes added

After (6 attributes)app/contact/page.tsx

22 lines · +5

export default function ContactPage() {
  return (
    <form action="/api/contact" method="POST"
      toolname="send_contact_message"
      tooldescription="Send a message to support"
    >
      <label htmlFor="name">Full Name</label>
      <input id="name" name="name" required
        toolparamdescription="Full name of sender"
      />
      <label htmlFor="email">Email Address</label>
      <input id="email" name="email" type="email" required
        toolparamdescription="Email for reply"
      />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required
        toolparamdescription="The message content"
      />
      <button type="submit">Send</button>
    </form>
  );
}

✅Key Insight

The browser automatically computes a JSON Schema from these attributes. An <input type='email'> becomes { type: 'string', format: 'email' }. A <select> becomes an enum. You get structured tool definitions for free.

Or use the React wrapper

Same result with TypeScript prop validation and analytics integration:

app/contact/ContactForm.tsx

'use client';
import { ToolForm, ToolInput, ToolTextarea } from '@webmcp/next';

export function ContactForm() {
  return (
    <ToolForm
      name="send_contact_message"
      description="Send a message to support"
      action="/api/contact"
    >
      <ToolInput name="sender_name" label="Full Name" required
        paramDescription="Full name of the sender" />
      <ToolInput name="sender_email" label="Email" type="email" required
        paramDescription="Email for reply" />
      <ToolTextarea name="message_body" label="Message" required
        paramDescription="The message content" />
      <button type="submit">Send Message</button>
    </ToolForm>
  );
}

Type-Safe from Schema to Execution

Define your tool's input schema once as a TypeScript interface. WebMCP generates the JSON Schema for WebMCP automatically and infers the execute function's parameter types.

lib/tools/flight-search.ts

import { defineTool } from '@webmcp/next';

// Define your input type
interface FlightSearchParams {
  origin: string;       // Departure IATA code
  destination: string;  // Arrival IATA code
  date: string;         // YYYY-MM-DD format
  passengers?: number;  // Default: 1
  class?: 'economy' | 'business' | 'first';
}

// defineTool infers execute params from the interface
export const flightSearchTool = defineTool<FlightSearchParams>({
  name: 'search_flights',
  description: 'Search available flights between two airports',
  // inputSchema auto-generated from FlightSearchParams
  execute: async (params) => {
    // params is fully typed as FlightSearchParams
    // params.origin   → string (autocomplete works)
    // params.class    → 'economy' | 'business' | 'first' | undefined
    const flights = await searchFlightsAPI(params);
    return { content: [{ type: 'text', text: JSON.stringify(flights) }] };
  },
  annotations: {
    readOnlyHint: true,   // Doesn't modify data
    openWorldHint: true, // External API results
  }
});

Use in a component — 3 lines:

app/flights/FlightSearch.tsx

'use client';
import { useTool } from '@webmcp/next';
import { flightSearchTool } from '@/lib/tools/flight-search';

export function FlightSearch() {
  const { isRegistered } = useTool(flightSearchTool);
  return <div>{/* Flight search UI */}</div>;
}

What the browser sees (auto-generated JSON Schema):

Generated JSON Schema

Auto-generated

{
  name: "search_flights",
  description: "Search available flights between two airports",
  inputSchema: {
    type: "object",
    properties: {
      origin:      { type: "string", description: "Departure IATA code" },
      destination: { type: "string", description: "Arrival IATA code" },
      date:        { type: "string", description: "YYYY-MM-DD format" },
      passengers:  { type: "number", description: "Default: 1" },
      class:       { type: "string",
                     enum: ["economy", "business", "first"] }
    },
    required: ["origin", "destination", "date"]
  }
}

Transparency builds trust. You can always see exactly what the browser receives.

Server Actions Power Your Tools

WebMCP tools register in the browser. But the heavy lifting — database writes, payments, emails — happens on the server. Next.js Server Actions are the perfect bridge.

⚠️Architecture Clarity

A Server Action is NOT a WebMCP tool. A Server Action is what a WebMCP tool's execute function CALLS. The tool lives in the browser. The action lives on the server. WebMCP connects them.

app/actions/booking.ts

Server

'use server';

import { revalidatePath } from 'next/cache';

export async function createBooking(data: {
  date: string; time: string;
  service: string; name: string;
  email: string;
}) {
  // Full server access
  const booking = await db.bookings
    .create({ data });

  await sendEmail({
    to: data.email,
    subject: `Booking confirmed`,
  });

  revalidatePath('/appointments');

  return {
    id: booking.id,
    confirmed: true,
    message: `Booking confirmed`
  };
}

app/booking/BookingTool.tsx

Client

'use client';
import { useTool } from '@webmcp/next';
import { createBooking } from
  '../actions/booking';

export function BookingTool({
  availableServices,
  availableTimes
}) {
  useTool({
    name: 'book_appointment',
    description: 'Book an appointment',
    inputSchema: {
      type: 'object',
      properties: {
        service: {
          type: 'string',
          enum: availableServices
        },
        date: { type: 'string' },
        time: { type: 'string',
          enum: availableTimes },
        name: { type: 'string' },
        email: { type: 'string' }
      },
      required: ['service',
        'date', 'time', 'name', 'email']
    },
    annotations: {
      destructiveHint: true
    },
    execute: async (params) => {
      const result = await
        createBooking(params);
      return { content: [{
        type: 'text',
        text: JSON.stringify(result)
      }] };
    }
  });

  return <div>{/* Form UI */}</div>;
}

User speaks to agent→Agent invokes tool→Server Action runs→DB + email→Result to agent

Hooks API

Each hook maps 1:1 to a WebMCP browser API. Click to expand.

5 hooks

HookSignaturePurpose

useTool({ name, description, inputSchema, execute, annotations? })

Wrapsnavigator.modelContext.registerTool() / unregisterTool()

useToolForm({ name, description, autoSubmit?, onAgentSubmit? })

Wrapstoolname, tooldescription HTML attributes

Provide contextual information to agents about the current page state. Update as UI state changes.

setContext('Found 23 flights from JFK to LAX')

Wrapsnavigator.modelContext.provideContext() / clearContext()

Listen to WebMCP lifecycle events for visual feedback when agents interact with your tools.

useAgentEvent('toolactivated', (e) => showLoading(e.tool.name))

Wrapswindow.addEventListener('toolactivated', ...)

Detect WebMCP availability for conditional rendering. Your app works perfectly without it.

if (!isSupported) return null;

Wraps"modelContext" in navigator

The conversion moment

Registration Is Easy.
Knowing It Works Is Hard.

You've registered your tools. But will Gemini actually invoke search_products when a user says “find me running shoes under $100”? You can't answer that without testing across real models.

Schema Linting

Free

No LLM calls, no API key — runs in under 1 second.

webmcp-cli lint

$ npx webmcp-cli lint src/lib/tools/

Linting 4 tool definitions...

search_products

├── ✅ Name: specific verb + noun

├── ✅ Description: clear scope, positive framing

├── ⚠️ category enum missing descriptions

└── ✅ All params have descriptions

book_appointment

├── ✅ Name: specific verb + noun

├── ✅ Description: clear scope

├── ❌ SECURITY: destructive action without requestUserInteraction()

└── ⚠️ 5 required params — consider which are truly required

Results: 1 error, 2 warnings, 12 passed

Prompt Coverage

Pro

Test across Gemini, GPT-4, and Claude simultaneously.

webmcp-cli test

$ npx webmcp-cli test --coverage --models gemini,gpt-4,claude

Testing 4 tools × 120 prompts × 3 models = 1,440 test cases

┌──────────────────┬────────┬───────┬────────┬─────────┐

│ Tool │ Gemini │ GPT-4 │ Claude │ Overall │

├──────────────────┼────────┼───────┼────────┼─────────┤

│ search_products │ 94% │ 91% │ 89% │ 91.3% │

│ get_product │ 88% │ 92% │ 86% │ 88.7% │

│ book_appointment │ 96% │ 93% │ 95% │ 94.7% │

│ cancel_booking │ 82% │ 78% │ 81% │ 80.3% │

└──────────────────┴────────┴───────┴────────┴─────────┘

⚠️ cancel_booking: Low coverage (80.3%)

├── 12 prompts routed to book_appointment instead

│ Fix: Add "cancel", "undo", "remove" to description

├── 6 prompts: agent asked for booking_id but user gave name

│ Fix: Make booking_id optional, add customer_name param

└── Estimated score impact: fixing these → +9 points

CI/CD Gate

Team— Block deploys that break agent interactions

.github/workflows/webmcp.yml

name: WebMCP CI
on: [push, pull_request]
jobs:
  agent-readiness:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npm run build
      - run: |
          npx webmcp-cli ci \
            --url http://localhost:3000 \
            --min-score 75 \
            --coverage-threshold 85 \
            --models gemini
        env:
          WEBMCP_API_KEY: ${{ secrets.WEBMCP_API_KEY }}

Your single benchmark

0/ 100

Agent Readiness Score

Top 12% of e-commerce sites · ↑ 19 pts from last month

Implementation0/25

Prompt Coverage0/25

Security0/20

Reliability0/15

Best Practices0/15

Real-World Architectures

Three production-tested patterns for common Next.js architectures. Click to expand.

ONE search_products tool (not one per category). add_to_cart takes a product_id. checkout uses requestUserInteraction for financial actions.

app/

├── layout.tsx (WebMCPProvider)

├── products/

│ ├── page.tsx (Server: fetches categories)

│ └── ProductTools.tsx (Client: search_products)

├── products/[id]/

│ └── ProductDetail.tsx (Client: get_product, add_to_cart)

├── cart/

│ └── CartTools.tsx (Client: view_cart, update_qty)

└── checkout/

└── CheckoutTool.tsx (Client: checkout + confirm)

app/checkout/CheckoutTool.tsx

'use client';
import { useTool } from '@webmcp/next';

export function CheckoutTool({ cartItems, total }) {
  useTool({
    name: 'complete_checkout',
    description: 'Complete purchase of cart items',
    annotations: { destructiveHint: true },
    execute: async (params) => {
      // Human confirmation for purchases
      await navigator.modelContext
        .requestUserInteraction();
      const result = await fetch(
        '/api/checkout', {
          method: 'POST',
          body: JSON.stringify({
            ...params, items: cartItems
          })
      });
      return { content: [{ type: 'text',
        text: `Order confirmed. Total: ${total}`
      }] };
    }
  });
}

⚠️Security Best Practice

Always use requestUserInteraction() for financial transactions, account modifications, or data deletion. WebMCP's linter will flag tools missing this.

Available tools change based on which page the user is viewing. Uses provideContext() to tell agents what's currently available.

app/dashboard/

├── layout.tsx (setContext per route)

├── overview/

│ └── DashTools.tsx (view_metrics, export_data)

├── settings/

│ └── SettingsTools.tsx (update_profile, change_plan)

└── billing/

└── BillingTools.tsx (view_invoices, update_payment)

app/dashboard/layout.tsx

'use client';
import { useAgentContext } from '@webmcp/next';
import { usePathname } from 'next/navigation';

export default function DashboardLayout({ children }) {
  const { setContext } = useAgentContext();
  const pathname = usePathname();

  useEffect(() => {
    const section = pathname.split('/')[2] || 'overview';
    setContext(
      `User is viewing ${section} section`
    );
  }, [pathname, setContext]);

  return <div>{children}</div>;
}

For blogs and docs — the declarative API is often all you need. Two agent-ready tools. Zero JavaScript. Pure HTML attributes.

app/blog/

├── page.tsx (search form + subscribe form)

├── [slug]/

│ └── page.tsx (article with context)

└── api/

├── blog/search/route.ts

└── newsletter/route.ts

app/blog/page.tsx — No Client Components needed

export default function BlogPage() {
  return (
    <div>
      <form
        action="/api/blog/search"
        toolname="search_articles"
        tooldescription="Search blog articles"
      >
        <input
          name="q" type="search"
          toolparamdescription="Keywords"
        />
        <button type="submit">Search</button>
      </form>

      <form
        action="/api/newsletter"
        method="POST"
        toolname="subscribe_newsletter"
        tooldescription="Subscribe to newsletter"
        toolautosubmit
      >
        <input name="email" type="email" required
          toolparamdescription="Email address" />
        <button type="submit">Subscribe</button>
      </form>
    </div>
  );
}

Secure by Default

WebMCP tools run in the browser with full page access. WebMCP ensures your tools are safe before they reach a single agent.

Injection Scanning

Tool descriptions and parameter names are checked for prompt injection patterns. The linter catches hidden instructions, Unicode exploits, and adversarial framing before they reach an agent.

Over-Parameterization Detection

Tools with 8+ parameters confuse agents and increase error rates. The schema linter flags over-parameterized tools and suggests breaking them into focused, composable tools.

requestUserInteraction()

WebMCP Standard

Financial transactions, account deletions, data exports — anything destructive requires explicit human confirmation. WebMCP's linter flags tools missing this annotation.

Edge Middleware Rate Limiting

middleware.ts

Edge Runtime

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const RATE_LIMIT = 100; // per minute per IP
const counts = new Map<string, number[]>();

export function middleware(req: NextRequest) {
  const ip = req.headers.get('x-forwarded-for') || 'unknown';
  const now = Date.now();
  const window = (counts.get(ip) || []).filter(
    (t) => now - t < 60000
  );

  if (window.length >= RATE_LIMIT) {
    return NextResponse.json(
      { error: 'Rate limited' },
      { status: 429 }
    );
  }

  window.push(now);
  counts.set(ip, window);
  return NextResponse.next();
}

Runtime Agent Firewall

Pro

app/providers.tsx

'use client';
import { WebMCPProvider } from '@webmcp/next';

export function Providers({ children }) {
  return (
    <WebMCPProvider
      fallback="graceful"
      firewall={{
        maxToolCallsPerMinute: 20,
        blockedPatterns: [
          '/admin/*',
          '/api/internal/*'
        ],
        onViolation: (event) => {
          analytics.track('firewall_violation', event);
        }
      }}
    >
      {children}
    </WebMCPProvider>
  );
}

✅Defense in Depth

Linting catches schema issues at build time. The firewall catches runtime abuse. requestUserInteraction catches destructive actions. Three layers, zero configuration.

Start with a Template

Production-ready Next.js starters with WebMCP tools pre-configured. Clone, customize, and ship your agent-ready site in minutes.

94/100

E-Commerce Starter

Product search, cart management, and checkout with human confirmation. Full MCP tool coverage with Server Actions.

MCP Tools

search_productsget_productadd_to_cartcheckout

Stack

Next.js 14PrismaStripeWebMCP

Clone Live Demo

91/100

Booking & Appointments

Service selection, calendar availability, and booking confirmation. Uses requestUserInteraction for all destructive actions.

MCP Tools

search_servicescheck_availabilitybook_appointmentcancel_booking

Stack

Next.js 14DrizzleResendWebMCP

Clone Live Demo

89/100

SaaS Dashboard

Multi-page dashboard with route-aware tool context. Tools appear and disappear based on which section the user is viewing.

MCP Tools

view_metricsexport_dataupdate_settingsmanage_billing

Stack

Next.js 14SupabaseRechartsWebMCP

Clone Live Demo

All templates include full test suites, CI/CD configs, and documentation. View all templates on GitHub →

The SDK Is Free. The Intelligence Is Pro.

Every hook, every form attribute, every type — free and open source. Pay only for AI-powered testing.

Feature

Free$0

Pro$79/mo

Team$249/mo

@webmcp/next SDK

Full access

React Hooks (all 5)

✓

Schema Linting

Unlimited

Quick Score

Unlimited

Deep Scans

1/day

50/month

Unlimited

AI Tool Generation

3/month

Unlimited

Prompt Coverage Testing

—

500 tests

Unlimited

CI/CD Integration

—

✓

Runtime Agent Firewall

—

✓

✓ + custom rules

Install

Start Trial

Contact

SDK runs in your browser — zero API calls, zero cost. Paid features use LLM APIs at bulk pricing. Enterprise pricing →

WebMCP Launched Two weeks ago.
Your Competitors Are Reading This Too.

The first sites that implement WebMCP correctly will own the AI agent channel. The SDK is ready. Will you be first?

$ npx webmcp-cli audit$ npx webmcp-cli lint

Docs GitHub Quick Start

Not ready? WebMCP Weekly — protocol updates, SDK releases, tutorials.

Next.js SDKChrome 146+

Make Your Next.js App
Agent-Ready

Google's WebMCP protocol shipped in Chrome 146. This SDK gives you React hooks, App Router integration, and the only testing suite that proves AI agents use your tools correctly.

Quick Start

MIT licensed · Free SDK · Paid plans add testing & optimization

ProductSearch.tsx

1  'use client';
2  import { useTool } from '@webmcp/next';
3  
4  export function ProductSearch() {
5    const { isRegistered } = useTool({
6      name: 'search_products',
7      description: 'Search catalog by keyword',
8      inputSchema: {
9        type: 'object',
10       properties: {
11         query: { type: 'string' },
12       },
13     },
14     execute: async (params) => {
15       const res = await fetch(`/api/search?q=${params.query}`);
16       return { content: [{ type: 'text', text: await res.text() }] };
17     }
18   });
19 }

Model Context Tools

1 active

search_products

Search catalog by keyword

type:imperative

params:query (string, required)

schema:Valid ✓

Terminal

$ npx webmcp-cli audit http://localhost:3000

✓ Tools found: 1 · Agent Readiness Score: 87/100 · ████████████████████░░

WebMCP in 30 Seconds

The Raw Browser API

WebMCP Spec

navigator.modelContext.registerTool({
  name: 'search_flights',
  description: 'Search available flights between two airports by date',
  inputSchema: {
    type: 'object',
    properties: {
      origin:      { type: 'string', description: 'Departure IATA airport code' },
      destination: { type: 'string', description: 'Arrival IATA airport code' },
      date:        { type: 'string', description: 'Departure date (YYYY-MM-DD)' }
    },
    required: ['origin', 'destination', 'date']
  },
  execute: async ({ origin, destination, date }) => {
    const flights = await fetch(`/api/flights?from=${origin}&to=${destination}&date=${date}`);
    const data = await flights.json();
    return { content: [{ type: 'text', text: JSON.stringify(data) }] };
  }
});

This SDK wraps the raw API with React lifecycle management, TypeScript inference, SSR safety, and testing tools that prove your implementation works.

Full spec →

From Zero to Agent-Ready in 4 Steps

10 minutes to your first working WebMCP tool.

Prerequisites

WebMCP is available today in Chrome 146+ behind a flag.

1. Open Chrome 146 (Beta channel or later)

2. Navigate to chrome://flags/#model-context-protocol

3. Enable the flag and restart Chrome

💡Early Preview

WebMCP is co-authored by Google and Microsoft and shipping to stable Chrome soon. You're building for the future — and you'll be first.

Install

$ npm install @webmcp/next

Add Provider

app/layout.tsx

import { WebMCPProvider } from '@webmcp/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <WebMCPProvider
          siteId="your-site-id"     // Optional: enables analytics
          fallback="graceful"       // Degrades silently
        >
          {children}
        </WebMCPProvider>
      </body>
    </html>
  );
}

Register Your First Tool

'use client' — Tools MUST register in Client Components (browser context required).

app/components/ProductSearch.tsx

'use client';

import { useTool } from '@webmcp/next';

export function ProductSearch() {
  const { isRegistered } = useTool({
    name: 'search_products',
    description: 'Search the product catalog by keyword, category, or price range',
    inputSchema: {
      type: 'object',
      properties: {
        query:    { type: 'string', description: 'Search keywords' },
        category: { type: 'string', description: 'Product category',
                    enum: ['electronics', 'clothing', 'home', 'sports'] },
        maxPrice: { type: 'number', description: 'Maximum price in USD' }
      },
      required: ['query']
    },
    execute: async ({ query, category, maxPrice }) => {
      const res = await fetch(
        `/api/products/search?q=${query}&cat=${category || ''}&max=${maxPrice || ''}`
      );
      const products = await res.json();
      return { content: [{ type: 'text', text: JSON.stringify(products) }] };
    }
  });

  return (
    <form action="/search">
      <input name="q" placeholder="Search products..." />
      <button type="submit">Search</button>
    </form>
  );
}

✦ Bonus: Check Your Score

webmcp-cli audit

$ npx webmcp-cli audit http://localhost:3000

WebMCP Audit — http://localhost:3000

Tools found: 1

├── search_products ✅ registered

│ ├── Description quality: Good (specific verb, clear scope)

│ ├── Schema completeness: 3/3 params described

│ └── Security: No issues detected

Agent Readiness Score: 71 / 100

Improvements available:

├── +8 pts: Add toolparamdescription to enum values

├── +6 pts: Add readOnlyHint annotation

└── +5 pts: Add a second tool to cover more user intents

Run `webmcp-cli audit --deep` for prompt coverage testing (Pro)

Where Things Run

The WebMCP + Next.js architecture. Tools register in the browser. Heavy lifting happens on the server. WebMCP makes it feel like writing normal React.

Browserwhere WebMCP lives

Client Components ('use client')

├── useTool() → registerTool()

├── useToolForm() → HTML attributes

├── useAgentEvent() → event listeners

└── Auto-cleanup on unmount

WebMCPProvider

├── Feature detection

├── SSR safety (no-op on server)

└── Analytics + scoring context

fetch() / Server Action

Server

Server Components

├── Prepare data, render UI

└── Cannot register WebMCP tools

Server Actions

├── Backend handlers for tool execution

├── Database, APIs, business logic

└── Called by tool execute() via fetch

CDN / Edge

Edge Middleware

├── Rate-limit API routes tools call

├── Validate request signatures

└── Geographic routing for tool backends

📋Protocol Fact: Why Client Components?

The Hybrid Pattern

app/products/page.tsx

Server Component

import { ProductSearch } from './ProductSearch';

export default async function ProductsPage() {
  const categories = await db.categories.findMany();
  const featured = await db.products.findMany({
    where: { featured: true }, take: 10
  });

  return (
    <div>
      <h1>Products</h1>
      <ProductSearch
        categories={categories}
        featured={featured}
      />
    </div>
  );
}

app/products/ProductSearch.tsx

Client Component

'use client';
import { useTool } from '@webmcp/next';

export function ProductSearch({ categories, featured }) {
  useTool({
    name: 'search_products',
    description: 'Search products...',
    inputSchema: {
      type: 'object',
      properties: {
        query: { type: 'string' },
        category: {
          type: 'string',
          enum: categories.map(c => c.slug)
        }
      }
    },
    execute: async (params) => {
      const res = await fetch('/api/products/search', {
        method: 'POST',
        body: JSON.stringify(params)
      });
      return { content: [{ type: 'text',
        text: await res.text() }] };
    }
  });

  return <form>{/* Search UI */}</form>;
}

Server Component fetches categories from DB → passes to Client Component → Client Component uses them as enum values in the tool schema. Best of both worlds.

Your Existing Forms Are Already 80% There

WebMCP has a declarative API that turns standard HTML forms into agent-callable tools — no JavaScript required. Just add a few attributes.

Beforeapp/contact/page.tsx

16 lines

export default function ContactPage() {
  return (
    <form action="/api/contact" method="POST">
      <label htmlFor="name">Full Name</label>
      <input id="name" name="name" required />
 
      <label htmlFor="email">Email Address</label>
      <input id="email" name="email" type="email" required />
 
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required />
 
      <button type="submit">Send</button>
    </form>
  );
}

+5 attrs

+5 attributes added

After (6 attributes)app/contact/page.tsx

22 lines · +5

export default function ContactPage() {
  return (
    <form action="/api/contact" method="POST"
      toolname="send_contact_message"
      tooldescription="Send a message to support"
    >
      <label htmlFor="name">Full Name</label>
      <input id="name" name="name" required
        toolparamdescription="Full name of sender"
      />
      <label htmlFor="email">Email Address</label>
      <input id="email" name="email" type="email" required
        toolparamdescription="Email for reply"
      />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required
        toolparamdescription="The message content"
      />
      <button type="submit">Send</button>
    </form>
  );
}

✅Key Insight

Or use the React wrapper

Same result with TypeScript prop validation and analytics integration:

app/contact/ContactForm.tsx

'use client';
import { ToolForm, ToolInput, ToolTextarea } from '@webmcp/next';

export function ContactForm() {
  return (
    <ToolForm
      name="send_contact_message"
      description="Send a message to support"
      action="/api/contact"
    >
      <ToolInput name="sender_name" label="Full Name" required
        paramDescription="Full name of the sender" />
      <ToolInput name="sender_email" label="Email" type="email" required
        paramDescription="Email for reply" />
      <ToolTextarea name="message_body" label="Message" required
        paramDescription="The message content" />
      <button type="submit">Send Message</button>
    </ToolForm>
  );
}

Type-Safe from Schema to Execution

Define your tool's input schema once as a TypeScript interface. WebMCP generates the JSON Schema for WebMCP automatically and infers the execute function's parameter types.

lib/tools/flight-search.ts

import { defineTool } from '@webmcp/next';

// Define your input type
interface FlightSearchParams {
  origin: string;       // Departure IATA code
  destination: string;  // Arrival IATA code
  date: string;         // YYYY-MM-DD format
  passengers?: number;  // Default: 1
  class?: 'economy' | 'business' | 'first';
}

// defineTool infers execute params from the interface
export const flightSearchTool = defineTool<FlightSearchParams>({
  name: 'search_flights',
  description: 'Search available flights between two airports',
  // inputSchema auto-generated from FlightSearchParams
  execute: async (params) => {
    // params is fully typed as FlightSearchParams
    // params.origin   → string (autocomplete works)
    // params.class    → 'economy' | 'business' | 'first' | undefined
    const flights = await searchFlightsAPI(params);
    return { content: [{ type: 'text', text: JSON.stringify(flights) }] };
  },
  annotations: {
    readOnlyHint: true,   // Doesn't modify data
    openWorldHint: true, // External API results
  }
});

Use in a component — 3 lines:

app/flights/FlightSearch.tsx

'use client';
import { useTool } from '@webmcp/next';
import { flightSearchTool } from '@/lib/tools/flight-search';

export function FlightSearch() {
  const { isRegistered } = useTool(flightSearchTool);
  return <div>{/* Flight search UI */}</div>;
}

What the browser sees (auto-generated JSON Schema):

Generated JSON Schema

Auto-generated

{
  name: "search_flights",
  description: "Search available flights between two airports",
  inputSchema: {
    type: "object",
    properties: {
      origin:      { type: "string", description: "Departure IATA code" },
      destination: { type: "string", description: "Arrival IATA code" },
      date:        { type: "string", description: "YYYY-MM-DD format" },
      passengers:  { type: "number", description: "Default: 1" },
      class:       { type: "string",
                     enum: ["economy", "business", "first"] }
    },
    required: ["origin", "destination", "date"]
  }
}

Transparency builds trust. You can always see exactly what the browser receives.

Server Actions Power Your Tools

WebMCP tools register in the browser. But the heavy lifting — database writes, payments, emails — happens on the server. Next.js Server Actions are the perfect bridge.

⚠️Architecture Clarity

A Server Action is NOT a WebMCP tool. A Server Action is what a WebMCP tool's execute function CALLS. The tool lives in the browser. The action lives on the server. WebMCP connects them.

app/actions/booking.ts

Server

'use server';

import { revalidatePath } from 'next/cache';

export async function createBooking(data: {
  date: string; time: string;
  service: string; name: string;
  email: string;
}) {
  // Full server access
  const booking = await db.bookings
    .create({ data });

  await sendEmail({
    to: data.email,
    subject: `Booking confirmed`,
  });

  revalidatePath('/appointments');

  return {
    id: booking.id,
    confirmed: true,
    message: `Booking confirmed`
  };
}

app/booking/BookingTool.tsx

Client

'use client';
import { useTool } from '@webmcp/next';
import { createBooking } from
  '../actions/booking';

export function BookingTool({
  availableServices,
  availableTimes
}) {
  useTool({
    name: 'book_appointment',
    description: 'Book an appointment',
    inputSchema: {
      type: 'object',
      properties: {
        service: {
          type: 'string',
          enum: availableServices
        },
        date: { type: 'string' },
        time: { type: 'string',
          enum: availableTimes },
        name: { type: 'string' },
        email: { type: 'string' }
      },
      required: ['service',
        'date', 'time', 'name', 'email']
    },
    annotations: {
      destructiveHint: true
    },
    execute: async (params) => {
      const result = await
        createBooking(params);
      return { content: [{
        type: 'text',
        text: JSON.stringify(result)
      }] };
    }
  });

  return <div>{/* Form UI */}</div>;
}

User speaks to agent→Agent invokes tool→Server Action runs→DB + email→Result to agent

Hooks API

Each hook maps 1:1 to a WebMCP browser API. Click to expand.

5 hooks

HookSignaturePurpose

useTool({ name, description, inputSchema, execute, annotations? })

Wrapsnavigator.modelContext.registerTool() / unregisterTool()

useToolForm({ name, description, autoSubmit?, onAgentSubmit? })

Wrapstoolname, tooldescription HTML attributes

Provide contextual information to agents about the current page state. Update as UI state changes.

setContext('Found 23 flights from JFK to LAX')

Wrapsnavigator.modelContext.provideContext() / clearContext()

Listen to WebMCP lifecycle events for visual feedback when agents interact with your tools.

useAgentEvent('toolactivated', (e) => showLoading(e.tool.name))

Wrapswindow.addEventListener('toolactivated', ...)

Detect WebMCP availability for conditional rendering. Your app works perfectly without it.

if (!isSupported) return null;

Wraps"modelContext" in navigator

The conversion moment

Registration Is Easy.
Knowing It Works Is Hard.

You've registered your tools. But will Gemini actually invoke search_products when a user says “find me running shoes under $100”? You can't answer that without testing across real models.

Schema Linting

Free

No LLM calls, no API key — runs in under 1 second.

webmcp-cli lint

$ npx webmcp-cli lint src/lib/tools/

Linting 4 tool definitions...

search_products

├── ✅ Name: specific verb + noun

├── ✅ Description: clear scope, positive framing

├── ⚠️ category enum missing descriptions

└── ✅ All params have descriptions

book_appointment

├── ✅ Name: specific verb + noun

├── ✅ Description: clear scope

├── ❌ SECURITY: destructive action without requestUserInteraction()

└── ⚠️ 5 required params — consider which are truly required

Results: 1 error, 2 warnings, 12 passed

Prompt Coverage

Pro

Test across Gemini, GPT-4, and Claude simultaneously.

webmcp-cli test

$ npx webmcp-cli test --coverage --models gemini,gpt-4,claude

Testing 4 tools × 120 prompts × 3 models = 1,440 test cases

┌──────────────────┬────────┬───────┬────────┬─────────┐

│ Tool │ Gemini │ GPT-4 │ Claude │ Overall │

├──────────────────┼────────┼───────┼────────┼─────────┤

│ search_products │ 94% │ 91% │ 89% │ 91.3% │

│ get_product │ 88% │ 92% │ 86% │ 88.7% │

│ book_appointment │ 96% │ 93% │ 95% │ 94.7% │

│ cancel_booking │ 82% │ 78% │ 81% │ 80.3% │

└──────────────────┴────────┴───────┴────────┴─────────┘

⚠️ cancel_booking: Low coverage (80.3%)

├── 12 prompts routed to book_appointment instead

│ Fix: Add "cancel", "undo", "remove" to description

├── 6 prompts: agent asked for booking_id but user gave name

│ Fix: Make booking_id optional, add customer_name param

└── Estimated score impact: fixing these → +9 points

CI/CD Gate

Team— Block deploys that break agent interactions

.github/workflows/webmcp.yml

name: WebMCP CI
on: [push, pull_request]
jobs:
  agent-readiness:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npm run build
      - run: |
          npx webmcp-cli ci \
            --url http://localhost:3000 \
            --min-score 75 \
            --coverage-threshold 85 \
            --models gemini
        env:
          WEBMCP_API_KEY: ${{ secrets.WEBMCP_API_KEY }}

Your single benchmark

0/ 100

Agent Readiness Score

Top 12% of e-commerce sites · ↑ 19 pts from last month

Implementation0/25

Prompt Coverage0/25

Security0/20

Reliability0/15

Best Practices0/15

Real-World Architectures

Three production-tested patterns for common Next.js architectures. Click to expand.

ONE search_products tool (not one per category). add_to_cart takes a product_id. checkout uses requestUserInteraction for financial actions.

app/

├── layout.tsx (WebMCPProvider)

├── products/

│ ├── page.tsx (Server: fetches categories)

│ └── ProductTools.tsx (Client: search_products)

├── products/[id]/

│ └── ProductDetail.tsx (Client: get_product, add_to_cart)

├── cart/

│ └── CartTools.tsx (Client: view_cart, update_qty)

└── checkout/

└── CheckoutTool.tsx (Client: checkout + confirm)

app/checkout/CheckoutTool.tsx

'use client';
import { useTool } from '@webmcp/next';

export function CheckoutTool({ cartItems, total }) {
  useTool({
    name: 'complete_checkout',
    description: 'Complete purchase of cart items',
    annotations: { destructiveHint: true },
    execute: async (params) => {
      // Human confirmation for purchases
      await navigator.modelContext
        .requestUserInteraction();
      const result = await fetch(
        '/api/checkout', {
          method: 'POST',
          body: JSON.stringify({
            ...params, items: cartItems
          })
      });
      return { content: [{ type: 'text',
        text: `Order confirmed. Total: ${total}`
      }] };
    }
  });
}

⚠️Security Best Practice

Always use requestUserInteraction() for financial transactions, account modifications, or data deletion. WebMCP's linter will flag tools missing this.

Available tools change based on which page the user is viewing. Uses provideContext() to tell agents what's currently available.

app/dashboard/

├── layout.tsx (setContext per route)

├── overview/

│ └── DashTools.tsx (view_metrics, export_data)

├── settings/

│ └── SettingsTools.tsx (update_profile, change_plan)

└── billing/

└── BillingTools.tsx (view_invoices, update_payment)

app/dashboard/layout.tsx

'use client';
import { useAgentContext } from '@webmcp/next';
import { usePathname } from 'next/navigation';

export default function DashboardLayout({ children }) {
  const { setContext } = useAgentContext();
  const pathname = usePathname();

  useEffect(() => {
    const section = pathname.split('/')[2] || 'overview';
    setContext(
      `User is viewing ${section} section`
    );
  }, [pathname, setContext]);

  return <div>{children}</div>;
}

For blogs and docs — the declarative API is often all you need. Two agent-ready tools. Zero JavaScript. Pure HTML attributes.

app/blog/

├── page.tsx (search form + subscribe form)

├── [slug]/

│ └── page.tsx (article with context)

└── api/

├── blog/search/route.ts

└── newsletter/route.ts

app/blog/page.tsx — No Client Components needed

export default function BlogPage() {
  return (
    <div>
      <form
        action="/api/blog/search"
        toolname="search_articles"
        tooldescription="Search blog articles"
      >
        <input
          name="q" type="search"
          toolparamdescription="Keywords"
        />
        <button type="submit">Search</button>
      </form>

      <form
        action="/api/newsletter"
        method="POST"
        toolname="subscribe_newsletter"
        tooldescription="Subscribe to newsletter"
        toolautosubmit
      >
        <input name="email" type="email" required
          toolparamdescription="Email address" />
        <button type="submit">Subscribe</button>
      </form>
    </div>
  );
}

Secure by Default

WebMCP tools run in the browser with full page access. WebMCP ensures your tools are safe before they reach a single agent.

Injection Scanning

Tool descriptions and parameter names are checked for prompt injection patterns. The linter catches hidden instructions, Unicode exploits, and adversarial framing before they reach an agent.

Over-Parameterization Detection

Tools with 8+ parameters confuse agents and increase error rates. The schema linter flags over-parameterized tools and suggests breaking them into focused, composable tools.

requestUserInteraction()

WebMCP Standard

Financial transactions, account deletions, data exports — anything destructive requires explicit human confirmation. WebMCP's linter flags tools missing this annotation.

Edge Middleware Rate Limiting

middleware.ts

Edge Runtime

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const RATE_LIMIT = 100; // per minute per IP
const counts = new Map<string, number[]>();

export function middleware(req: NextRequest) {
  const ip = req.headers.get('x-forwarded-for') || 'unknown';
  const now = Date.now();
  const window = (counts.get(ip) || []).filter(
    (t) => now - t < 60000
  );

  if (window.length >= RATE_LIMIT) {
    return NextResponse.json(
      { error: 'Rate limited' },
      { status: 429 }
    );
  }

  window.push(now);
  counts.set(ip, window);
  return NextResponse.next();
}

Runtime Agent Firewall

Pro

app/providers.tsx

'use client';
import { WebMCPProvider } from '@webmcp/next';

export function Providers({ children }) {
  return (
    <WebMCPProvider
      fallback="graceful"
      firewall={{
        maxToolCallsPerMinute: 20,
        blockedPatterns: [
          '/admin/*',
          '/api/internal/*'
        ],
        onViolation: (event) => {
          analytics.track('firewall_violation', event);
        }
      }}
    >
      {children}
    </WebMCPProvider>
  );
}

✅Defense in Depth

Linting catches schema issues at build time. The firewall catches runtime abuse. requestUserInteraction catches destructive actions. Three layers, zero configuration.

Start with a Template

Production-ready Next.js starters with WebMCP tools pre-configured. Clone, customize, and ship your agent-ready site in minutes.

94/100

E-Commerce Starter

Product search, cart management, and checkout with human confirmation. Full MCP tool coverage with Server Actions.

MCP Tools

search_productsget_productadd_to_cartcheckout

Stack

Next.js 14PrismaStripeWebMCP

Clone Live Demo

91/100

Booking & Appointments

Service selection, calendar availability, and booking confirmation. Uses requestUserInteraction for all destructive actions.

MCP Tools

search_servicescheck_availabilitybook_appointmentcancel_booking

Stack

Next.js 14DrizzleResendWebMCP

Clone Live Demo

89/100

SaaS Dashboard

Multi-page dashboard with route-aware tool context. Tools appear and disappear based on which section the user is viewing.

MCP Tools

view_metricsexport_dataupdate_settingsmanage_billing

Stack

Next.js 14SupabaseRechartsWebMCP

Clone Live Demo

All templates include full test suites, CI/CD configs, and documentation. View all templates on GitHub →

The SDK Is Free. The Intelligence Is Pro.

Every hook, every form attribute, every type — free and open source. Pay only for AI-powered testing.

Feature

Free$0

Pro$79/mo

Team$249/mo

@webmcp/next SDK

Full access

React Hooks (all 5)

✓

Schema Linting

Unlimited

Quick Score

Unlimited

Deep Scans

1/day

50/month

Unlimited

AI Tool Generation

3/month

Unlimited

Prompt Coverage Testing

—

500 tests

Unlimited

CI/CD Integration

—

✓

Runtime Agent Firewall

—

✓

✓ + custom rules

Install

Start Trial

Contact

SDK runs in your browser — zero API calls, zero cost. Paid features use LLM APIs at bulk pricing. Enterprise pricing →

WebMCP Launched Two weeks ago.
Your Competitors Are Reading This Too.

The first sites that implement WebMCP correctly will own the AI agent channel. The SDK is ready. Will you be first?

$ npx webmcp-cli audit$ npx webmcp-cli lint

Docs GitHub Quick Start

Not ready? WebMCP Weekly — protocol updates, SDK releases, tutorials.

Make Your Next.js AppAgent-Ready

WebMCP in 30 Seconds

From Zero to Agent-Ready in 4 Steps

Prerequisites

Install

Add Provider

Register Your First Tool

✦ Bonus: Check Your Score

Where Things Run

The Hybrid Pattern

Your Existing Forms Are Already 80% There

Or use the React wrapper

Type-Safe from Schema to Execution

Use in a component — 3 lines:

What the browser sees (auto-generated JSON Schema):

Server Actions Power Your Tools

Hooks API

Registration Is Easy.Knowing It Works Is Hard.

Schema Linting

Prompt Coverage

CI/CD Gate

Real-World Architectures

E-Commerce

SaaS Dashboard

Content Site

Secure by Default

Injection Scanning

Over-Parameterization Detection

requestUserInteraction()

Edge Middleware Rate Limiting

Runtime Agent Firewall

Start with a Template

E-Commerce Starter

Booking & Appointments

SaaS Dashboard

The SDK Is Free. The Intelligence Is Pro.

WebMCP Launched Two weeks ago.Your Competitors Are Reading This Too.

Make Your Next.js AppAgent-Ready

WebMCP in 30 Seconds

From Zero to Agent-Ready in 4 Steps

Prerequisites

Install

Add Provider

Register Your First Tool

✦ Bonus: Check Your Score

Where Things Run

The Hybrid Pattern

Your Existing Forms Are Already 80% There

Or use the React wrapper

Type-Safe from Schema to Execution

Use in a component — 3 lines:

What the browser sees (auto-generated JSON Schema):

Server Actions Power Your Tools

Hooks API

Registration Is Easy.Knowing It Works Is Hard.

Schema Linting

Prompt Coverage

CI/CD Gate

Real-World Architectures

E-Commerce

SaaS Dashboard

Content Site

Secure by Default

Injection Scanning

Over-Parameterization Detection

requestUserInteraction()

Edge Middleware Rate Limiting

Runtime Agent Firewall

Start with a Template

E-Commerce Starter

Booking & Appointments

SaaS Dashboard

The SDK Is Free. The Intelligence Is Pro.

WebMCP Launched Two weeks ago.Your Competitors Are Reading This Too.

Make Your Next.js App
Agent-Ready

Registration Is Easy.
Knowing It Works Is Hard.

WebMCP Launched Two weeks ago.
Your Competitors Are Reading This Too.

Make Your Next.js App
Agent-Ready

Registration Is Easy.
Knowing It Works Is Hard.

WebMCP Launched Two weeks ago.
Your Competitors Are Reading This Too.