WebMCP Launched Two weeks ago.
The Co-Pilot Already Knows
the Entire Spec.
Describe your tool in plain English. Get production-ready definitions, typed schemas, security annotations, and deploy-ready code — in under 2 minutes.
“I need a tool that lets AI agents search available flights between airports. The agent provides origin airport code, destination airport code, departure date, and number of passengers. Return flight options with airline, times, price, and number of stops.”
From One Sentence to Production Code
Here’s exactly how the Co-Pilot turns a plain English description into spec-validated, deploy-ready WebMCP tool definitions.
Describe intent, parameters, and return data. The Co-Pilot handles naming, schema types, annotations, validation, and security.
Tool name selected: search-flights
verb-noun pattern per WebMCP naming convention
Description written in positive framing
Spec says avoid negatives like "Don't use for..."
inputSchema generated with 4 typed parameters
origin, destination, departureDate, passengers
Annotations applied: readOnlyHint, idempotentHint
Search doesn't modify data — safe for agents
Security review passed
No sensitive params, no destructive actions
Execute function scaffolded
Input validation, API call, error handling, response format
Export as Imperative JS
navigator.modelContext.registerTool()
Export as Declarative HTML
<form toolname="search-flights">
Export as React Component
Custom hook with feature detection
The Co-Pilot applies every best practice from the WebMCP specification automatically: atomic tool design, positive descriptions, explicit parameter types, proper annotation selection, and graceful error recovery patterns.
See Exactly What the Co-Pilot Produces
Every output is spec-validated, security-scanned, and ready for production. Not a starting point — a finish line.
| 1 | // Generated by WebMCP AI Co-Pilot |
| 2 | // WebMCP Imperative API |
| 3 | |
| 4 | if ("modelContext" in navigator) { |
| 5 | navigator.modelContext.registerTool({ |
| 6 | name: "search-flights", |
| 7 | description: |
| 8 | "Search for available flights between airports by departure " + |
| 9 | "date and passenger count. Returns matching flights with " + |
| 10 | "airline name, departure and arrival times, price in USD, " + |
| 11 | "and number of stops. Use IATA airport codes (e.g., LAX, " + |
| 12 | "JFK, LHR) for origin and destination.", |
| 13 | inputSchema: { |
| 14 | type: "object", |
| 15 | properties: { |
| 16 | origin: { |
| 17 | type: "string", |
| 18 | title: "Origin airport", |
| 19 | description: "IATA code of departure airport (e.g., 'LAX')", |
| 20 | pattern: "^[A-Z]{3}$" |
| 21 | }, |
| 22 | destination: { |
| 23 | type: "string", |
| 24 | title: "Destination airport", |
| 25 | description: "IATA code of arrival airport (e.g., 'JFK')", |
| 26 | pattern: "^[A-Z]{3}$" |
| 27 | }, |
| 28 | departureDate: { |
| 29 | type: "string", |
| 30 | title: "Departure date", |
| 31 | description: "Travel date in YYYY-MM-DD format", |
| 32 | format: "date" |
| 33 | }, |
| 34 | passengers: { |
| 35 | type: "integer", |
| 36 | title: "Number of passengers", |
| 37 | description: "Total passengers traveling (1-9)", |
| 38 | minimum: 1, |
| 39 | maximum: 9, |
| 40 | default: 1 |
| 41 | } |
| 42 | }, |
| 43 | required: ["origin", "destination", "departureDate"] |
| 44 | }, |
| 45 | annotations: { |
| 46 | readOnlyHint: true, |
| 47 | idempotentHint: true, |
| 48 | openWorldHint: false |
| 49 | }, |
| 50 | execute: async ({ origin, destination, departureDate, passengers = 1 }) => { |
| 51 | try { |
| 52 | const response = await fetch( |
| 53 | `/api/flights/search?` + |
| 54 | `from=${encodeURIComponent(origin)}&` + |
| 55 | `to=${encodeURIComponent(destination)}&` + |
| 56 | `date=${encodeURIComponent(departureDate)}&` + |
| 57 | `pax=${passengers}` |
| 58 | ); |
| 59 | if (!response.ok) { |
| 60 | return { |
| 61 | content: [{ |
| 62 | type: "text", |
| 63 | text: "Unable to search flights right now. Please try again." |
| 64 | }] |
| 65 | }; |
| 66 | } |
| 67 | const { flights } = await response.json(); |
| 68 | return { |
| 69 | content: [{ |
| 70 | type: "text", |
| 71 | text: flights.length === 0 |
| 72 | ? `No flights found from ${origin} to ${destination}.` |
| 73 | : flights.map((f, i) => |
| 74 | `${i+1}. ${f.airline} ${f.flightNumber}\n` + |
| 75 | ` ${f.departureTime} → ${f.arrivalTime}\n` + |
| 76 | ` ${f.price}/person · ${f.stops === 0 ? 'Nonstop' : f.stops + ' stop(s)'}` |
| 77 | ).join('\n\n') |
| 78 | }] |
| 79 | }; |
| 80 | } catch (error) { |
| 81 | return { |
| 82 | content: [{ type: "text", text: "Flight search temporarily unavailable." }] |
| 83 | }; |
| 84 | } |
| 85 | } |
| 86 | }); |
| 87 | } |
One description. Four production-ready outputs. The Co-Pilot generates Imperative JavaScript, Declarative HTML, React components, and WordPress plugins — all from the same natural language input.
Not a GPT Wrapper. A WebMCP Specialist.
The Co-Pilot is trained on the complete WebMCP specification, the security considerations document, and every best practice guideline. Here’s what that actually means.
Dual API Mastery
“WebMCP has two APIs — and most developers don’t know which one to use when.”
The Co-Pilot knows that simple HTML forms should use the Declarative API (toolname, tooldescription attributes) for zero-JavaScript implementation, while complex interactions need the Imperative API (navigator.modelContext.registerTool()) for dynamic behavior and custom execute functions.
In practice
“Describe a contact form” → generates declarative HTML. “Describe a multi-step checkout with payment validation” → generates imperative JavaScript with requestUserInteraction().
Security by Default
“Every generated tool is security-scanned before you even review it.”
Tools that modify data get destructiveHint: true. Payment tools get requestUserInteraction() injected. Sensitive parameters like email or SSN are flagged with privacy classification. Over-parameterization is detected and questioned.
In practice
You describe “a tool for checking out a shopping cart.” The Co-Pilot generates it with destructiveHint: true, wraps execute in requestUserInteraction(), and notes: “⚠ This tool processes payment. Never include full card numbers in response content.”
Description Optimization
“Descriptions aren’t for humans. They’re for AI models. The Co-Pilot writes them for agents.”
Uses specific action verbs ("Search," "Create," "Delete") — never vague ones. Writes in positive framing. Includes input/output semantics in the description itself. Tests descriptions against routing models and flags those with < 85% accuracy.
In practice
You write “a tool for handling orders.” The Co-Pilot returns: “❌ 'Handling orders' is ambiguous. Did you mean: (a) Search existing orders? (b) Create a new order? (c) Cancel an existing order?” Then generates separate, atomic tools for each.
Schema Intelligence
“Parameters typed, constrained, and documented — so agents never hallucinate values.”
Accept raw user input in the schema, validate in execute. Every parameter gets title and description. Enums use oneOf with human-readable labels. Explicit minimum, maximum, pattern, format constraints. Default values for optional parameters.
In practice
You say “price filter.” The Co-Pilot generates minPrice (number, minimum: 0) and maxPrice (number) as separate parameters with clear descriptions — not a single “priceRange” string that agents would struggle to format.
Context & State Awareness
“For SPAs, the Co-Pilot manages which tools exist on which pages.”
Generates provideContext() calls that update available tools when page state changes. Adds unregisterTool() cleanup in React useEffect return functions. Detects tool name conflicts across states.
In practice
You describe “a travel booking app with search, results, and checkout pages.” The Co-Pilot generates three sets of tool registrations with proper state transitions, cleanup logic, and a visual state diagram.
Iterative Refinement
“Not right on the first try? Describe what’s wrong. The Co-Pilot adapts.”
“Make the description shorter” → rewrites with same semantics. “Add a filter for airline preference” → adds parameter, updates description. “Export this for Vue instead of React” → regenerates framework-specific code.
In practice
Each refinement maintains full spec compliance. The Co-Pilot never produces output that violates WebMCP best practices, even after multiple iterations. Think of it as pair programming with a spec expert.
Try It Right Now
No signup required for your first generation.
\u2014 or try one of these examples \u2014
The Math Is Simple
Whether you measure in hours or dollars, the Co-Pilot pays for itself on the first tool.
Without AI Co-Pilot
Learn the WebMCP spec from scratch
4-8 hours40+ pages, 2 APIs, security spec
Understand JSON Schema Draft 2020-12
1-2 hoursWrite tool definition manually
2-4 hoursname, description, inputSchema
Write the execute function
2-4 hoursAPI integration, error handling
Add security annotations
1-2 hoursWhich hints? When requestUserInteraction?
Adapt for your framework
2-4 hoursReact hooks? WordPress? Vanilla JS?
Test against AI models
2-4 hoursDoes Gemini route to it?
Debug and iterate
2-4 hoursWith AI Co-Pilot
Describe your tool in plain English
2 minutesReview generated output
10 minutesschema, annotations, security, code
Add your business logic
15-30 minAPI endpoints, custom validation
Test with real prompts
10 minutesCo-Pilot suggests test phrases
Export & deploy
5 minutesOne-click export for your framework
The Agency Equation
Without Co-Pilot
25 tools × 20 hours = 500 hours
At $150/hr internal = $75,000
Client charge: $100,000
Margin: $25,000 (25%)
Timeline: 8-12 weeks
With Co-Pilot
25 tools × 4 hours = 100 hours
At $150/hr internal = $15,000
Client charge: $75,000
Margin: $60,000 (80%)
Timeline: 2 weeks
Margin improvement: +$35,000 per engagement. Deliver 3x faster. Serve 4x more clients per quarter.
Beyond Generation — A Complete Authoring Environment
The Co-Pilot grows with your needs. From single tools to entire site-wide implementations.
Input: https://example-store.com
Co-Pilot found 5 potential tools:
✅ search-products — from search form (high confidence)
✅ add-to-cart — from product page button (high confidence)
✅ apply-discount — from coupon input (medium confidence)
⚠️ checkout — from checkout form (needs review — payment data)
❓ newsletter-signup — from footer form (low value — suggest skip)
Import: openapi.yaml (14 endpoints)
Migration Report:
✅ Migrated: 11 tools (direct translation)
⚠️ Needs review: 2 tools (auth-related)
❌ Not suitable: 1 tool (server-to-server only)
“I need tools for a restaurant website: table booking, menu search, order placement, reservation cancellation, and leaving a review.” The Co-Pilot generates all five with consistent naming, non-overlapping descriptions, and proper annotation hierarchy.
• “Always include Spanish translations in parameter descriptions”
• “Our API base URL is https://api.example.com/v2”
• “All prices are in EUR, not USD”
• “Use our brand term ‘Experiences’ instead of ‘Activities’”
search-flights v1 → v2:
- “Search for flights between airports”
+ “Search for available flights between airports by departure date and passenger count...”
+ Added: passengers (integer, min: 1, max: 9)
+ Added: idempotentHint: true
Testing “search-flights” against 10 prompts:
“Find me flights from LA to NY” ✅✅✅
“Book a plane ticket to London” ✅⚠️✅
“Cheapest way to fly to Tokyo?” ✅✅⚠️
Routing accuracy: 92% (28/30 across 3 models)
Built for Everyone Who Touches WebMCP
Whether you’re a solo developer, a 50-person agency, or a hotel owner who’s never written a line of code.
For
Solo Developers & Freelancers
“Your virtual WebMCP expert on every client project.”
You don’t have time to memorize a 40-page spec for every new project. The Co-Pilot lets you deliver WebMCP implementations to clients without becoming a spec expert first.
The outcome
Offer "WebMCP implementation" as a new service line. Charge $5K-$15K per project. Deliver in days, not weeks.
For
Startups (5-50 People)
“Ship agent-ready features at startup speed.”
Your 4-person frontend team has a two-week sprint to add WebMCP tools. The Co-Pilot generates React/Next.js hooks with proper useEffect cleanup, TypeScript types, and feature detection.
The outcome
Your tools are live in production by Friday. Competitors are still reading the spec.
For
Mid-Market (50-500 People)
“The assessment that gets the WebMCP project funded.”
Your VP of Digital needs to present the WebMCP opportunity to the C-suite. The Co-Pilot scans your 40-form application portal and generates a prioritized implementation roadmap.
The outcome
Walk into the board meeting with a comprehensive assessment. The project gets funded. You’re the person who made it happen.
For
Enterprise (500+ People)
“Migrate your existing MCP server to WebMCP without regression.”
You already have 50+ tools in a backend MCP server. The Co-Pilot imports your existing definitions and generates browser-side WebMCP equivalents with a side-by-side migration report.
The outcome
Your existing agent integrations translate cleanly to WebMCP. Zero regression. Full audit trail.
For
Agencies & Consultancies
“Scan a client site and deliver a WebMCP plan before the meeting ends.”
You have 25 clients across e-commerce, healthcare, and hospitality. The Co-Pilot scans each site, generates tool definitions, and exports client-ready implementation reports.
The outcome
4x more clients per quarter. Margins go from 25% to 80%. A new revenue stream built on expertise the Co-Pilot provides.
For
Non-Technical Business Owners
“Install the plugin. The Co-Pilot handles the rest.”
You run a hotel on Shopify. You’ve never written code. Install the WebMCP plugin — the Co-Pilot automatically detects your booking form and activates WebMCP tools.
The outcome
"8% of my bookings this month came through AI agents. That’s $2,400 in revenue I wouldn’t have had."
Output You Can Ship — Not Output You Need to Fix
Every generation passes 4 automated quality gates before you see a single line of code.
Schema Valid
Every schema validates against JSON Schema Draft 2020-12. Zero syntax errors. Guaranteed.
Spec Compliant
Every output checked against the official WebMCP spec. Annotations, naming, types — all verified.
Prompt Tested
Descriptions tested against Gemini, GPT, & Claude for routing accuracy before you review.
Security Scanned
Injection risks, over-parameterization, missing requestUserInteraction — all flagged automatically.
“Why not just use ChatGPT or Copilot?”
ChatGPT / Copilot
Trained on data that predates WebMCP. Will hallucinate registerTool() parameters. Can’t test routing accuracy. Has never seen the security spec.
WebMCP Co-Pilot
Trained on the actual WebMCP specification. Validated against the spec on every generation. Tests output against real AI models. Applies security best practices.
Generic AI gives you a starting point. The Co-Pilot gives you a finish line.
What Teams Are Saying
“I was convinced ‘AI-powered’ meant ‘generates garbage I’d spend 3x longer cleaning up.’ Then the Co-Pilot generated a complete tool with destructiveHint, requestUserInteraction(), proper error handling, and a description that actually routes correctly on Gemini. It knew more about the WebMCP spec than I did after reading it for two days.”
Coming soon
Senior Frontend Developer
Converted from free to Pro after first generation
“We used the Co-Pilot to scan and generate tools for 5 client sites in a single day. What would have been a 300-hour engagement across our team became a 40-hour sprint. Our margins on WebMCP projects went from 25% to over 70%.”
Coming soon
Director of Engineering, Agency
15+ active clients, Team plan subscriber
“We needed to add WebMCP tools to our travel platform before our competitors did. The Co-Pilot generated React hooks with proper useEffect cleanup, TypeScript types, and even suggested which tools should be available on which pages. We shipped 12 tools in one sprint — our competitors are still on tool #3.”
Coming soon
CTO, Travel Tech Startup
20-person startup, Pro plan subscriber
“I don’t know what WebMCP is and I don’t need to. I installed the Shopify plugin, the Co-Pilot configured everything, and last month 12% of my bookings came through AI agents. That’s €3,200 in revenue I wouldn’t have had.”
Coming soon
Hotel Owner, Barcelona
Non-technical Shopify user
Start Free. Scale as You Build.
Your first 3 generations are free. No credit card required.
Free
- 3 AI generations/month
- 1 framework export
- Basic generation only
Starter
- 15 AI generations/month
- All 4 framework exports
- Prompt testing (1 model)
- Site scanning (1 URL)
Pro
- Unlimited generations
- All 4 framework exports
- Prompt testing (3 models)
- Unlimited site scanning
- API import (OpenAPI, Postman)
- Custom instructions
- Version history
Team
- Everything in Pro
- Batch site scanning
- MCP server migration
- Team sharing
- Review workflows
Enterprise
- Everything in Team
- Custom AI models
- API access
- SSO/SAML
- Audit log
- Dedicated support
A “generation” is one AI session — describe, iterate, and refine as much as you need within that session. Refining the same tool doesn’t count as a new generation.
Need more? Individual credits at $0.50 each. Bulk: 50 for $20, 100 for $35.
Stop Reading the Spec.
Start Shipping Tools.
The Co-Pilot generates registerTool() calls with typed schemas, security annotations, and framework-specific code. Describe a tool in plain English, get production code that passes spec validation in under 2 minutes.
No credit card required. 3 free generations included.