Overview
Let an AI agent operate your website — expose your app's real operations as tools on the WebMCP standard
What Edge MCP is — and isn't
The operating principle and its boundaries
What people can suddenly do
What visitors gain when your site is agentified
How it works
Tools, resources, and runtime discovery
Where it fits
Edge MCP and the Web SDK, side by side
How to get started
One prompt in your AI coding tool
An agent embedded on your website can talk — but when the user says "add the OLED to my cart," the best it can do is point at the button. Edge MCP lets the agent operate the app itself: your site declares which of its real operations an agent may run (products.search, cart.add, checkout.placeOrder), and the agent calls them — the cart opens, the page navigates, the order gets placed. @napster-corp/edge-mcp is a thin layer on the WebMCP standard: it polyfills document.modelContext in every browser and adds live-state resources and console debugging on top — your registrations stay pure standard WebMCP, so any compatible agent can drive them, the Napster Omniagent included.
What Edge MCP is — and isn't
The rule that explains everything: the agent operates your website through the website's own functions. If the website can do something, the agent can do it. If the website can't, neither can the agent — Edge MCP adds no capabilities your app doesn't already have; it makes the ones you choose callable by an agent.
| Edge MCP is… | Edge MCP is not… |
|---|---|
| An integration you build into your own website's source code — each tool wired to the app's real functions, the same ones your buttons and forms call. | A crawler, screen-reader, or plugin you can drop onto any page — a locked-down site you can't modify won't work. |
| Bounded by your app: the agent can do exactly what the website can do. | Magic: it grants no abilities beyond your app's existing features. |
| A curated surface — the agent can only call what you deliberately expose, at the safety level you set. | Free-roaming access to everything on the page. |
| Running as the signed-in user, through your existing auth, validation, and business rules. | A permission escalation or a parallel backend to keep in sync. |
| The open WebMCP standard — any compatible agent can drive the surface. | A Napster lock-in: remove the toolkit and your tools still work against the native API. |
What people can suddenly do
The agent can now operate the website — anything your site can do, a visitor can now have done by asking:
- "I'm flying to Venice on May 3rd. Find me somewhere nice near the canal, around $300 a night." — the agent searches your booking site, compares options, and prepares the reservation for the user to confirm. Fifteen seconds instead of fifteen screens.
- "Refill my prescription, and book me the first pharmacist slot on Tuesday morning." — someone who would never learn a new app just says it, in their own words, in any language.
- A prospect lands on your product at midnight — instead of a contact form and a wait, the agent walks them through the real product, doing the clicks and answering as it goes.
Installation
npm or a script tag — plus the one-prompt setup with your AI coding tool.
Tools
What the agent can DO — standard registerTool with safety annotations.
Resources
What the agent can SEE — live state pushed as it changes.
Testing
Chrome DevTools and console logs — no agent required.
How it works
- Your app registers tools on
document.modelContext— each one a name, a description the agent reads, a JSON Schema for arguments, and anexecutethat calls your app's own code. - Optionally, it registers resources — live state slices (the current page, the cart) pushed to the agent the moment they change.
- An agent on the page — embedded with the Web SDK, or any WebMCP-compatible agent — discovers the surface at runtime: it detects
document.modelContext, reads the tool list, and wires itself up. No glue code on your side. - Because the UI and the agent call the same functions on the same stores, the page stays in sync automatically — an agent's
cart.addre-renders every component bound to the cart.
Where it fits
Edge MCP is one half of putting an agent on a website; the Web SDK is the other:
| What it gives the agent | |
|---|---|
| Edge MCP | Hands and eyes — the ability to operate your app and observe its state |
| Web SDK | Presence — the face, voice, and session your users talk to |
For the end-to-end journey — agentify the site first, then add the agent — follow Add an AI Agent to Your Website.
How to get started
You don't have to build the integration by hand: with the Napster agent skills, your AI coding tool installs the library, proposes what to expose from your actual code, and writes the tools — nothing lands without your approval. Head to Installation to begin.