AI authoring with MCP

Build tours with your coding agent.

Create a workspace API key, connect Steppr’s MCP server to Claude Code, Cursor or any other MCP client, and describe the flow you want. The agent runs in your repository, so it can read your components and use selectors that exist in your markup. Steppr saves the result as a draft, and nothing reaches your users until a person has reviewed it and published it from the dashboard.

Read the setup guide
Coding agent
> Draft a tour for the  new-project flow  steppr get_authoring_guide Read NewProjectButton.tsx steppr create_tour_draft  3 steps · status: draft
Tour
Draft
Create your first project
  • 1 · Tooltip
    [data-testid="new-project-button"]
  • 2 · Tooltip
    [data-testid="project-name-input"]
  • 3 · Modal
    centred card
Not live
What ships
  • MCP server over Streamable HTTP, authenticated with a workspace API key sent as a Bearer token
  • Setup instructions for Claude Code and Cursor; any MCP client that can send an Authorization header can connect
  • The same operations are available as a REST API under /api/v1
  • Selector rules match the click-to-build picker: data-testid first, then a stable id, then a stable class chain
  • Creates draft tours with tooltip, modal and hotspot steps, targeting and triggers, and draft checklists
  • There is no publish operation: tour responses carry a dashboard link and a preview link that renders the draft on your own site
  • Keys are workspace-scoped, shown once, stored as a hash, revocable immediately, and either Read & write or Read only
  • Included on every plan, including Starter and the 7-day trial; your plan’s tour and checklist limits still apply
How it works

AI authoring (MCP), in detail.

01

Why a coding agent and not a prompt box in our dashboard.

Every anchored step depends on a CSS selector that matches an element in your app. A text box in the Steppr dashboard has no view of your code, so it would have to guess at selectors. Your coding agent already has the repository open. It can find the component that renders the button, check whether it has a data-testid, and use that. Steppr gives the agent an authoring guide covering step types, selector rules, copy limits and targeting, and the agent sends back the whole tour in one call.

  • Selector priority: data-testid, then a stable id, then a short chain of stable classes
  • The guide tells the agent not to guess, and to propose adding a data-testid when an element has no stable hook
  • The tour and all of its steps are written in one transaction, so a rejected call leaves nothing half-built
02

Setup is an API key and an MCP connection.

An owner or admin creates a key under Settings, API keys, and chooses Read & write or Read only. In Claude Code you add the server with one claude mcp add command. In Cursor you add an entry to .cursor/mcp.json. Any other client that speaks MCP over Streamable HTTP connects with the server URL and an Authorization header. The docs have the exact commands, and when you create a key the dashboard shows the Claude Code command with that key already filled in.

03

Drafts only, and a person publishes.

The MCP server and the REST API have no publish operation and cannot change a tour’s status. If the agent edits a tour that is already live, the edit is saved to the draft and your users keep seeing the published version until someone republishes. Agents do get selectors wrong: an element may only render for some users, or a list may contain several matches. So every tour response includes a link to the editor in the dashboard and a preview link that opens your own site with the draft rendered by the snippet. If a step misses its element, re-pick it with the click-to-build picker, then publish.

  • Preview links are signed and expire after 24 hours; fetching the tour again returns a fresh one
  • Preview needs the snippet installed and an allowed origin on the workspace. Without one you still get the dashboard link
  • Deleting tours and creating announcements are not available to the agent
04

Keys are scoped to authoring.

A key belongs to one workspace and is accepted only by the MCP server and the /api/v1 authoring API. The rest of the Steppr API rejects it, so a key cannot read or change billing, team members or other keys. The full key is shown once when you create it and only a SHA-256 hash is stored. Revoking a key takes effect on the next request. A workspace can hold up to 20 active keys, which is enough to issue one per developer or tool and revoke them individually. Requests are rate limited to 120 per minute per IP address.

Plans. API keys and the MCP server are included on every plan and during the 7-day trial. Drafts count towards your plan’s limits: five tours and one checklist on Starter, twenty tours and three checklists on Growth, unlimited on Scale and Enterprise. Event-based triggers still require Growth or above. See pricing

Common questions

AI authoring (MCP) FAQ.

Straight answers. If yours isn't here, email hello@steppr.io and a founder replies.

No. Neither the MCP server nor the REST API has a publish operation, and neither can change a tour’s status. Everything an agent creates is a draft. If it edits a tour that is already published, the change stays in the draft until a person republishes from the dashboard.

The docs have step-by-step setup for Claude Code and Cursor. Any MCP client that supports remote servers over Streamable HTTP with a custom Authorization header can connect. The same operations are also available as a REST API for scripts.

You will see it in the preview. When a selector does not match, the snippet waits up to three seconds for the element and then shows that step as a centred card instead of pointing at the element. Open the tour in the dashboard, start the builder on your site and click the correct element, or ask the agent to fix it. Then publish.

Tours and checklists in one workspace, through the authoring API and the MCP server only. A Read only key can list and read. A Read & write key can also create and edit drafts. No key can reach billing, team members, other keys or any other part of the dashboard API, and no key can publish or delete a tour.

No. API keys and the MCP server are part of every plan, including Starter and the trial. The tours and checklists an agent creates count towards the same plan limits as ones you build by hand.

Publishing, deleting tours and creating announcements are only possible in the dashboard. Checklists can be created through the API but not edited afterwards. Elements inside a Shadow DOM or a cross-origin iframe on your site cannot be targeted, which is the same limit the SDK has.

Try AI authoring free for 7 days.

No card to start. The trial unlocks Growth-tier features so you can evaluate the whole product, not a stripped-down preview.