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

# Live View

> Watch your browser sessions in real-time as they execute

<Tip>
  STOP. Do not read past this section until you have read and followed [/quickstart.md](/quickstart.md).

  Goal: produce a reliable SDK automation script. The intended authoring flow is generate then edit, not write browser automation from scratch.

  Do not hand-write SDK code with element IDs, selectors, or form fields from memory. Element IDs, selectors, and field mappings must come from a live `observe()` call, CLI `notte page observe` output, or generated workflow code. Guessed browser targets fail on real pages.

  Use the Notte skill and CLI to inspect the live site, validate actions/selectors, handle auth/session state, and export workflow code with `notte sessions workflow-code` before using SDK docs or SDK code.

  SDK reference pages are for understanding, running, or editing generated workflow code. They are not the starting point for manually authoring the initial browser automation. SDK-first code is guesswork on real-world pages with dynamic selectors, auth state, CAPTCHAs, and anti-bot behavior.
</Tip>

Live View allows you to watch your browser sessions in real-time as they execute, making it easy to debug and monitor automation.

## Quick Start

Open a live viewer automatically when the session starts:

{/* @sniptest testers/sessions/live-view/quick_start.py */}

```python quick_start.py theme={null}
from notte_sdk import NotteClient

client = NotteClient()

# Live viewer opens automatically
with client.Session(open_viewer=True) as session:
    session.execute(type="goto", url="https://example.com")
    session.execute(type="click", selector="button.submit")
    # Watch it happen in your browser!
```

## Manual Live View

Open the live viewer manually at any point during the session:

{/* @sniptest testers/sessions/live-view/manual.py */}

```python manual.py theme={null}
from notte_sdk import NotteClient

client = NotteClient()

with client.Session() as session:
    session.execute(type="goto", url="https://example.com")

    # Open live viewer
    session.viewer()

    # Continue automation while watching
    session.execute(type="click", selector="button.submit")
```

## Viewer Types

Notte supports multiple viewer types:

### Browser Viewer (Default)

Frame-by-frame replay in your browser:

{/* @sniptest testers/sessions/capabilities/viewer_browser.py */}

```python viewer_browser.py theme={null}
from notte_sdk import NotteClient

client = NotteClient()

with client.Session() as session:
    session.execute(type="goto", url="https://example.com")

    # Opens browser viewer
    session.viewer_browser()
```

### CDP Viewer

Chrome DevTools Protocol debugger:

{/* @sniptest testers/sessions/capabilities/viewer_cdp.py */}

```python viewer_cdp.py theme={null}
from notte_sdk import NotteClient

client = NotteClient()

with client.Session() as session:
    session.execute(type="goto", url="https://example.com")

    # Opens CDP debugger
    session.viewer_cdp()
```

### Jupyter Notebook Viewer

Display live view directly in Jupyter notebooks:

{/* @sniptest testers/sessions/capabilities/viewer_notebook.py */}

```python viewer_notebook.py theme={null}
from notte_sdk import NotteClient

client = NotteClient()

with client.Session() as session:
    session.execute(type="goto", url="https://example.com")

    # Display in notebook cell
    session.viewer_notebook()
```

## Live View for Agents

Watch AI agents make decisions in real-time:

{/* @sniptest testers/sessions/live-view/agent.py */}

```python agent.py theme={null}
from notte_sdk import NotteClient

client = NotteClient()

with client.Session(open_viewer=True) as session:
    agent = client.Agent(session=session, max_steps=10)

    result = agent.run(task="Find the pricing page and extract all plan prices")

    print(f"Agent completed: {result.answer}")
```

## Sharing Live View

Share the viewer URL with your team for collaborative debugging:

{/* @sniptest testers/sessions/live-view/sharing.py */}

```python sharing.py theme={null}
from notte_sdk import NotteClient

client = NotteClient()

with client.Session() as session:
    session.execute(type="goto", url="https://example.com")

    # Get viewer URL
    debug_info = session.debug_info()
    print(f"Share this URL with your team: {debug_info.debug_url}")

    # Team can watch live while you continue
    session.execute(type="click", selector="button.submit")
```

## Viewer Configuration

Set a default viewer type for all sessions:

{/* @sniptest testers/sessions/live-view/configuration.py */}

```python configuration.py theme={null}
from notte_sdk import NotteClient
from notte_sdk.endpoints.sessions import SessionViewerType

# Set default viewer to CDP
client = NotteClient(viewer_type=SessionViewerType.CDP)

with client.Session(open_viewer=True) as session:
    # Opens CDP viewer by default
    session.execute(type="goto", url="https://example.com")
```

Available viewer types:

* `SessionViewerType.BROWSER` - Frame-by-frame browser viewer (default)
* `SessionViewerType.CDP` - Chrome DevTools Protocol debugger
* `SessionViewerType.JUPYTER` - Jupyter notebook display

## Best Practices

### 1. Use for Development

Live view is ideal for development and debugging:

{/* @sniptest testers/sessions/capabilities/dev_environment.py */}

```python dev_environment.py theme={null}
import os

from notte_sdk import NotteClient

client = NotteClient()

# Only use live view in development
is_dev = os.getenv("ENV") == "development"

with client.Session(open_viewer=is_dev) as session:
    session.execute(type="goto", url="https://example.com")
```

### 2. Combine with Recordings

Use live view during development, recordings for later analysis:

{/* @sniptest testers/sessions/capabilities/combine_with_recordings.py */}

```python combine_with_recordings.py theme={null}
from notte_sdk import NotteClient

client = NotteClient()

with client.Session(open_viewer=True) as session:
    # Watch it live
    session.execute(type="goto", url="https://example.com")
    session.execute(type="click", selector="button.submit")

# Get recording after session ends
replay = session.replay()
replay.download("recording.mp4")
```

### 3. Multiple Viewers

Open multiple viewer types simultaneously:

{/* @sniptest testers/sessions/capabilities/multiple_viewers.py */}

```python multiple_viewers.py theme={null}
from notte_sdk import NotteClient

client = NotteClient()

with client.Session() as session:
    session.execute(type="goto", url="https://example.com")

    # Open both viewers
    session.viewer_browser()  # Frame-by-frame
    session.viewer_cdp()  # DevTools
```

## Live View vs Recordings

| Feature           | Live View                  | Recordings             |
| ----------------- | -------------------------- | ---------------------- |
| **Timing**        | Real-time during execution | After session ends     |
| **Interactivity** | Can observe as it happens  | Playback only          |
| **Use Case**      | Debugging, monitoring      | Archiving, sharing     |
| **Availability**  | During session only        | 24 hours after session |

## Next Steps

<CardGroup cols={2}>
  <Card title="Recordings" icon="video" href="/features/sessions/recordings">
    Record sessions for later analysis
  </Card>

  <Card title="Playwright" icon="code" href="/features/sessions/playwright">
    Connect with Playwright via CDP
  </Card>

  <Card title="Session Lifecycle" icon="clock" href="/features/sessions/lifecycle">
    Understand session management
  </Card>

  <Card title="Session Configuration" icon="gear" href="/features/sessions/configuration">
    Configure session parameters
  </Card>
</CardGroup>