Coming Soon

Your Webflow Site Will Speak
the Language AI Agents Understand

WebMCP will be available in Chrome 146+. Webflow’s form architecture maps directly to the protocol’s declarative API — no JavaScript required. WebMCP will make the connection automatic.

WebMCP is a new standard. Webflow sites that adopt it early could be among the first AI agents can interact with.

See How It Works

Built on Google’s WebMCP standardChrome 146+Works with all Webflow plansFree tier planned

Without WebMCP

With WebMCP

The Advantage

Webflow's Declarative Architecture Maps Directly to WebMCP

Other platforms need JavaScript to implement WebMCP. Your Webflow forms just need two HTML attributes.

Your Webflow Form

01Form Name: "Contact Us"

02Purpose: Collect inquiries

03Name (text, required)

04Email (email, required)

05Message (textarea)

06Subject (select)

What WebMCP Needs

01toolname="contact_us"

02tooldescription="Submit a contact inquiry"

03name: string, required

04email: string, format:email

05message: string

06subject: enum

Your Webflow forms are already 80% of the way to WebMCP.

Platform	Path	Code	Time
Webflow + WebMCP	Declarative (HTML attributes)	None	Minutes
React / Next.js	Imperative (JavaScript API)	Yes — registerTool(), provideContext()	Hours to days
WordPress	Plugin + PHP hooks	Minimal (plugin handles it)	30 minutes
Custom HTML/JS	Either API	Yes — full implementation	Days to weeks

Webflow designers have the fastest path to the agentic web.

How It Will Work

Three Paths. One Outcome: Agent-Ready.

Choose the path that matches your comfort level. All three will lead to the same result.

Zero Code

Under 5 minutes

For designers & business owners

Connect

Click “Connect Webflow Site” and authorize via OAuth. WebMCP will use the official Webflow API — read-only access. Will take about 30 seconds.

Auto-Detect

WebMCP will scan your published site and identify every form: contact forms, newsletter signups, booking forms, and custom forms. Each will get a confidence score and AI-generated tool description.

Review & Enable

For each detected form, you’ll review the suggested tool name, AI-generated description, detected parameters with types, and one-click enable/disable toggle. Edit anything to match your brand voice.

Publish

WebMCP will inject the WebMCP declarative attributes into your Webflow site’s custom code on next publish. No manual editing. Your forms will become agent-callable tools.

Low Code

15–30 minutes

For technical designers who want more control

Everything in Zero Code

Start with auto-detected forms and declarative attributes, then extend with custom tools.

Custom Tools via Custom Code

Add tools via Webflow’s Custom Code settings using the WebMCP imperative API (navigator.modelContext.registerTool).

Non-Form Interactions

Create tools for search, filtering, navigation — anything beyond form submissions.

Dynamic Context

Use provideContext() to manage tool availability across page states. Feature detection: if (“modelContext” in navigator) { ... }

Agency Mode

15 min per client

For agencies managing multiple client sites

Run AI Co-Pilot

Enter the client’s Webflow URL. Co-Pilot crawls, identifies all forms, CMS collections, and interactive elements.

Auto-Generate Everything

Complete tool definitions with names, descriptions, and schemas. Security scan + schema linting runs automatically.

Agent Readiness Score

Produces a composite score + implementation roadmap. Agency reviews and adjusts descriptions for client’s brand voice.

One-Click Deploy

Deploy across the entire client portfolio from a single dashboard.

Zero Code

Under 5 minutes

For designers & business owners

Connect

Click “Connect Webflow Site” and authorize via OAuth. WebMCP will use the official Webflow API — read-only access. Will take about 30 seconds.

Auto-Detect

WebMCP will scan your published site and identify every form: contact forms, newsletter signups, booking forms, and custom forms. Each will get a confidence score and AI-generated tool description.

Review & Enable

Publish

WebMCP will inject the WebMCP declarative attributes into your Webflow site’s custom code on next publish. No manual editing. Your forms will become agent-callable tools.

The Transformation

From Webflow Form to Agent Tool in 60 Seconds

Here's exactly what happens under the hood.

1<form action="/submit" method="post">
2  <label for="name">Full Name</label>
3  <input type="text" name="name" required>
4 
5  <label for="email">Email Address</label>
6  <input type="email" name="email" required>
7 
8  <label for="subject">Subject</label>
9  <select name="subject" required>
10    <option value="General">General Inquiry</option>
11    <option value="Support">Support Request</option>
12    <option value="Sales">Sales Question</option>
13  </select>
14 
15  <label for="message">Your Message</label>
16  <textarea name="message"></textarea>
17 
18  <button type="submit">Send Message</button>
19</form>

