AgentReady — WebMCP Builder for Framer

Turn any Framer site into an agent-ready experience. AgentReady publishes secure WebMCP tools for forms, commerce, payments, content, and AI workflows—without code.

Comment

Inspiration

Framer allows designers and no-code creators to publish polished websites without building a traditional application stack. However, those sites are still designed mainly for people using visual interfaces.

When an AI agent visits one of these sites, it usually has to infer intent from pixels, text, and DOM structure. It must guess what a button does, which fields belong together, and when an action becomes consequential.

WebMCP provides a better foundation: websites can expose explicit, typed tools that agents can call directly. But adding WebMCP manually still requires JavaScript, JSON Schema, browser-security knowledge, and custom integration work.

I built AgentReady to make that capability accessible to Framer creators.

What it does

AgentReady is a no-code WebMCP builder delivered as a Framer Workspace Plugin.

It scans the active Framer project for pages, text, links, CMS collections, forms, conversations, and commerce surfaces. The site owner then chooses which capabilities agents may use.

AgentReady generates and publishes a top-level WebMCP runtime through Framer Custom Code. The current runtime can expose up to 30 typed tools covering:

  • Site and section search
  • Same-origin navigation
  • CMS discovery and item retrieval
  • Form inspection and preparation
  • Advanced options, addresses, dates, and multi-step forms
  • Human-mediated file selection
  • Visible chat composition and sending
  • Generic checkout preparation
  • Shopify catalog, product, policy, cart, and checkout operations
  • Cloudflare knowledge search and provenance
  • Agentic payment challenge discovery
  • Licensed structured content and Pay Per Crawl metadata

The public demonstration exposes all 30 tools.

Why WebMCP is essential

AgentReady is not a chatbot wrapper or a conventional browser-automation demo. Its core product is the WebMCP tool surface published by each Framer site.

Instead of asking an agent to visually locate and click controls, the site declares narrow operations usingdocument.modelContext.registerTool() and typed input schemas.

This makes agent behavior faster, more inspectable, and more reliable. It also lets the site owner define the boundary between what an agent may prepare and what a person must approve.

For example, an agent can find a product, select the correct variant, and prepare a Shopify cart. The hosted checkout and final payment remain human-only. Similarly, an agent can populate a form, while submission is exposed as a separate capability requiring an explicit decision.

Human and agent collaboration

AgentReady lets a person and an agent work on the same live page and share its current state.

An agent can:

  • Search and understand the site
  • Navigate to relevant content
  • Retrieve structured CMS information
  • Prepare a complex form
  • Continue a visible conversation
  • Compare Shopify products and variants
  • Create a cart and prepare checkout

The person remains responsible for:

  • Selecting local files
  • Approving consequential submissions
  • Entering credentials
  • Completing CAPTCHA or biometric checks
  • Opening hosted checkout
  • Confirming payment

This division was difficult to express reliably with ordinary visual browser automation. WebMCP makes it part of the website's explicit contract.

How I built it

The project has three main layers.

Framer Workspace Plugin

The React and TypeScript plugin scans the current Framer project and presents capability switches in a native-looking interface. It creates an escaped runtime configuration and installs it through the Framer Plugin API.

Browser WebMCP runtime

The generated runtime executes in the published page's top-level context and registers the selected imperative tools. It validates inputs, limits output size, supports cancellation, marks retrieved content as untrusted, and applies human-review boundaries to sensitive operations.

Cloudflare and Shopify integrations

Direct mode keeps page-state actions in the visitor's browser.

Hybrid mode keeps UI actions local while routing selected network-backed operations through a same-origin Cloudflare MCP gateway. The repository also includes Workers for knowledge retrieval, analytics, Browser Run verification, uploads, Agentic Payments, and licensed structured content.

Shopify Storefront MCP and UCP provide live catalog, product, variant, cart, and checkout operations. Cart identifiers remain in browser session storage, and payment is never performed by AgentReady.

Challenges

One major challenge was Framer's execution model. Plugin interfaces run separately from the published page, while imperative WebMCP tools must be registered in the page's top-level context. AgentReady solves this by generating a self-contained Custom Code runtime.

Another challenge was safely exposing real website actions. Forms, conversations, commerce, files, and payments have different trust boundaries. I separated preparation from execution and kept credentials, local file bytes, wallet keys, OTPs, and final payment outside WebMCP arguments.

Shopify's UCP responses also contained more protocol data than an agent needed. I implemented compact product and variant results so the agent receives stable IDs and actionable information without oversized responses.

Finally, WebMCP is still evolving. I built automated tests around registration, input schemas, cancellation, duplicate-safe startup, result limits, gateway isolation, and all 30 runtime tools.

Accomplishments

  • Published a working Framer Marketplace plugin
  • Exposed 30 functioning WebMCP tools on a live Framer site
  • Demonstrated real ChatGPT Site Tool invocations
  • Connected live Shopify UCP catalog and cart operations
  • Added Cloudflare-backed knowledge, trust, payment, and delivery options
  • Implemented explicit safety boundaries for forms, files, credentials, and payments
  • Created automated runtime, gateway, deployment, and live-site validation
  • Released the complete project under the MIT License

What I learned

WebMCP works best when it is treated as a product interface rather than a hidden automation layer.

Good tools need narrow schemas, bounded output, useful descriptions, visible state changes, cancellation support, and explicit trust boundaries. The most valuable design decision was not maximizing what the agent could do—it was making it clear where the agent should stop and return control to the person.

What's next

Next, I want to add incremental CMS synchronization, reusable capability presets, stronger WebMCP evaluation tooling, and a guided production setup for Cloudflare-proxied custom domains.

The larger goal is to make agent readiness a normal publishing step for every Framer site.

Built With

Share this project:

Updates

Submission history