Automated Onboarding Documentation Generator

Every SaaS product on the platform can now auto-generate visual, step-by-step walkthroughs with annotated screenshot simulations, feature highlights, and ready-to-publish documentation copy — all in under 30 seconds.

Overview

The Onboarding Documentation Generator is an AI-powered feature that removes the manual effort of writing product walkthroughs. You provide a short description of the flow you want to document; the system calls OpenAI (gpt-4o) to produce a complete, structured walkthrough including:

Step-by-step instructions with annotated HTML screenshot simulations
Feature highlights extracted from the generated content
Intro and conclusion Markdown ready for use in help centres, landing pages, or email campaigns

Accessing the Feature

Navigate to a product dashboard and select Onboarding Docs from the Build section of the product sidebar. The route is:

/dashboard/products/[product-id]/onboarding-docs

Generating a Walkthrough

Click New Walkthrough to open the generation dialog.
Optionally enter a Title.
Select a Flow Type:
- First-run Onboarding — for brand-new users
- Feature Walkthrough — for documenting a specific capability
- Admin Guide — for team leads and administrators
- API Quickstart — developer-focused integration guide
Set the Target Audience (e.g. new user, developer, admin).
Describe what the walkthrough should cover in the prompt field, or pick one of the Quick Start Templates:
- First-run setup walkthrough
- Feature walkthrough: AI pipeline
- Admin & settings guide
- API quickstart for developers
Click Generate. The doc is created immediately with a generating status and transitions to draft once the AI completes.

Document Status Lifecycle

Status	Meaning
`generating`	AI is producing the walkthrough
`draft`	Generation complete; ready for review
`published`	Publicly accessible via a shareable slug
`archived`	Soft-removed; no longer active

Use Publish to make a walkthrough publicly accessible. A publicSlug is assigned at publish time. Use Archive or Delete to remove walkthroughs from active use.

Viewing a Walkthrough

Select any document from the list to open the detail panel. Three tabs are available:

Walkthrough Tab

Step-by-step navigator with a progress bar
Iframe-based screenshot simulation for each step
Annotation callouts highlighting key UI elements
Prev / Next controls and viewport indicators (desktop / tablet / mobile)

Copy Tab

Intro and conclusion Markdown ready to paste into docs, help centres, or email sequences
One-click copy-to-clipboard for each section

Highlights Tab

Extracted feature highlights suitable for marketing copy, feature comparison tables, or release notes

Regenerating a Walkthrough

Click Regenerate on any existing document to re-run generation. You can supply a new or refined prompt to adjust the output without deleting the previous version.

Behaviour Without an OpenAI API Key

When OPENAI_API_KEY is not configured, the generator falls back to a deterministic placeholder walkthrough containing five steps with realistic HTML simulations, feature highlights, and copy. The full UI remains functional — no errors are thrown and no empty states are shown. This makes the feature safe to explore in local or staging environments.

To enable AI-powered generation, set the OPENAI_API_KEY environment variable.

Background Processing

After generation, an Inngest background function (onboarding-docs/generated) handles post-processing tasks such as public slug creation. The function is concurrency-limited per project to prevent overload, retries up to 2 times on transient failures, and raises a NonRetriableError if the source record is missing.

Data Model Reference

Walkthroughs are stored in the onboarding_docs table with the following key fields:

Field	Type	Description
`id`	UUID	Primary key
`projectId`	UUID	Associated product
`title`	Text	Walkthrough title
`subtitle`	Text	Optional subtitle
`audience`	Text	Target reader
`flowType`	Enum	`onboarding`, `feature`, `admin`, `api`
`generationPrompt`	Text	Prompt used for generation
`steps`	JSONB	Ordered array of step objects
`featureHighlights`	JSONB	Extracted highlights
`introMarkdown`	Text	Intro copy
`conclusionMarkdown`	Text	Conclusion copy
`status`	Enum	Lifecycle status
`publicSlug`	Text	Shareable URL slug (set on publish)

Each step in the steps array includes:

screenshotHtml — rendered HTML for the screenshot simulation
Annotation callouts
Viewport size (desktop, tablet, mobile)
Associated route