AutoTour
Turn a web app and a user journey into modular product walkthroughs.
Release npm version CI License Node.js
AutoTour is an open-source toolkit for coding agents that captures reliable, reviewable product documentation from real browser journeys. Create annotated screenshots, DOM replays, modular videos, and dependency-aware refresh plans without recapturing everything after every UI change.
Status: AutoTour is actively developed. The current package supports modular screenshots, raw WebM video, DOM autoplay replays, dependency-aware invalidation, selective regeneration, and managed Markdown screenshot synchronization.
Why AutoTour?
- One journey, multiple outputs — produce screenshots, HTML replays, or video from the same schema-shaped source.
- Modular by design — replace only the walkthrough module affected by a code change.
- Agent-friendly — accessible role/name targets, validation, local review, and clear CLI workflows.
- Safe to publish — generated output is local by default, credentials stay in environment variables, and sensitive content can be redacted before capture.
Quick start
npm install --global autotour
autotour init
autotour doctor
AutoTour requires Node.js 20 or newer and Chromium for browser capture. For agent-oriented plugin installation, checkout setup, or connected services, see INSTALL.md.
Ready-to-use prompt for an AI agent
Copy this prompt into your coding agent when you want it to install and use AutoTour:
Install and use the AutoTour plugin from https://github.com/agenthouse-org/autotour.
First read the repository's AGENTS.md and AutoTour's INSTALL.md. Use the host's supported
local or Git plugin-installation flow to load the repository's root plugin.json and
skills/create-autotour/SKILL.md. Verify that the AutoTour skill is available before using it.
In the target application, install the runtime with `npm install autotour`, then run
`npx playwright install chromium`, `npx autotour doctor`, and `npx autotour init`.
Keep credentials in environment variables, reuse existing configuration, and place generated
output under an ignored `.autotour/output/` directory. Before capturing anything, ask me for
the audience, exact journey, application URL/environment, permitted access, output format,
destination, and any duration, cursor, zoom, or motion preferences.
A small example
Define a journey once, then choose the output you need:
import { readFile } from "node:fs/promises";
import { captureJourney } from "autotour";
const journey = JSON.parse(
await readFile("examples/agenthouse-dealdesk.json", "utf8")
);
const result = await captureJourney({
journey,
outputDir: ".autotour/output/dealdesk",
recordScreenshots: {
viewport: { width: 1280, height: 720 },
redaction: { selectors: ["[data-private]"] }
}
});
console.log(result.screenshotPaths);
The same captureJourney call can create DOM replays or videos by replacing recordScreenshots with recordDom or recordVideo. See the complete capture guide and sample journeys.
Choose an output
| Output | Best for | Entry point |
|---|---|---|
| Annotated screenshots | Support articles and visual how-tos | recordScreenshots |
| DOM replay | Embeddable, interactive product tours | recordDom |
| Modular WebM | Product demos and social clips | recordVideo or renderDomReplayVideo |
| Markdown synchronization | Keeping selected documentation images current | sync-markdown --spec |
Every output is written below the ignored .autotour/output/ directory by default. Review generated media for correctness and sensitive data before publication.
Keep walkthroughs current
Map source files to the views, API endpoints, and backend components a module depends on. AutoTour can then identify the smallest set of modules that need to be regenerated:
autotour invalidate .autotour/output/walkthrough.json \
--map .autotour/dependency-map.json \
--base origin/main \
--head HEAD \
--output .autotour/output/invalidation-plan.json
autotour regenerate .autotour/journey.json \
--plan .autotour/output/invalidation-plan.json \
--output-dir .autotour/output/capture
Use --check in CI to fail when tracked modules are stale. See the CI examples and reliable tours guide.
Documentation
- Getting started and end-to-end guide
- Role-based onboarding and commands
- Reliable tours
- Documentation specification
- Output modes
- Contributing
Repository layout
src/andbin/— public package API and CLIschemas/— versioned project, journey, walkthrough, and documentation contractsexamples/— publish-safe sample manifestsskills/create-autotour/— agent workflow and authoring guidancedocs/— detailed usage, CI, and publishing guidance
Security
Use dedicated, least-privilege test accounts. Keep passwords, tokens, cookies, browser storage, and private captures out of Git. Inspect generated screenshots, DOM snapshots, and videos for personal or confidential data before publishing them.
Development
npm install
npm run check
npm pack --dry-run
Active development is integrated on develop; main is reserved for release-ready changes.
License
AutoTour is available under the MIT License.