MCP — Drive Stepshots from AI Agents

Overview

Stepshots speaks the Model Context Protocol on both ends of the workflow, so an AI agent can go from "record a demo of the signup flow" to a published, analyzed demo without you touching a terminal:

	Local server (`stepshots mcp`)	Hosted server (`stepshots.com/mcp`)
Runs	on your machine, inside the open-source CLI	on Stepshots
Covers	recording, verifying, uploading — needs your repo's config and a local browser	your hosted demos, analytics, tours
Auth	your existing `stepshots login`	OAuth in the browser, or an API token header
Plan	free (the CLI is open source)	all plans

Use both together: the local server produces and publishes demos, the hosted one reads and manages what's published. The MCP launch post explains why the workflow has two servers and what shipped in the first release.

Local server: recording tools

The CLI ships an MCP server over stdio. With Claude Code:

claude mcp add stepshots -- stepshots mcp

Any MCP client works — configure the command stepshots mcp with no arguments:

json

{
  "mcpServers": {
    "stepshots": { "command": "stepshots", "args": ["mcp"] }
  }
}

Run it from the project directory containing stepshots.config.json, or pass --config. Tools:

Tool	What it does
`get_schema`	JSON Schema for `stepshots.config.json` (or `*.tour.json` with `kind: "tour"`) — lets the agent write a valid config
`list_tutorials`	The tutorials defined in the config: key, title, step count
`record`	Record tutorials into `.stepshot` bundles with headless Chrome
`verify`	Replay tutorials against the live app and report drift, with a repair hint per failure
`upload`	Publish bundles to the dashboard, or update an existing demo in place via `demo_id`

upload needs a stored login (stepshots login) or STEPSHOTS_TOKEN. Everything else runs without an account.

Hosted server: dashboard tools

The hosted endpoint lives at https://stepshots.com/mcp and authenticates with OAuth — no token pasting:

claude.ai / Claude desktop: add a custom connector with the URL https://stepshots.com/mcp. Claude discovers the OAuth endpoints, sends you to a consent page, and you approve in the browser.
Claude Code:

claude mcp add --transport http stepshots-dashboard https://stepshots.com/mcp

The OAuth flow opens in your browser on first use. Alternatively, skip OAuth and pass a token header: --header "Authorization: Bearer <token>" with a key from Settings or stepshots login.

Authorizing an MCP client issues its own access token — your CLI login stays valid.

Tool	What it does
`list_demos`	Your demos: id, title, publish state, views, folder
`get_demo`	One demo in full, including every step
`get_demo_analytics`	Views, unique visitors, per-step completion and average duration for one demo
`get_workspace_analytics`	The dashboard overview as data: totals and per-demo performance
`set_demo_public`	Publish or unpublish a demo
`list_tours`	Your guided tours

What agents can do with this

"Record the onboarding flow and publish it" — the agent writes the config (get_schema), records (record), and uploads (upload), all locally.
"Did the release break any demos?" — verify replays every tutorial and returns exactly which selector drifted and how to fix it. The same check runs in CI — see CI & Automation.
"Where do viewers drop off in the pricing demo?" — get_demo_analytics returns per-step completion; the agent reads the funnel and suggests which step to cut.
"Unpublish the old demo and publish the new one" — list_demos + set_demo_public.