How to add a product tour to your web app with Claude Code or Cursor

JustOneCX — Thu, 05 Nov 2026 16:03:32 +0000

You can add a product tour to a web app by asking your AI coding assistant to build it. The assistant reads your code, adds stable anchors to the elements the tour points at, saves the tour as a draft and gives you a preview link. Nothing reaches your users until you publish. This guide shows each step with JustOneCX, the tool I am building (disclosure), and what to check before you press publish.

What do you need first?

A web app you can edit, and a coding assistant: Claude Code, Codex, Cursor or Gemini CLI.
A JustOneCX workspace and its public key (Settings → Developers, starts with pk_).
Your site's origin added in Settings → Developers → Domains & CORS. For local work add http://localhost:3000 or your dev port.

If you prefer to do it by hand, the quickstart covers that in about five minutes. The rest of this guide is the assistant route.

How do you connect your assistant?

JustOneCX runs a remote MCP server. In Claude Code:

claude mcp add --transport http justonecx https://api.justonecx.com/mcp

Run /mcp, pick justonecx and sign in through your browser. You choose the workspace and how much the assistant may do:

See your content and setup: reads only.
Create and edit drafts: the default. Nothing your users see changes until a person publishes.
Make changes live: can also publish. It is off unless you choose it.

The assistant can never do more than your own role allows. Cursor, Codex and Gemini CLI use a short config entry instead. The MCP guide has each one. No token goes in any config file.

What do you ask for?

Name one flow. For example: "Add a product tour for the export screen." A vague request such as "add a tour" makes the assistant study your product first and propose a ranked list of options. It then asks which one to build. It does not build all of them.

What does the assistant do?

Here is the order it works in.

Finds the flow in your code. It looks up the route and components, then picks the three to seven moments a new user must notice. Fewer steps are better.
Adds anchors. On each element a step points at, it adds a data-jcx attribute such as data-jcx="export-format-select". This is a normal code change in your repo, so you review it like any other. It also checks your build config for anything that strips data-* attributes in production.
Saves a draft. It writes the tour with save_content. A small tour looks like this:

{
  "key": "export-flow",
  "tour": {
    "name": "Export your data",
    "targeting": { "pages": { "include": [{ "operator": "startsWith", "value": "/settings/export" }], "exclude": [] } },
    "steps": [
      { "id": "welcome", "type": "modal", "title": "Export your data", "body": "Two quick steps and your file is on its way.", "ctaLabel": "Show me" },
      { "id": "pick-format", "type": "tooltip", "target": "[data-jcx=\"export-format-select\"]", "title": "Pick a format", "body": "CSV for spreadsheets, JSON for developers.", "arrowPosition": "bottom" },
      { "id": "run-export", "type": "tooltip", "target": "[data-jcx=\"export-run-button\"]", "title": "Start the export", "body": "We email you a link when it's ready.", "arrowPosition": "top" }
    ]
  }
}

Checks it. validate_tour checks the selectors, the page rule and the step flow. The assistant fixes any selector marked brittle and prefers data-jcx anchors.
Gives you a preview link. The link plays the draft on your site for 24 hours.

It also matches the look of your app when you ask for it, using your theme and design tokens, and picks which side of each element the tooltip sits on from where the element is on the screen. If it cannot tell, it asks you.

How do you review before it goes live?

Check three things.

The code diff. Only data-jcx attributes should have changed. Anything else is worth a question.
The preview. Open the link. Walk through every step. Read the copy: each step should have a short title and one sentence in your users' words.
Who sees it. By default a tour with no targeting shows to everyone on every page. Set page and segment rules if that is not what you want. See targeting.

Then publish. With the default access level the assistant cannot publish, so you click Publish in the dashboard. If you gave it "Make changes live", it publishes only after you say yes.

What will the assistant not do?

It never reads, returns or asks for your Secret key. You set JUSTONECX_SECRET_KEY in your own server environment.
It cannot empty the Trash, export survey responses as a file, or change members, roles, billing or keys. For those it points you to the dashboard page.
Every change it makes shows in your audit log as made by the AI assistant.

What if the tour does not show?

Open your site in a new window. If nothing starts, check the origin in Domains & CORS, the page rule in the tour's targeting and whether the tour is published. The troubleshooting page lists the rest. If an element is not on the page yet, the SDK waits for it (5 seconds by default) and skips the step if it never appears. See how steps are shown.

What next?

Add a "Show me how" button that starts the tour from your code with startTour("export-flow").
Add an announcement or a survey the same way. The assistant uses the same flow for both.
Read the tours guide for multi-page tours and checklists.

Plans from $199/month, priced by monthly active users. Every plan has every feature. If you want to see it first, you can book a demo.

DEV Community: JustOneCX