How do I let AI agents take actions on my SaaS dashboard?
For SaaS product teams and full-stack developers · Based on Rachel Lee's Agentic Web Publishing Framework
// TL;DR
If you build or maintain a SaaS dashboard — project management, analytics, CRM, or any interactive web app — Rachel Lee's Agentic Web Publishing Framework lets you expose your dashboard's actions to AI agents without building a separate integration. Use Web MCP to register your existing UI functions as tools that in-browser agents call directly, bypassing screenshot-based navigation. Add MCP tools with HTTP transport so agent harness users can create items, filter data, and get summaries from inside Claude Desktop. Your SaaS becomes agent-accessible from one backend with your existing API functions.
Why should my SaaS dashboard support AI agents?
Your users are already asking AI agents to help them manage tasks, analyze data, and automate workflows. If your dashboard is only accessible through manual clicking, users must leave their agent to interact with your product. Worse, in-browser agents attempting to use your dashboard will resort to screenshot-based DOM traversal — slow, token-expensive, and unreliable.
Rachel Lee's framework solves this with two complementary approaches: Web MCP for in-browser agents interacting with your dashboard pages, and MCP tools with HTTP transport for agent harness users accessing your functionality from inside Claude Desktop or Copilot.
The key insight is the One Server, Three Clients principle: your existing backend API functions already do everything. You are not building new functionality — you are making existing functionality discoverable and callable by agents.
How do I register my dashboard actions as Web MCP tools?
Use the imperative Web MCP model on each dashboard page. Your UI already calls internal API functions when users click buttons or submit forms. Register those same functions as tools:
```javascript
if (navigator.modelContext) {
navigator.modelContext.registerTool(
'create_item',
'Create a new project item with a title and optional description',
{
type: 'object',
properties: {
title: { type: 'string' },
description: { type: 'string' }
},
required: ['title']
},
async (params) => {
const result = await createItem(params.title, params.description);
return { success: true, id: result.id };
}
);
navigator.modelContext.registerTool(
'filter_by_status',
'Filter dashboard items by status: active, completed, or archived',
{
type: 'object',
properties: { status: { type: 'string', enum: ['active', 'completed', 'archived'] } },
required: ['status']
},
(params) => filterItems(params.status)
);
navigator.modelContext.registerTool(
'get_summary',
'Get a summary of current project metrics and item counts',
{ type: 'object', properties: {} },
() => getSummary()
);
}
```
The `createItem`, `filterItems`, and `getSummary` functions are the same ones your UI buttons already invoke. The `if (navigator.modelContext)` guard ensures the registration only happens when an agent is present — your dashboard works identically for regular users.
This approach eliminates DOM traversal and visual model inference for in-browser agents. The agent calls your functions directly, reducing token cost and dramatically improving reliability compared to screenshot-based navigation.
How do I expose my SaaS functionality via MCP tools for agent harnesses?
For users working in Claude Desktop or similar harnesses, add an HTTP MCP server endpoint to your existing backend. Map your core dashboard actions to MCP tools:
- `list_projects` — returns active projects with IDs and metadata
- `create_item` — creates a new item, returns the created object
- `get_dashboard_summary` — returns metrics and counts as structured JSON
- `filter_items` — filters by status, assignee, date range
Use HTTP transport at `/mcp`. Your users paste the URL into their agent settings — one step, done. Authenticate using the same auth mechanism your API already uses (tokens, API keys).
For tools that return visual data — charts, tables, kanban views — build an MCP App that renders your dashboard component inside the agent harness. Bundle your design system's CSS, use Canvas API for charts (zero inference cost), and use `call_server_tool` for any data fetches the app needs.
What security considerations apply to agent-accessible SaaS dashboards?
Agent access should respect the same authorization your API enforces. MCP tools run through your server, so apply the same authentication and permission checks. Web MCP tools run in the user's browser session, so they inherit the user's existing auth context — the agent cannot do anything the logged-in user cannot do.
For MCP Apps, remember the sandbox constraints: no local storage (do not store tokens in the app), no direct network access (all requests go through `call_server_tool`), and no unchecked external resources (configure CSP). The Mother May I pattern is actually a security benefit here — every action is mediated.
What is my next step?
Identify your dashboard's three most common user actions — likely creating an item, viewing a summary, and filtering a list. Add Web MCP imperative registration for these three actions on the relevant dashboard pages. Test with the MCP B browser extension to confirm tools are registered and callable. Then stand up an HTTP MCP server endpoint with the same three tools. You will have agent-accessible SaaS functionality live within a day, using functions you have already written.
// FREQUENTLY ASKED QUESTIONS
Does Web MCP on my SaaS dashboard create security risks?
Web MCP tools run in the user's browser session with the user's existing authentication context. The agent cannot perform actions the logged-in user is not authorized to do. Apply the same permission checks in your callback functions that your UI already enforces. The agent is calling the same functions your buttons call — no new attack surface is created beyond what the authenticated user already has access to.
Can an in-browser agent fill out complex multi-step forms on my dashboard?
Yes, but register the form submission as a single Web MCP tool rather than expecting the agent to fill fields individually. Define the tool's input schema with all required fields, and have the callback function handle validation and submission. This is more reliable than the agent attempting to interact with individual form fields via DOM manipulation, and it reduces token cost significantly.
How does the Agentic Web Publishing Framework compare to building a Zapier or Make integration for my SaaS?
Zapier and Make are automation platforms that connect your SaaS to predefined triggers and actions in a workflow builder. The Agentic Web Publishing Framework makes your SaaS natively accessible inside AI agents — users interact conversationally, agents call your tools contextually, and your dashboard works as an interactive MCP App. The framework is for agent-native access, not workflow automation. They are complementary, not competing approaches.