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

# Quickstart

> Scaffold a project, capture your product, write it up, and ship a link.

You need Node.js 20 or newer. Capturing from the terminal also needs Google Chrome. See [requirements](/open-source/overview#requirements).

<Steps>
  <Step title="Scaffold a project">
    ```sh theme={"dark"}
    npx @inkly-org/interactive-demo-cli init my-demos
    cd my-demos && npm install
    ```

    `init` writes a project with a one-step placeholder demo in `demos/getting-started/`. Replace it with your first capture.
  </Step>

  <Step title="Capture your product">
    Click through your product once. Every click becomes a step.

    <Tabs>
      <Tab title="Your agent">
        Give your agent the [skill](/open-source/agent-skill), then ask:

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

        The agent runs the same commands you would.
      </Tab>

      <Tab title="The CLI">
        ```sh theme={"dark"}
        npx interactive-demo capture start https://app.example.com --name "Onboarding"
        # click through the product in the window that opens
        npx interactive-demo capture stop
        ```

        `stop` writes the recording as a new demo under `demos/`.
      </Tab>

      <Tab title="The Chrome extension">
        Record in your own browser with the [Chrome extension](/open-source/capture#the-chrome-extension), download the ZIP, then import it:

        ```sh theme={"dark"}
        npx interactive-demo init --from ~/Downloads/<file>.zip
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Write it up">
    Capture gives you structure, not writing. The words on each step are the demo.

    Your agent edits `demo.config.json` directly. You can use the editor:

    ```sh theme={"dark"}
    npm run dev     # preview on :3000, editor at /__demo/editor/
    ```

    See [Authoring](/open-source/authoring) for the config and [The editor](/open-source/editor) for the visual route.
  </Step>

  <Step title="Ship it">
    <Tabs>
      <Tab title="Publish">
        ```sh theme={"dark"}
        npx interactive-demo login && npx interactive-demo publish
        ```

        That is the whole hosting step. `publish` puts the demo online and prints its link. Publishing again updates the same link, so embeds keep working.
      </Tab>

      <Tab title="Host it yourself">
        ```sh theme={"dark"}
        npx interactive-demo build    # dist/<slug>/ — index.html, player.js, player.css, assets/
        ```

        Deploy `dist/` to any static host. Nothing in it phones home.
      </Tab>
    </Tabs>

    The embed snippets are the same either way. Only the origin differs. See [Publish and self-host](/open-source/publish-and-self-host).
  </Step>

  <Step title="Put it in front of someone">
    Send the link, frame the page, or render it inside your React app. `npx interactive-demo embed` prints the snippets for your demo.

    ```html theme={"dark"}
    <iframe src="https://your-site.com/demos/onboarding/?embed=inline"
            loading="lazy" allow="fullscreen"
            style="border:0; width:100%; height:min(900px, 80vh)"></iframe>
    ```

    [Sharing and embedding](/open-source/embedding) walks the whole choice.
  </Step>
</Steps>

## Next

<CardGroup cols={2}>
  <Card title="Use your agent" icon="robot" href="/open-source/agent-skill">
    Hand the whole loop to Claude Code, Codex, or another agent.
  </Card>

  <Card title="Capture" icon="circle-dot" href="/open-source/capture">
    Video steps, logins, and what to do when a click is missed.
  </Card>

  <Card title="Authoring" icon="pen" href="/open-source/authoring">
    Steps, hotspots, captions, voiceover, and the theme.
  </Card>

  <Card title="CLI reference" icon="terminal" href="/open-source/cli">
    Every command, flag, and default.
  </Card>
</CardGroup>


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