Shredly

Inspiration

Shredly lets developers host MCP servers without managing infrastructure. You define your tools in a dashboard and Shredly handles the rest. But those tools lived entirely server-side. WebMCP changes that, the new browser-native standard lets a webpage register tools directly for AI agents to discover and call. The gap was obvious to us, if we could bridge Shredly's hosted tool definitions into site tools, a site owner could add a new tool in their Shredly dashboard and have it appear as a live site tool for ChatGPT — no redeploy, no code change.

What it does

shredly-webmcp is a tiny CDN library that bridges Shredly's hosted MCP servers to the browser's WebMCP API. Drop one tag into your page, point it at your Shredly MCP slug, and AI agents browsing your site immediately see your tools in their Site tools panel. Add a new tool in the Shredly dashboard — it appears on your site automatically, with no redeployment. For tools that require user context, a getToken callback resolves the user's Bearer token fresh on every invocation, so per-user auth works even when the user logs in after the page loads.</p> <h2 id="how-we-built-it">How we built it</h2> <p>The library is a plain ES module, no build step, no bundler, no dependencies. It calls tools/list on Shredly's JSON-RPC API at page load to fetch tool definitions, then registers each one via document.modelContext.registerTool(). An execute handler proxies tools/call back to Shredly, injecting the user's token at invocation time. A 30-second polling loop picks up any tools added or changed in the dashboard without a page reload. We also built a demo site showing the full flow: connect to any Shredly MCP slug, watch the tools render live, and invoke them directly from the UI. The library ships on a CDN at cdn.shredly.io</p> <h2 id="challenges-we-ran-into">Challenges we ran into</h2> <p>document.modelContext did not seem to exist until the ChatGPT desktop app companion browser injects it — and that injection can happen asynchronously after the page scripts have already run. The library had to queue pending tool registrations and flush them the moment the API became available, using a polling loop rather than a one-shot check. We also had to rethink authentication: tools/list (tool discovery) must be unauthenticated so tools register at page load without requiring a token, while tools/call injects the user's token only at invocation time. Getting that split right in the MCP handler required restructuring the auth check to happen after body parsing, not before. CDN cache headers were another gotcha — immutable cache during active development meant stale builds were served long after deploys.</p> <h2 id="accomplishments-that-were-proud-of">Accomplishments that we're proud of</h2> <p>The zero-redeploy update loop works. You can add a tool in the Shredly dashboard, wait 30 seconds, and watch it appear in the ChatGPT Site tools panel on a live deployed site — without touching any code. The library is also small: a single ES module file with no dependencies that any developer can drop into an existing site in two lines. The getToken pattern for per-user auth is clean — it decouples tool registration (which happens at page load) from authorization (which happens at call time), making it work naturally with any auth flow.</p> <h2 id="what-we-learned">What we learned</h2> <p>WebMCP is strict about timing: tools must be registered during the initial page load, not behind a user interaction or async gate. That constraint shaped the entire architecture — the library has to start fetching and registering immediately, before the user has done anything.</p> <h2 id="whats-next-for-shredly">What's next for Shredly</h2> <p>Publishing shredly-webmcp to npm so React, Vue, and Svelte apps can bundle it properly without CDN workarounds. Deeper dashboard integration — showing site owners which of their pages have the library installed and surfacing per-tool invocation analytics. OAuth support for getToken flows where the user needs to authorize access before tools can be called. And as WebMCP adoption grows beyond ChatGPT, making sure the bridge works across every agent that implements document.modelContext.</p>