No JavaScript written. No API built. Just HTML attributes on your existing Webflow form.

AI Co-Pilot

From URL to Agent-Ready in 15 Minutes

Enter your Webflow URL. The Co-Pilot will handle the rest — analysis, tool generation, security scan, and deployment.

Enter Your URL

Input your Webflow site URL. Co-Pilot will begin crawling your published site.

Site Analysis

Will identify all forms, CMS collections, e-commerce elements, interactive elements, and existing custom code. Expected to take 2–5 minutes.

Tool Generation

For each element: optimal tool name, high-quality description, complete JSON Schema, and confidence score will be generated.

Security Scan

Over-parameterization detection, sensitive field identification, rate limiting suggestions, and OWASP-aligned vulnerability scan will run automatically.

Agent Readiness Score

Will produce a composite score with breakdown: tool coverage, description quality, schema correctness, security posture.

Implementation Roadmap

Will generate a prioritized list: quick wins, high-impact tools, advanced tools, and future opportunities.

Deploy

One-click injection into Webflow Custom Code, or export to paste manually. You’ll be able to review and edit any definition before deploying.

40h→15m

What takes a developer 40 hours of manual research, schema writing, and testing takes the Co-Pilot 15 minutes.

For Agencies

Run Co-Pilot across your entire client portfolio. Batch processing, white-label reports, and bulk management.

Agency plan — $199/mo · Unlimited sites

Co-Pilot Output Includes

Complete tool definitions

AI-written descriptions

JSON Schema for every form

Security audit report

Readiness score breakdown

Implementation roadmap

One-click deploy code

Scenarios

See It in Action

Hypothetical scenarios showing how AI agents could interact with different types of Webflow sites.

$ “Find me a web designer who specializes in healthcare startups”

01Discovers search_portfolio tool on the Webflow site

02Calls: { industry: "healthcare", type: "startup" }

03Returns: 3 matching case studies with descriptions & results

04Agent presents results to the user

05User says “Yes, send them an inquiry”

06Agent calls submit_inquiry tool with pre-filled context

I found a designer with 3 healthcare startup projects. Want me to send them an inquiry about your project?

tools:search_portfoliosubmit_inquiry

$ “Book a table for 4 tonight at 8pm”

01Discovers reserve_table tool on the Webflow site

02Calls: { party_size: 4, date: "2026-02-09", time: "20:00" }

03Form auto-fills, submits via toolautosubmit

04SubmitEvent fires with agentInvoked = true

Done! Your table for 4 is confirmed for tonight at 8pm.

tools:reserve_table

$ “Find me a blue merino wool sweater under $120 in size M”

01Discovers search_products tool

02Calls: { color: "blue", material: "merino wool", max_price: 120, size: "M" }

03Returns: 2 matching products with images, prices, availability

04User: "Add the first one to my cart"

05Agent calls add_to_cart: { product_id: "sw-2847", size: "M" }

Added! Blue Merino Crew Neck, Size M, $89. Ready to checkout?

tools:search_productsget_product_detailsadd_to_cart

$ “I need a project management tool for a 50-person team. Get me a demo.”

01Discovers request_demo tool on the Webflow marketing site

02Calls: { name: "Jane Smith", email: "jane@company.com", company_size: "50", use_case: "Project management for engineering team" }

03Form submits with agentInvoked = true

Demo request submitted! The team typically schedules within 24 hours.

tools:request_demo

Analytics

Planned Analytics for Agent Interactions

Track which tools agents call, how often, and what happens next. Analytics dashboard planned for launch.

webmcp dashboard — illustrative preview

preview

Illustrative mockup -- not real site data

Agent Visits

Track how many AI agents discover and interact with your site's tools

New traffic source

Tool Submissions

See which forms and tools agents use most frequently

Form-level insights

Agent Revenue

For e-commerce sites: attribute revenue to agent-assisted sessions

New sales channel

Conversion Tracking

Compare agent-driven submissions against traditional form completions

Channel comparison

Tracked Tools

search_productsTrack agent queries for product search

submit_inquiryMonitor contact form submissions via agents

search_blog_postsSee which content agents surface to users

reserve_tableTrack booking requests from agent interactions

Tool Health

search_products94passing

submit_inquiry67Add expected response time to description

search_blog_posts88passing

reserve_table71Specify available date/time range

Score

Agent Readiness Score

A planned composite score covering tool coverage, description quality, schema correctness, and security posture.

TOOLS

Detected

