AI-powered in-app overlay guide engine using Claude. Context-aware, zero-friction user onboarding.

1779693369272.pdf

AI Product Guide

AI-powered in-app overlay guide engine using Claude. Context-aware, zero-friction user onboarding.

What it does

A drop-in overlay system that watches user context (current page, behavior signals, goals, completed actions) and calls Claude to determine the single best next action to guide the user — rendered as highlight rings, tooltips, and action buttons directly on top of your app UI.

User Context → Guide Engine (Claude) → JSON Response → Overlay Render

Architecture

src/
├── engine/                  # AI orchestration layer
│   ├── guideEngine.ts       # Core engine — calls Anthropic API
│   ├── promptBuilder.ts     # Builds structured context prompts
│   ├── responseParser.ts    # Parses + validates Claude responses
│   └── index.ts
│
├── components/
│   ├── overlay/             # Overlay rendering system
│   │   ├── GuideOverlay.tsx # Highlight ring, tooltip, action button
│   │   └── GuideOverlay.module.css
│   ├── panels/              # Left + right control panels
│   │   ├── ContextPanel.tsx # User context input form
│   │   ├── OutputPanel.tsx  # JSON output, event log, config tabs
│   │   └── *.module.css
│   ├── mock/                # Simulated app viewport
│   │   ├── MockViewport.tsx # Full SaaS mock UI
│   │   └── MockViewport.module.css
│   └── common/              # Shared UI components
│       ├── TopBar.tsx
│       └── ErrorBanner.tsx
│
├── hooks/                   # React hooks
│   ├── useGuideEngine.ts    # Engine lifecycle + API calls
│   ├── useOverlay.ts        # Overlay positioning
│   └── useContextForm.ts    # Context form state
│
├── store/                   # Zustand global state
│   └── guideStore.ts
│
├── types/                   # TypeScript type definitions
│   └── index.ts
│
├── utils/                   # Utilities
│   ├── elementResolver.ts   # Maps selectors to DOM elements
│   └── formatting.ts        # JSON highlighting, ID generation
│
└── styles/
    └── globals.css          # Design tokens + global styles

Quick Start

1. Clone & install

git clone <https://github.com/your-username/ai-product-guide.git>
cd ai-product-guide
npm install

2. Configure environment

cp .env.example .env.local

Edit .env.local: