# Build Product Tours With Your AI Coding Agent

> StepsKit ships an MCP (Model Context Protocol) server, published on npm as `@stepskit/mcp`, that connects StepsKit to an AI coding agent. Agents like Claude Code, Cursor, Codex, and Claude Desktop can install the StepsKit embed and author product onboarding tours directly from your codebase.

*Source: https://stepskit.com/features/ai-agents*

## Setup

Add the server to your MCP client config. Export `STEPSKIT_TOKEN` in your shell
first, so the config holds no secret and can be committed:

```json
{
  "mcpServers": {
    "stepskit": {
      "command": "npx",
      "args": ["-y", "@stepskit/mcp"],
      "env": { "STEPSKIT_TOKEN": "${STEPSKIT_TOKEN}" }
    }
  }
}
```

One token can cover every project on your account — mint it in Account settings
and pick the project per repo with `STEPSKIT_PROJECT`.

Then ask your agent: *"Set up StepsKit in this project and build an onboarding tour."*

Per-client setup for Claude Code, Cursor, and Codex is at [/docs/ai-agents/connect](/docs/ai-agents/connect.md).

## Why this exists

Most onboarding tools assume you leave your editor, open a dashboard, and click through a builder. StepsKit works that way too. But when an AI agent already has your codebase on disk, the fastest path to a live tour is to let the agent do the setup and the first draft — the tours it writes point at your real components and selectors from the start.

## What the agent does

1. **Reads your integration state.** `get_integration_status` reports whether the embed is installed, which domains are allowed, and how many tours exist.
2. **Installs the embed.** The agent detects your framework (Next.js, Vite, plain HTML) and adds the embed snippet to the right file. You review the diff.
3. **Verifies the embed is live.** After you load a page once, `verify_integration` confirms the embed actually pinged StepsKit.
4. **Whitelists your production domain.** `add_allowed_domain` registers the domain your app ships on. `localhost` is always allowed.
5. **Authors the tour — unpublished.** `create_tour` persists a tour from codebase context. It is created unpublished; you publish deliberately from the dashboard.

## Tools exposed to the agent

| Tool | What it does |
| --- | --- |
| `get_capabilities` | Lists what the MCP can and can't do right now, so the agent gives accurate answers instead of promising unsupported behavior. |
| `get_integration_status` | Reads onboarding state — embed installed?, allowed domains, tour count — plus a ready-to-paste install snippet. Called first. |
| `verify_integration` | Confirms the embed has pinged StepsKit and is live after install. |
| `add_allowed_domain` | Whitelists a production domain so tours play there. `localhost` is always allowed. |
| `create_tour` | Authors an unpublished tour from codebase context. Never publishes. |
| `list_tours`, `get_tour` | Lists the project's tours and reads one tour's full editable state — settings, visibility, and steps with ids. |
| `update_tour_config` | Renames a tour and edits behavior settings — navigation buttons, button labels, progress counter, keyboard control, overlay-click behavior, highlight padding. |
| `update_tour_visibility` | Sets who sees the tour and when — audience targeting, URL pattern, minimum screen width, show-once frequency, and trigger (auto-play vs manual). |
| `update_step`, `add_step`, `delete_step`, `reorder_steps` | Edits, adds, removes, and reorders steps. Editing preserves a step's id and its analytics history. |

## Constraints worth knowing

- **The agent cannot publish.** Tours are authored as unpublished drafts; publishing stays a deliberate action in the dashboard.
- **The domain whitelist still applies.** A tour only plays on domains registered via `add_allowed_domain` (plus `localhost`).
- Call `get_capabilities` for the authoritative, current list of what the MCP supports.

## FAQ

**Which AI coding agents work with it?**
Any MCP client. Claude Code, Cursor, Codex, and Claude Desktop today, plus any other tool that speaks the Model Context Protocol. The server is identical for all of them — only the config format differs.

**Does the agent publish tours automatically?**
No. The agent authors unpublished drafts. You review and publish from the StepsKit dashboard.

**Do I still need to paste an embed snippet by hand?**
No. Because the server runs inside an agent that has your codebase on disk, the agent detects the framework and adds the snippet to the right file. You review the change.

## Related

- [AI agents docs](/docs/ai-agents.md) · [Connect your client](/docs/ai-agents/connect.md) · [MCP server reference](/docs/ai-agents/mcp-server.md) · [Capabilities](/docs/ai-agents/capabilities.md) · [Troubleshooting](/docs/ai-agents/troubleshooting.md)
- [All features](/features.md)
- [AI content assistant](/features/ai-content-assistant.md) — a separate feature that drafts step copy inside the dashboard
- [Pricing](/pricing.md)