Watch an AI assistant build production-ready onboarding — a flow, a checklist, a survey, an announcement and a resource center — in a real app, then follow along with the exact prompts.
Usertour is open-source user onboarding with an MCP server
built in: connect an AI assistant like Claude Code, Cursor or Codex, describe the
experience you want, and it authors, themes and publishes the content directly in
your project — matched to your app’s design, verified in your running app.The video below does exactly that against a real app
(shadcn-admin): four prompts, and
after each one — the result live in the app, then the content and data in the
Usertour dashboard.
All you need is a Usertour account and an AI assistant connected to the MCP
server. With Claude Code that’s the plugin (it registers the MCP connection,
the authoring skills, and the SDK-install skill in one):
Then run /mcp and authorize in the browser — pick the project, the
environments, and the access level. That’s the whole setup: you don’t even
install the Usertour SDK by hand — on the first prompt the
assistant notices it’s missing and wires it into the app itself, then builds
the content.
Self-hosting? The plugin defaults to Cloud — point it at your own
instance before connecting (your exact URL is shown in Settings → MCP):
export USERTOUR_MCP_URL="https://<your-usertour-host>/mcp"
Optional, recommended: also install the
Chrome DevTools plugin
so the assistant can open your running app, pick element selectors from the
real DOM, and verify each experience actually renders before publishing —
noticeably better tooltip accuracy.
Using Cursor, Codex, VS Code or another client? See the
MCP connection guide — every client gets the same
one-URL setup, and Settings → MCP in the app shows the steps with your
instance’s URL pre-filled.
Using Usertour, build a user onboarding flow for the Create Task feature.Requirements:- The visual theme must match the website's existing design.- The flow must be production-ready and suitable for launch.- Every step should provide genuine value to users. Avoid adding steps simply for the sake of having a flow — the experience should help users understand and successfully use the feature.
In the app — before building anything, the assistant notices the app has
no Usertour SDK yet and installs it on its own (the loader snippet, init()
and identify()); then the flow runs against the real UI: tooltips anchor to
the actual Create Task controls, and the styling matches the app because the
agent read the design system first and themed the content to it.In the dashboard — the flow appears under Content with its steps,
targeting and a published version; Analytics starts counting views and
completions as sessions come in.
Create a checklist for the features on the User List page.Requirements:- Combine the checklist with relevant onboarding flows to significantly improve product adoption.- Ensure production-level quality.- Match the checklist's visual theme to the website's existing style.
In the app — a checklist panel lists the User List features as tasks;
completing a task can launch the matching flow, so the two content types work
as one adoption journey.In the dashboard — the checklist shows per-task completion in
Analytics, so you can see which features users actually adopt and where
they stall.
Create a survey to collect user feedback about the product's differentfeatures, including:- Feature ratings- Overall satisfaction- Usability feedback- Suggestions for improvement- Open-ended commentsThe survey should be thoughtfully structured and suitable for production use.
In the app — a multi-question survey renders in the app’s own look:
ratings, scales and open-text questions in a sensible order.In the dashboard — every question gets its own breakdown under
Analytics: score distributions for the ratings, and the open-text answers
collected per response, ready to read through (or to hand back to the AI to
summarize).
Use the Usertour MCP to create a production-ready welcome announcement andimprove the Resource Center as one cohesive onboarding experience.Welcome Announcement — use Usertour's native Announcement feature (not aFlow):- Use the speech bubble announcement format.- Target new users only.- Welcome users and briefly introduce the product's core value.- Guide users to the User List page with a clear primary CTA.- Include a link to https://usertour.io/ explaining that the onboarding experience is powered and maintained by Usertour.- Keep the copy concise, helpful, and professional.- Match the website's existing visual style.- Configure sensible display frequency, dismissal behavior, and audience targeting.- Ensure the announcement does not conflict with other active onboarding experiences.Resource Center — make it support the same onboarding journey:- Add an entry that helps users navigate to the User List page.- Make the experiences created in the previous steps accessible from the Resource Center.- Organize resources into clear, user-focused groups.- Use concise titles and descriptions that explain the value of each resource.- Remove or avoid duplicate and low-value entries.- Match the Resource Center's design to the website's visual theme.- Configure appropriate visibility and audience rules.- Ensure all links, actions, flows, surveys, and video content launch correctly.- Make the experience accessible, responsive, and production-ready.
In the app — new users get a speech-bubble welcome pointing them at the
User List page, and the resource center becomes the lasting home for
everything built above: the flow, the checklist and the survey, organized into
groups and launchable on demand.In the dashboard — the announcement and resource center sit alongside the
rest under Content, each with its own targeting and analytics, and
Publish history records what went live in which environment.
Not everything is a four-step journey — one-off tasks are a single prompt. Here
the assistant builds a video modal, verifies the embed actually plays, and
leaves it as a draft for review instead of publishing:
Use the Usertour MCP to create a one-step modal flow featuring thisYouTube video:https://www.youtube.com/watch?v=ZIaOBAjvc38Use the title:**Sam Altman: "Never a Better Time to Do a Startup"**Add concise supporting copy explaining why this is a uniquely promisingtime to build a startup and what viewers can learn from the video.Include a clear watch action and an easy way to close the modal.Match the product's visual style, verify that the video embed workscorrectly, and save the flow as a draft.
