Dashboards

Dashboards are interactive web applications that agents build and serve. They let an agent go beyond text-based conversations and provide a persistent, visual interface -- a monitoring view, a data explorer, a control panel -- that users can access at any time.

How Agents Create Dashboards

Agents create dashboards using MCP tools exposed by the dashboards MCP server. The primary tool is create_dashboard.

create_dashboard

Creates a new dashboard project in the agent's workspace. The tool accepts the following parameters:

• slug -- A URL-safe identifier for the dashboard (e.g. sales-metrics). Used in routing and filesystem paths.
• name -- A human-readable display name shown in the sidebar and header bar.
• description -- A short description of what the dashboard does.
• framework -- Either plain (static HTML/JS) or react (a React-based app).

When the agent calls create_dashboard, Superagent scaffolds a project in the agent's artifacts/ directory, installs dependencies, and starts a dev server. The dashboard becomes immediately available.

start_dashboard

Starts (or restarts) a previously created dashboard by its slug. Useful after code changes or if the dashboard process crashed.

list_dashboards

Returns all dashboards for the current agent, including their status (running, stopped, crashed, starting), port, and metadata.

get_dashboard_logs

Retrieves the console output from a dashboard's dev server process. Agents use this to debug build errors or runtime issues. Accepts an optional clear parameter to reset the log buffer after reading.

What Dashboards Can Contain

A dashboard is a full web application. Agents can build anything that runs in an HTML/JS environment:

• Data visualizations and charts
• Interactive forms and controls
• Real-time monitoring interfaces
• Multi-page applications (when using the React framework)

Dashboards run inside a sandboxed iframe with allow-scripts, allow-same-origin, allow-forms, and allow-popups permissions, plus microphone and camera access. Superagent also injects polyfills that give the dashboard access to browser APIs and an LLM SDK, enabling AI-powered interactive features within the dashboard itself.

Accessing Dashboards

There are several ways to open a dashboard.

Sidebar Navigation

When you expand an agent in the sidebar, its dashboards appear at the top of the submenu, marked with a pointer icon. Click a dashboard to open it in the main content area. Double-click to open it in a new window.

Home Page Cards

The home page shows dashboard cards alongside agent cards in the grid. Each card displays a screenshot thumbnail (when available) and opens the dashboard on click.

Agent Home View

When you select an agent and land on its home view, dashboard cards appear in the right column. These provide quick access without needing to expand the sidebar submenu.

Standalone URL

Every dashboard has a standalone view URL at:

/api/agents/{agentSlug}/artifacts/{dashboardSlug}/view

This page is self-contained: it checks the agent's status, auto-starts it if needed, waits for the dashboard to become available, then displays it in a full-viewport iframe. You can share this URL or bookmark it.

Pop-out Window

In the Electron desktop app, the dashboard toolbar includes an "Open in new window" button that launches the dashboard in a dedicated window. On the web, this opens a new browser tab with the standalone view.

macOS Dock Shortcut

On macOS, the dashboard toolbar includes an "Add to Dock" button. This opens a dialog where you can choose an icon emoji and background color, then creates a macOS dock shortcut that launches the dashboard directly. The shortcut auto-starts the agent and waits for the dashboard, providing a native-app-like experience.

The Dashboard Panel

When you open a dashboard inside Superagent, it renders in a panel with a toolbar at the top. The toolbar shows:

• The dashboard name and description
• An "Add to Dock" button (macOS Electron only)
• An "Open in new window" button
• A "Refresh" button to reload the iframe

Below the toolbar, any pending approval requests from the agent appear as inline review prompts. This means you can approve or deny agent actions (like API calls that require user consent) directly from the dashboard view without switching to a chat session.

Dashboard Lifecycle

Dashboards are tied to their agent's container lifecycle:

1. Creation -- The agent calls create_dashboard, which scaffolds the project and starts the dev server.
2. Running -- While the agent's container is running, the dashboard process serves content on an internal port. Superagent proxies requests from the UI to this port.
3. Stopped -- When the agent stops, the dashboard process stops too. The dashboard files remain on disk.
4. Auto-start -- When you navigate to a stopped dashboard (via the sidebar, a URL, or a Dock shortcut), Superagent automatically starts the agent. The UI shows a loading state until the dashboard is ready.

Dashboard status values are running, stopped, crashed, and starting. The UI polls rapidly (every second) when any dashboard is in the starting state, then slows to a 60-second interval once all dashboards are stable.

Managing Dashboards

Renaming

Right-click a dashboard in the sidebar and select "Rename Dashboard" to edit its display name inline. The name is stored in the dashboard's package.json on the host filesystem.

Deleting

Right-click a dashboard in the sidebar and select "Delete Dashboard" to permanently remove it. This stops the dashboard process (if running) and deletes all of its files. The action cannot be undone.

Screenshots

Superagent automatically captures a screenshot of each dashboard. This thumbnail is displayed on dashboard cards in the home page and agent home view. Screenshots are stored as screenshot.png inside each dashboard's directory and are served directly from the host filesystem, so they remain available even when the agent is stopped.