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

> Create your first Inkly demo with an AI agent or the Chrome extension.

The fastest way to start with Inkly is to create one demo from a product flow.

You have two paths. Pick the one that matches how you want to work.

<CardGroup cols={2}>
  <Card title="Capture with agent" icon="robot" href="#capture-with-agent">
    Hand a prompt to Claude Code, Codex, Cursor, or another local agent. The agent uses the Inkly CLI to capture and preview the demo.
  </Card>

  <Card title="Capture with Chrome extension" icon="chrome" href="#capture-with-chrome-extension">
    Install the Chrome extension, open a page, and click through the flow yourself.
  </Card>
</CardGroup>

Both paths produce an Inkly demo you can preview, edit, publish, and keep in your hub.

## Capture with agent

Use this path when you want an AI agent to plan, navigate, capture, and prepare the demo.

<Info>
  This path uses the Inkly CLI. Your machine needs Node.js 20 or later.
</Info>

The Inkly app gives you a prompt that includes:

* The Inkly capture skill URL.
* The website, local app, or demo dashboard you want to capture.
* Instructions to install the CLI if needed.
* Instructions to record a focused 6–10 step product flow.
* Instructions to run `inkly dev` so you can preview the result locally.

### Copy the agent prompt

In the Inkly app, choose **Create with your agent**. Enter the URL to capture, or choose the demo dashboard. Then copy the generated prompt into your agent.

The prompt follows this shape:

```text theme={null}
Load the Inkly demo-capture skill and follow it exactly:
https://app.inklyai.dev/__inkly/skills/agent-capture.md

Capture an interactive demo of this site:
https://your-product.com

Install the Inkly CLI if needed, record a focused 6-10 step product flow,
then run `inkly dev` so I can preview the demo locally.
```

If publishing or syncing needs authentication, the app may include an Inkly API key in the prompt. Treat that key like a password.

### What your agent does

Your agent follows the capture skill and uses the CLI as the browser harness.

It installs the CLI if needed:

```bash theme={null}
npm install -g @inkly-org/cli
inkly version
```

Then it starts capture, drives the page, records steps, and exports a demo folder:

```bash theme={null}
inkly capture start \
  --url https://your-product.com \
  --name "Product walkthrough" \
  --window-size 1440x900
```

The agent drives the browser with `inkly capture nav`, then stops the session:

```bash theme={null}
inkly capture stop --session <session-id> --out ./tmp/agent-capture-output
```

For HTML capture, the agent uses `inkly capture-html` instead of `inkly capture`.

### Preview and publish

Your agent should run local preview when the demo is ready:

```bash theme={null}
inkly dev
```

When you want a shareable link for one demo, publish it:

```bash theme={null}
inkly snapshot <demo-name>
```

## Capture with Chrome extension

Use this path when you want to record the flow manually from your own browser.

<Info>
  This path uses Chrome and the Inkly Chrome extension. You do not need the CLI to record with the extension.
</Info>

In the Inkly app, choose **Create it yourself**. The flow has three steps.

<Steps>
  <Step title="Install the Chrome extension">
    Install the Inkly Chrome extension from the link shown in the app. After installation, return to Inkly and click **Re-check** if the app has not detected it yet.
  </Step>

  <Step title="Choose the page to record">
    Paste the URL where your product flow starts, or choose the demo dashboard if you want a quick sample. You can preview the URL before recording.
  </Step>

  <Step title="Click through the flow once">
    Click **Start recording**, then use the product normally. Inkly records your clicks and turns the session into an interactive demo.
  </Step>
</Steps>

The extension records from your current browser context, so it works well when you are already signed in to the product.

## Choose a capture format

Both Quickstart paths can produce screenshot/video demos or HTML demos.

| Format           | Best first choice? | What you get                                                                                                   |
| ---------------- | ------------------ | -------------------------------------------------------------------------------------------------------------- |
| Screenshot/video | Yes                | Still steps become images. Motion steps become short videos. This is the simplest way to start.                |
| HTML             | Sometimes          | Each step becomes a self-contained HTML snapshot. Use it when crisp text or editable captured content matters. |

Start with screenshot/video capture unless you already know you need HTML. You can create a strong first demo quickly, then polish it in the editor or with an agent.

## What happens next

After your first capture, you can:

* Edit copy, annotations, branding, and steps in the no-code editor.
* Ask an agent to trim, relabel, or personalize the demo.
* Preview locally with the CLI.
* Publish a standalone snapshot link.
* Connect your GitHub-backed hub so the demo lives with the rest of your demo source.

<CardGroup cols={2}>
  <Card title="What is Inkly?" icon="sparkles" href="/what-is-inkly">
    Learn the Demo as Code model behind Inkly.
  </Card>

  <Card title="Agentic capture" icon="camera" href="/cli/capture">
    See the full capture command reference.
  </Card>

  <Card title="Skills for agents" icon="robot" href="/cli/skills">
    Install Inkly skills for Claude Code, Cursor, Codex, and other agents.
  </Card>

  <Card title="Publish a demo" icon="upload" href="/cli/publish-a-snapshot">
    Publish one demo as a shareable snapshot.
  </Card>
</CardGroup>