Skip to content

agenthouse-org/autotour

v0.5.0MIT

Create modular walkthroughs and product documentation from web applications.

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

OutputBest forEntry point
Annotated screenshotsSupport articles and visual how-tosrecordScreenshots
DOM replayEmbeddable, interactive product toursrecordDom
Modular WebMProduct demos and social clipsrecordVideo or renderDomReplayVideo
Markdown synchronizationKeeping selected documentation images currentsync-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

Repository layout

  • src/ and bin/ — public package API and CLI
  • schemas/ — versioned project, journey, walkthrough, and documentation contracts
  • examples/ — publish-safe sample manifests
  • skills/create-autotour/ — agent workflow and authoring guidance
  • docs/ — 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.