> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inklyai.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# interactive-demo

> Agent-native interactive demos, kept as plain files your agent can record, write, and maintain. Open source.

`interactive-demo` makes agent-native interactive demos. Your agent records your real product, writes the copy, and ships the result. You review what comes back. Use the demos for product marketing, onboarding, pre-sales, training, and enablement.

<Note>
  `interactive-demo` is an open-source tool, separate from the hosted Inkly demo agent the rest of these docs cover. It makes click-through demos as plain files in your repo. You host them yourself, or publish them to `interactive-demo.inklyai.dev` with one command.
</Note>

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/Mus1gXwJIJU" title="interactive-demo launch video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen />

## Try it

This demo was made with `interactive-demo`, about `interactive-demo`. Click through it, or [open it on its own page](https://interactive-demo.inklyai.dev/p/AMrDQaVQfiHtHbkRhcI9Ew).

<iframe className="w-full rounded-xl" style={{ aspectRatio: "1440 / 954", border: 0 }} src="https://interactive-demo.inklyai.dev/p/AMrDQaVQfiHtHbkRhcI9Ew?embed=inline" title="interactive-demo showcase" loading="lazy" allow="clipboard-read; clipboard-write; fullscreen" allowFullScreen />

<CardGroup cols={2}>
  <Card title="GitHub" icon="github" href="https://github.com/inkly-ai/interactive-demo">
    The source, MIT licensed.
  </Card>

  <Card title="npm" icon="npm" href="https://www.npmjs.com/package/@inkly-org/interactive-demo-cli">
    `@inkly-org/interactive-demo-cli`
  </Card>
</CardGroup>

## What you get

A demo is screenshots or short clips of your real product with hotspots on top. A viewer clicks through it at their own pace.

* **Your agent does the work.** The [agent skill](/open-source/agent-skill) teaches Claude Code, Codex, or another agent the whole loop: scaffold, capture, write the copy, validate, publish. Ask for "a demo of our onboarding flow" and review the result.
* **Plain files in your repo.** A demo is a `demo.config.json` and an `assets/` folder. There is no manifest to keep in step. Your agent edits it like any other file, the diff is reviewable, and when the product changes the agent can re-capture the screens and fix the copy.
* **Two ways to capture.** From the terminal, `capture start` opens Chrome and every click becomes a step. Or record in your own browser with the [Chrome extension](/open-source/capture#the-chrome-extension) and import the zip.
* **An editor for people.** `dev` serves a [local editor](/open-source/editor) that writes straight back to the same files: hotspots, zoom, blur, covers, voiceover.
* **One command to a link, or host it yourself.** `publish` puts the demo online and prints its URL. `build` writes a self-contained folder for any static host. The embed snippets are identical either way. Only the origin differs.
* **A React component too.** Render `<Demo>` and `<DemoModal>` inside your own React app.

## Start here

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/open-source/quickstart">
    Scaffold a project, capture your product, and ship a link.
  </Card>

  <Card title="Use your agent" icon="robot" href="/open-source/agent-skill">
    Install the skill and ask for a demo.
  </Card>

  <Card title="Capture" icon="circle-dot" href="/open-source/capture">
    Record from the CLI or the Chrome extension.
  </Card>

  <Card title="Share and embed" icon="code" href="/open-source/embedding">
    Send a link, frame the page, or render it in React.
  </Card>
</CardGroup>

## Packages

| Package | npm | What it is |
| - | - | - |
| `packages/cli` | `@inkly-org/interactive-demo-cli` | `init`, `dev`, `capture`, `validate`, `build`, `embed`, `login`, `publish` |
| `packages/runtime` | `@inkly-org/interactive-demo` | The React player, the demo schema, and the self-contained `player.js` |
| `packages/editor` | not published | The local editor, built into the CLI and served by `dev` |

## Requirements

* **Node.js 20 or newer.**
* **Google Chrome or Chromium** for `capture`. It is found automatically, or pass `--browser`.
* **`ffmpeg` on `PATH`** for video steps only. Without it, every step is a still.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.