SCHEMA

Validated

SECURITY

Scanned

E-Commerce

Let AI Agents Browse Your Store

When agents can search, compare, and add to cart through structured tools, the shopping experience changes. Here is a hypothetical example.

Agent Shopping Journey

Find me a birthday gift for my sister, she likes minimalist jewelry, budget $50-80

I found 4 options. My top pick: the Gold Arc Necklace at $65 — 4.8 stars, free shipping. Want me to add it to your cart?

search_products

Yes, and apply code BIRTHDAY10

Done! Gold Arc Necklace added. With code BIRTHDAY10, your total is $58.50. Ready to checkout?

add_to_cart + apply_discount_code

Auto-Generated Tools

search_products

Search the product catalog by keyword, category, price range, size, color, and availability.

query, category, min_price, max_price, size, colorProduct collection + filter forms

get_product_details

Get full details for a specific product including description, specs, sizing guide, and reviews.

product_id OR product_slugProduct template page

add_to_cart

Add a product to the shopping cart. Specify size and quantity. Returns updated cart summary.

product_id, size, quantityAdd-to-cart form

apply_discount_code

Apply a discount or promo code to the current cart. Returns the new total with discount.

codeDiscount code form

Revenue Attribution

Every agent-driven transaction is trackable via SubmitEvent.agentInvoked. The planned analytics dashboard would show agent-driven product views, add-to-carts, and purchases as a distinct channel.

Agent

Channel tracked

Human

Channel tracked

CMS Collections

Your CMS Works 24/7 for AI Agents

Every Webflow CMS collection becomes a searchable knowledge base that AI agents can query on behalf of your visitors.

Fields

TitleCategoryAuthorPublish DateSummary

Generated Tool Schema

{
  "name": "search_blog_posts",
  "description": "Search the blog for articles by topic, category, or author.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "title": {
        "type": "string",
        "description": "Filter by title"
      },
      "category": {
        "type": "string",
        "description": "Filter by category"
      },
      "author": {
        "type": "string",
        "description": "Filter by author"
      },
      "publish_date": {
        "type": "string",
        "description": "Filter by publish date"
      },
      "summary": {
        "type": "string",
        "description": "Filter by summary"
      }
    }
  }
}

Auto-detected on connect. WebMCP scans your CMS collections, generates tool schemas, and keeps them in sync every time you publish.

Agent Events

Webflow Interactions Meet Agent Events

WebMCP introduces CSS pseudo-classes and JavaScript events that let you create unique experiences for agent-driven interactions.

Selector / EventWhen It FiresUse It For

:tool-form-active

Form is being filled by an agent

Show “AI agent is working…” indicator, highlight form border, pulse animation on active fields.

:tool-form-active

Form is being filled by an agent

Show “AI agent is working…” indicator, highlight form border, pulse animation on active fields.

:tool-submit-active

Agent is submitting the form

Animate submit button, show loading spinner, progress bar.

:tool-submit-active

Agent is submitting the form

Animate submit button, show loading spinner, progress bar.

SubmitEvent.agentInvoked

Form was submitted by an agent

Different success animation for agent vs. human submissions.

SubmitEvent.agentInvoked

Form was submitted by an agent

Different success animation for agent vs. human submissions.

CSS Example

/* Highlight form when agent is filling it */
form:tool-form-active {
  border-color: #4353FF;
  box-shadow: 0 0 20px rgba(67, 83, 255, 0.15);
}

/* Animate submit button during agent submission */
form:tool-submit-active button[type="submit"] {
  opacity: 0.7;
  pointer-events: none;
}

Design Recommendation

Create a subtle “AI agent is working” indicator using the :tool-form-active pseudo-class. A gentle glow around the form plus a small animated badge creates a trustworthy, transparent experience for visitors watching an agent interact.

Imperative API

Optional

Go Beyond Forms with Custom Code

For power users who want to register custom tools, provide dynamic context, or detect agent traffic. Add via Webflow's Custom Code settings.

Custom Search Tool

Add via Webflow’s Site Settings → Custom Code (Before </body>)

1<!-- Webflow Custom Code (Before </body> tag) -->
2<script>
3  if ("modelContext" in navigator) {
4    navigator.modelContext.registerTool({
5      name: "search_portfolio",
6      description: "Search the design portfolio by industry, " +
7        "project type, or technology.",
8      inputSchema: {
9        type: "object",
10        properties: {
11          query: {
12            type: "string",
13            description: "Search terms"
14          },
15          industry: {
16            type: "string",
17            enum: ["Healthcare", "Fintech", "SaaS",
18                   "E-commerce", "Education"],
19            description: "Filter by industry"
20          }
21        }
22      },
23      handler: async (params) => {
24        const results = await fetch(
25          `/api/portfolio?q=${params.query}`
26        );
27        return await results.json();
28      }
29    });
30  }
31</script>

