> ## 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.

# Use your agent

> Give your coding agent the interactive-demo skill and let it capture, write, and publish demos for you.

The repo ships an agent skill: one file that teaches a coding agent the whole job. It holds the command map, the order of the work, and the gotchas. With it, an agent can scaffold a project, drive Chrome to capture a click-through, write the copy, validate, and publish.

The skill is [`skills/interactive-demo/SKILL.md`](https://github.com/inkly-ai/interactive-demo/blob/main/skills/interactive-demo/SKILL.md) in the repo.

## Install the skill

<Tabs>
  <Tab title="Claude Code">
    Copy the file into your project's skills folder:

    ```sh theme={"dark"}
    mkdir -p .claude/skills/interactive-demo
    curl -fsSL https://raw.githubusercontent.com/inkly-ai/interactive-demo/main/skills/interactive-demo/SKILL.md \
      -o .claude/skills/interactive-demo/SKILL.md
    ```

    Claude Code loads it when you ask for a demo.
  </Tab>

  <Tab title="Other agents">
    The skill is a plain Markdown file. Put it wherever your agent reads its instructions, or point the agent at the file's URL and ask it to follow it.
  </Tab>
</Tabs>

The agent needs the same things you would: Node.js 20 or newer, Chrome for capture, and `ffmpeg` on `PATH` for video steps. `login`, `publish`, and `embed` need an account on the hosting service. Everything else works offline.

## Ask for a demo

```text theme={"dark"}
Make an interactive demo of our onboarding flow at https://app.example.com
```

To hand over a recording you made with the [Chrome extension](/open-source/capture#the-chrome-extension), give the agent the ZIP and ask it to import the demo and review the captions.

## What the agent does

<Steps>
  <Step title="Scaffolds a project">
    `init` creates the project folder, unless you are already in one.
  </Step>

  <Step title="Captures the flow">
    `capture start` opens Chrome and records. Every `capture` subcommand prints JSON, so the agent reads the steps back with `capture status` and drops a bad one with `capture undo`.
  </Step>

  <Step title="Writes it up">
    Capture writes rough steps, each labelled `Click on "…"`. The agent reads `demo.config.json` and rewrites the hotspot text, trims steps that do not earn their place, and gives the cover a real headline.
  </Step>

  <Step title="Validates">
    `validate` catches a bad media path or a broken reference before a viewer does.
  </Step>

  <Step title="Publishes">
    `login`, then `publish`, which prints the URL. Or `build`, for a folder you host.
  </Step>
</Steps>

## What to review

The demo is plain files, so review it like any other change.

* **Read the diff.** The copy lives in `demo.config.json`. Every hotspot is a line you can read.
* **Watch it.** Run `npm run dev` and click through the demo as a viewer would.
* **Fix small things in the editor.** The [editor](/open-source/editor) writes back to the same files in the shape the agent wrote them, so a one-word change is a one-line diff.

## Keep demos current

When the product changes, ask the agent to re-capture the screens that moved and fix the copy. Publishing again updates the same URL, so links and embeds you have already shared keep working.

## Things that trip agents up

The skill covers these. They are worth knowing when you read an agent's work.

* **The final page is not captured unless you click again.** A step describes the page that was clicked on. Land on the last page and click something harmless.
* **A headed Chrome window opens by default.** `--headless` is only useful when a script drives the page, or with `--connect-to-browser`.
* **OAuth and SSO logins need `capture login`.** Sign in once in a persistent profile, then reuse it with `--profile`. See [Capturing an app behind a login](/open-source/capture#capture-an-app-behind-a-login).
* **`build` empties its output folder first.** It refuses a non-empty folder it did not create unless you pass `--force`.
* **`__demo`, `assets`, `api`, and `c` are reserved slugs.**


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