> ## Documentation Index
> Fetch the complete documentation index at: https://notte-experiment-visibility-md-links.mintlify.site/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

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.md">
    Record sessions for later analysis
  </Card>

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

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

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