Security & Trust

Security Controls, Built In

WebMCP runs in the browser's security sandbox. WebMCP adds additional layers of protection for your Webflow site.

WebMCP Built-In

— Browser-level security

Browser Security Sandbox

Tools run in the browser’s sandbox — same origin policy applies.

User Interaction Required

requestUserInteraction for sensitive actions — purchases, account changes, data deletion.

Agent Traffic Detection

SubmitEvent.agentInvoked lets your backend distinguish agent vs. human traffic.

No Direct Database Access

Agents interact through your existing forms and APIs. Nothing else is exposed.

WebMCP Adds

— Application-level protection

Agent Firewall SDK

Rate limiting per tool. E.g., max 10 search_products calls per minute per session.

Parameter Validation

Reject malformed or suspicious inputs before they reach your backend.

Audit Logging

Full trail of every agent interaction — who, when, what, result.

Over-Parameterization Protection

Ensure tools only collect the data they actually need.

Sensitive Field Masking

Auto-detect and protect PII fields from agent access.

Compliance Reporting

GDPR/CCPA-aligned agent interaction logs with configurable retention.

Webflow-Specific

Webflow's hosting infrastructure already provides SSL, DDoS protection, and CDN distribution. WebMCP's declarative attributes add zero additional attack surface — they're read-only HTML attributes, not executable code.

Planned Pricing

Start Free. Scale When You're Ready.

Every plan includes WebMCP declarations, agent analytics, and the Agent Readiness Score.

Free

Try it out

Includes

1 Webflow site

3 forms as agent tools

Agent Readiness Score (quick scan)

Basic analytics (agent visits, tool calls)

WebMCP badge on your site

Community support

Starter

$29/mo

For designers & small sites

Includes

1 Webflow site, unlimited forms

Full Agent Readiness Score

Complete analytics dashboard

Custom tool descriptions

CMS collection tools (up to 3)

No WebMCP branding

Email support

Pro

Popular

$79/mo

For growing sites & stores

Includes

3 Webflow sites

AI Co-Pilot (full scan + auto-generation)

Unlimited CMS collection tools

Prompt coverage testing

Description A/B testing

Revenue attribution (E-commerce)

Agent Firewall SDK

Industry benchmarking

Priority support + onboarding call

Agency

$199/mo

For agencies & consultancies

Includes

Unlimited Webflow sites

Client management dashboard

White-label reports

Batch Co-Pilot (multiple sites)

Bulk tool management

API access for custom integrations

Marketplace access

Dedicated account manager

SLA: 4-hour response time

All plans include: WebMCP declarations · Agent Readiness Score · Basic analytics · Feature detection · No vendor lock-in

FAQ

Frequently Asked Questions

Everything you need to know about WebMCP and the Webflow integration.

WebMCP is a proposed web standard — backed by Google and Microsoft — that lets AI agents interact with websites through structured tools instead of scraping and guessing. Think of it as an API that your website automatically exposes to AI agents through the browser itself. It launched in Chrome 146 on February 9, 2026.

Make Your Webflow Site
Agent-Ready

WebMCP is coming soon. Join the waitlist to be among the first Webflow sites that AI agents can interact with.

Designers

Join the Waitlist

Be among the first to connect your Webflow site, auto-detect your forms, and make them agent-ready. No code, no credit card.

Agencies

White-Label for Clients

Planned Co-Pilot for your portfolio. White-label reports, client management, and batch deployment at launch.

Not Sure Yet?

Get Notified at Launch

Join the waitlist and we will notify you when the Agent Readiness Score scanner is available.

Built on Google’s WebMCP standardChrome 146+ supportedNo vendor lock-inCancel anytime

Your Webflow Site Will Speak
the Language AI Agents Understand

WebMCP will be available in Chrome 146+. Webflow’s form architecture maps directly to the protocol’s declarative API — no JavaScript required. WebMCP will make the connection automatic.

WebMCP is a new standard. Webflow sites that adopt it early could be among the first AI agents can interact with.

Built on Google’s WebMCP standardChrome 146+Works with all Webflow plansFree tier planned

Platform

Path

Code

Time

Webflow + WebMCP

Declarative (HTML attributes)

None

Minutes

React / Next.js

Imperative (JavaScript API)

