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

# How to Start a New Browser Recording in Claude Scope

> Set up and launch a browser screen recording to capture UI interactions and generate structured system prompts for AI coding agents.

Starting a new recording is the first step in the Claude Scope pipeline. You fill in a few details about the session, grant screen-sharing permission, and Claude Scope captures your browser interaction as a video — ready for frame extraction and prompt generation.

<Warning>
  Recordings are saved as WebM video files. Files larger than **100 MB** will be rejected at upload. With the default auto-stop at **30 seconds**, most recordings stay well under this limit. Longer recordings captured with auto-stop disabled may exceed it.
</Warning>

## Recording form fields

Before you start recording, fill in the session details on the **New Recording** page.

| Field                       | Required | Details                                                                                                     |
| --------------------------- | -------- | ----------------------------------------------------------------------------------------------------------- |
| **Recording title**         | Yes      | A short label for the session, such as `Checkout flow bug`. Shown in the Sessions list.                     |
| **App URL to inspect**      | Yes      | The URL Claude Scope uses for its Playwright ARIA inspection pass. Must start with `http://` or `https://`. |
| **Notes**                   | No       | Optional context for the agent — describe what to focus on. Maximum 500 characters.                         |
| **Auto-stop at 30 seconds** | —        | Toggle. On by default. Disable to record past 30 seconds.                                                   |

<Note>
  Chrome and Edge are recommended browsers. Firefox has partial support for the Screen Capture API and may not expose all tabs or windows in the sharing picker.
</Note>

## Starting a recording

<Steps>
  <Step title="Open the New Recording page">
    From your dashboard, click **New Recording**. The recording setup form opens.
  </Step>

  <Step title="Fill in the recording title">
    Enter a descriptive title in the **Recording title** field. This field is required — the **Start Recording** button stays disabled until both the title and app URL are valid.
  </Step>

  <Step title="Enter the app URL to inspect">
    Type or paste the URL of the page you want to capture and inspect. The URL must begin with `http://` or `https://`. Claude Scope validates the format when you leave the field — an inline error appears if the URL is invalid.
  </Step>

  <Step title="Add optional notes">
    Use the **Notes** field to give the agent additional context, such as which elements to focus on or what behavior to describe. The character counter tracks your input up to the 500-character limit.
  </Step>

  <Step title="Configure auto-stop">
    The **Auto-stop at 30 seconds** toggle is on by default. Leave it on for most recordings. If you need to capture a longer interaction, disable the toggle — recording continues until you click **Stop Recording** manually.
  </Step>

  <Step title="Click Start Recording">
    Click **Start Recording**. Your browser opens its screen-sharing permission dialog. Select the tab or window you want to share and confirm. Claude Scope cannot start recording until you grant permission.

    If you dismiss the dialog or deny permission, an error message appears and no recording is started.
  </Step>

  <Step title="Interact with your app">
    Once permission is granted, the recording screen shows:

    * A **pulsing red indicator** and `RECORDING` label
    * A large **timer** counting elapsed seconds
    * A **progress bar** tracking time toward the auto-stop limit

    Navigate through the UI states you want Claude Scope to analyze. The progress bar fills as you approach 30 seconds.
  </Step>

  <Step title="Stop the recording">
    Recording stops in one of two ways:

    * **Auto-stop** — at 30 seconds the recorder stops automatically (if the toggle was on).
    * **Manual stop** — click **Stop Recording** at any time.

    You can also stop sharing via the browser's own screen-sharing controls; Claude Scope detects this and stops the recorder cleanly.
  </Step>

  <Step title="Wait for upload and processing">
    After stopping, Claude Scope saves the video to local storage (IndexedDB), then automatically uploads it for processing. The **Processing** page opens and shows the pipeline progress — frame extraction, vision analysis, Playwright inspection, and prompt synthesis.
  </Step>
</Steps>

## What happens after recording

Once the upload completes, Claude Scope runs the following pipeline stages automatically:

<CardGroup cols={2}>
  <Card title="Frame extraction" icon="film">
    Key frames are extracted from the video using SSIM-based frame differencing to identify meaningful UI state changes.
  </Card>

  <Card title="Vision analysis" icon="eye">
    Each extracted frame is analyzed by a Vision AI model to detect UI elements and describe interactions.
  </Card>

  <Card title="Playwright inspection" icon="globe">
    Claude Scope visits the app URL you provided and captures a full ARIA accessibility snapshot of the live page.
  </Card>

  <Card title="Prompt synthesis" icon="zap">
    The visual timeline and structural inspection are combined into a structured system prompt for your chosen AI coding agent.
  </Card>
</CardGroup>

When all stages complete, you are taken to the **Frame Review** page to inspect the extracted frames before generating the final output.