Recording clicks as screenshots, adding hotspots and callouts and playing them back as a click-through is a good fit for an agent: a small Chrome extension, a folder of images and a static player. Getting capture timing, scaling on high-density screens and a polished editor right takes more than one sitting, so call it a weekend. What a home build lacks is what Arcade charges for: hosted share pages with view analytics, HTML capture, video and GIF export, AI voiceovers and the Figma and desktop capture tools.
Before you buildArcade Free allows one published demo with unlimited views and AI voiceovers. If you only need a single demo on your landing page, you may not need Growth.
Build me a click-through demo maker to replace Arcade. Requirements: - Node.js 22 + TypeScript in one repo: a Chrome extension (Manifest V3, built with Vite) and a Fastify server on http://127.0.0.1:4720 that also serves the editor. - Recording: the toolbar button starts a session. A content script catches clicks on pointerdown in the capture phase and sends the viewport-relative click position, the element's label (aria-label, text or placeholder, 60 characters) and the URL; the service worker calls `chrome.tabs.captureVisibleTab` and posts the PNG. Never record typed text and skip password fields. - Storage: one folder per demo in ~/Demos/<slug>/ with demo.json and steps/01.png, 02.png and so on. - Editor: reorder and delete steps; per step move the hotspot (a rectangle in percent of the image), set a callout title, text and position, add a chapter label, crop, and draw blur boxes that are applied at export while the originals stay untouched. - Player: one static `player.html` with vanilla JS inside a browser frame: the screenshot, a pulsing hotspot and a callout. Clicking the hotspot or pressing the right arrow advances, Esc restarts, a progress bar shows the step, and autoplay is optional. - Export: a self-contained folder (index.html, demo.json, images) for any static host, a single HTML file with base64 images, and an <iframe> embed snippet. A Share button opens the folder with `npx serve`. - Honest limits: Chrome allows about two captureVisibleTab calls per second, so merge clicks less than 600 ms apart; screenshots only, so no text editing after capture; cross-origin iframes aren't captured. - Single user. No accounts, no telemetry, local-first; the server listens on 127.0.0.1 only. - Out of scope: video recording, AI voiceover and copy, view analytics, branching and forms, team workspaces, a desktop app. - README: building and loading the unpacked extension, starting the server, where demos live, and a warning that screenshots keep whatever was on screen, so use blur boxes.
Opens your agent with the prompt filled in, you press enter. Or copy it and paste it into an empty folder.
The first prompt builds the core. Run these one at a time in the same folder to grow it into your own Arcade.
Add narration to the demo maker in this folder. Requirements: - A "Narration" text field per step; a button generates audio with OpenAI text-to-speech (key in .env) and saves it as steps/NN.mp3 next to the image. - The player plays each step's audio, advances when the user clicks the hotspot, and has a mute toggle remembered in localStorage. - Show a per-demo cost estimate before generating and skip steps whose text did not change. - Include the audio in the export folder and the single-file export (base64). - Update the README with what text is sent to the API.
Add view tracking to the demo maker in this folder. Requirements: - A small Fastify endpoint POST /api/view on the public server (separate port, PUBLIC_PORT in .env) that records demo slug, step reached and a daily-rotating hash of IP plus user agent; no cookies, no raw IPs. - The exported player sends events only when a data-analytics URL is set at export time. - An admin page with views, unique visitors and the step where people drop off, per demo. - Rate-limit the endpoint and cap request size. - Update the README with how to expose only the public port.
Add branching to the demo maker in this folder. Requirements: - A step can have up to 3 hotspots, each pointing to a next step id; the editor shows the graph as a simple list with arrows and warns about unreachable steps and loops without an exit. - The player follows the clicked hotspot and has a Back button that walks the actual path taken. - Keep linear demos working unchanged: a step with one hotspot and no target goes to the next step. - Export keeps the graph in demo.json. - Update the README.
Marketers and sales engineers need a polished demo in an afternoon, a link prospects can open without an account, and numbers on who watched what. Arcade gives them capture, a player, branding and analytics in one place, and view data flows to their CRM.
Estimate · Runs locally; exported demos go to any free static host. The build is token usage on your agent plan.
| Plan | Monthly | Annual, per month | What you get |
|---|---|---|---|
| Free | $0 | $0 | 1 seat, 1 published demo, unlimited views, AI demos, AI voiceovers, Arcade MCP, 1 brand kit, watermark on demos. |
| Growth | $50 | $42.50 | Up to 10 users, unlimited published demos, watermark removal, custom branding and landing page, demo branching, CTAs and forms, MP4 and GIF export, basic and advanced insights, integrations, AI translations. |
| Enterprise | custom | — | Everything in Growth plus HTML capture, custom domain and fonts, up to 10 brand kits, SSO, role-based access, multiple teams, version history, dedicated CSM and a private Slack channel. |
| AI video Pro (separate product) | $59 | $49 | 1,000 credits a month at the base tier, videos up to 5 minutes, 4K export, no watermark, 10 seats. |
Free covers one seat and one published demo with unlimited views, AI demos and AI voiceovers, but with a watermark.
Kinda. The core is a weekend build with the prompt on this page, but real gaps remain: Hosted share pages and embeds with view analytics, forms and CTA tracking, MP4 and GIF export, video recording, and the Mac and Windows desktop capture app.
About $50 a month on the Growth plan per seat, $600 a year (checked 2026-10-19).
Hosted share pages and embeds with view analytics, forms and CTA tracking; MP4 and GIF export, video recording, and the Mac and Windows desktop capture app; AI copy, AI voiceovers and translations of the steps; HTML capture, where the page's text stays editable after recording (Enterprise); Team workspaces, brand kits and demo branching. If any of those matter to you, keep paying.
Yes: Usertour (open source), rrweb (open source), Driver.js (open source).