Yes — registerTool(), provideContext()

Hours to days

WordPress

Plugin + PHP hooks

Minimal (plugin handles it)

30 minutes

Custom HTML/JS

Either API

Yes — full implementation

Days to weeks

1<form action="/submit" method="post"> 2 <label for="name">Full Name</label> 3 <input type="text" name="name" required> 4 5 <label for="email">Email Address</label> 6 <input type="email" name="email" required> 7 8 <label for="subject">Subject</label> 9 <select name="subject" required> 10 <option value="General">General Inquiry</option> 11 <option value="Support">Support Request</option> 12 <option value="Sales">Sales Question</option> 13 </select> 14 15 <label for="message">Your Message</label> 16 <textarea name="message"></textarea> 17 18 <button type="submit">Send Message</button> 19</form>

{ "name": "search_blog_posts", "description": "Search the blog for articles by topic, category, or author.", "inputSchema": { "type": "object", "properties": { "title": { "type": "string", "description": "Filter by title" }, "category": { "type": "string", "description": "Filter by category" }, "author": { "type": "string", "description": "Filter by author" }, "publish_date": { "type": "string", "description": "Filter by publish date" }, "summary": { "type": "string", "description": "Filter by summary" } } } }

/* Highlight form when agent is filling it */ form:tool-form-active { border-color: #4353FF; box-shadow: 0 0 20px rgba(67, 83, 255, 0.15); } /* Animate submit button during agent submission */ form:tool-submit-active button[type="submit"] { opacity: 0.7; pointer-events: none; }

1 2<script> 3 if ("modelContext" in navigator) { 4 navigator.modelContext.registerTool({ 5 name: "search_portfolio", 6 description: "Search the design portfolio by industry, " + 7 "project type, or technology.", 8 inputSchema: { 9 type: "object", 10 properties: { 11 query: { 12 type: "string", 13 description: "Search terms" 14 }, 15 industry: { 16 type: "string", 17 enum: ["Healthcare", "Fintech", "SaaS", 18 "E-commerce", "Education"], 19 description: "Filter by industry" 20 } 21 } 22 }, 23 handler: async (params) => { 24 const results = await fetch( 25 `/api/portfolio?q=${params.query}` 26 ); 27 return await results.json(); 28 } 29 }); 30 } 31</script>

Your Webflow Site Will Speakthe Language AI Agents Understand

Webflow's Declarative Architecture Maps Directly to WebMCP

Three Paths. One Outcome: Agent-Ready.

Zero Code

Connect

Auto-Detect

Review & Enable

Publish

Low Code

Everything in Zero Code

Custom Tools via Custom Code

Non-Form Interactions

Dynamic Context

Agency Mode

Run AI Co-Pilot

Auto-Generate Everything

Agent Readiness Score

One-Click Deploy

Zero Code

Connect

Auto-Detect

Review & Enable

Publish

From Webflow Form to Agent Tool in 60 Seconds

From URL to Agent-Ready in 15 Minutes

Enter Your URL

Site Analysis

Tool Generation

Security Scan

Agent Readiness Score

Implementation Roadmap

Deploy

For Agencies

See It in Action

Planned Analytics for Agent Interactions

Agent Readiness Score

Let AI Agents Browse Your Store

Revenue Attribution

Your CMS Works 24/7 for AI Agents

Blog Posts

Portfolio

Team Members

Resources

Locations

FAQ

Webflow Interactions Meet Agent Events

Design Recommendation

Go Beyond Forms with Custom Code

Custom Search Tool

Security Controls, Built In

WebMCP Built-In

Browser Security Sandbox

User Interaction Required

Agent Traffic Detection

No Direct Database Access

WebMCP Adds

Agent Firewall SDK

Parameter Validation

Audit Logging

Over-Parameterization Protection

Sensitive Field Masking

Compliance Reporting

Webflow-Specific

Start Free. Scale When You're Ready.

Free

Starter

Pro

Agency

Frequently Asked Questions

Make Your Webflow Site Agent-Ready

Join the Waitlist

White-Label for Clients

Get Notified at Launch

Your Webflow Site Will Speakthe Language AI Agents Understand

Webflow's Declarative Architecture Maps Directly to WebMCP

Three Paths. One Outcome: Agent-Ready.

Zero Code

Connect

Auto-Detect

Review & Enable

Your Webflow Site Will Speak
the Language AI Agents Understand

Make Your Webflow Site
Agent-Ready

Your Webflow Site Will Speak
the Language AI Agents Understand

Make Your Webflow Site
Agent-Ready