How to Let AI Agents Take Actions in Your Dashboard
For SaaS product teams · Based on Rachel Lee's Agentic Web Publishing Framework
// TL;DR
SaaS product teams can use Rachel Lee's Agentic Web Publishing Framework to let in-browser AI agents take actions on behalf of users — creating items, filtering, and summarizing — without relying on fragile screenshot-based navigation. Using Web MCP's imperative model, you register tools on each dashboard page whose callbacks reuse the same internal API functions your UI already calls. The agent invokes these directly, bypassing DOM traversal and visual model inference, which reduces token cost and improves reliability. It's the fastest way to make your dashboard genuinely agent-operable without a separate agent-only backend.
Why is screenshot-based agent navigation a problem for dashboards?
When an in-browser agent operates your dashboard by taking screenshots and guessing at the DOM, it burns tokens on visual model inference and frequently misfires — clicking the wrong button, misreading state, or failing on dynamic content. Rachel Lee's framework replaces that guesswork with Web MCP, which makes each dashboard page a mini MCP tools server. The agent calls your registered tools directly instead of inferring what to click, dramatically improving reliability for real actions.
This fits the framework's 'One Server, Three Clients' goal: the same backend that serves your human users in browsers also serves the agents operating those browsers, with no separate agent-only build.
How do I register Web MCP tools on my dashboard pages?
Use the imperative model, since dashboards are JavaScript- and API-driven rather than form-based. On each page, call `navigator.modelContext.registerTool(name, description, inputSchema, callbackFn)` for the actions relevant to that view — for example `create_item`, `filter_by_status`, and `get_summary`. The critical efficiency: the callback is the same internal API function your UI already uses for that action. You're not writing new logic, just exposing existing functions to the agent.
Always check `if (navigator.modelContext)` before registering so browsers without agent support degrade gracefully and your dashboard works normally for everyone else.
How do I write tool descriptions the agent will use correctly?
Write a clear description for each tool, because the agent reads it to decide when to call it. Name tools the way a user would describe the action — `create_item`, `filter_by_status`, `get_summary` — and define an input schema with only the fields truly required. Keep the tool set per page focused on that view's real actions rather than exposing every internal function, which would bloat the agent's tool-selection reasoning and reduce reliability.
Should I also build MCP Apps and an HTTP server?
It depends on which client types you target — you can target one, two, or all three. If your priority is autonomous in-browser agents acting inside your dashboard, Web MCP alone delivers most of the value. If you also want users operating Claude Desktop to view dashboard data, add HTTP MCP tools and, for rich visual summaries, MCP Apps built on your design system. Start with Web MCP for reliable in-browser actions, then expand.
Remember Web MCP is inspired by but not spec-compliant with MCP — treat them as parallel and build for the abstraction so your implementation survives spec divergence.
How do I verify agents can actually drive my dashboard?
Use the MCP B browser extension as a debugging harness to confirm your Web MCP tools are registered, visible, and callable by the model on each page. Walk through the real flows: can the agent call `create_item` with the right schema, `filter_by_status` on a list view, and `get_summary` on a report page? Confirm each callback hits your existing API correctly and returns to the agent.
Your next step: pick your highest-value dashboard action — often item creation or status filtering — wrap its existing UI function in a `navigator.modelContext.registerTool` call, and test it with the MCP B extension.
// FREQUENTLY ASKED QUESTIONS
Do I need to rewrite my dashboard logic to support agents?
No. With Web MCP's imperative model, each registered tool's callback is the same internal API function your UI already uses. You're exposing existing functions to the agent, not rewriting logic — which is why it's a low-effort way to make your dashboard reliably agent-operable.
How does Web MCP reduce token cost compared to screenshot navigation?
Screenshot navigation forces the agent to run visual model inference and guess at the DOM on every step. Web MCP lets the agent call your registered tools directly with a defined input schema, skipping visual inference and DOM traversal entirely. Fewer tokens per action and far higher reliability on dynamic dashboard content.
Will adding Web MCP break my dashboard for regular users?
No, as long as you check `if (navigator.modelContext)` before registering tools. Browsers without agent support skip registration and your dashboard behaves exactly as before. This graceful degradation is a required step in the framework so human-in-browser users are never affected.