---
title: "Viewports"
description: "Configure viewport sizes for your sessions"
image: "https://help.agent.mq/og.svg"
---

> Documentation Index
> Fetch the complete documentation index at: https://help.agent.mq/llms.txt
> Use this file to discover all available pages before exploring further.

# Viewports

A viewport defines the visible area of a web page in a browser window. While setting a custom viewport is optional in Browsers, it can be helpful for specific use cases, such as visual testing, screenshot generation, or automations that rely on precise layout behavior.

## Configuring the viewport

Use the `viewport` field when creating a session to specify the desired width and height. Below are examples in both Node.js and Python SDKs.

### Node.js

```typescript SDK
  import Browsers from "@agentmq/browsers";

  const browsers = new Browsers({ apiKey: process.env.AGENTMQ_TOKEN! });

  async function createSession() {
    const session = await browsers.sessions.create({
      browserSettings: {
        viewport: {
          width: 1920,
          height: 1080
        }
      },
    });
    console.log(`Session URL: https://agent.mq/sessions/${session.id}`);
    return session;
  }

  const session = createSession();
```

### Python

```python SDK
  from agentmq.browsers import Browsers
  import os

  browsers = Browsers(api_key=os.environ["AGENTMQ_TOKEN"])

  def createSession():
      session = browsers.sessions.create(
          browser_settings={
              "viewport": {
                "width": 1920,
                "height": 1080
                },
          },
      )
      print(f"Session URL: https://agent.mq/sessions/{session.id}")
      return session

  session = createSession()
```

## Setting the viewport with Puppeteer

If you're using Puppeteer, it applies an `800 x 600` viewport by default. To customize these dimensions, you'll also need to set `defaultViewport` to `null` as shown below.

```typescript Node.js
  const session = await browsers.sessions.create({
browserSettings: {
  viewport: {
    width: 1920,
    height: 1080
  }
},
  });

  const browser = await puppeteer.connect({
browserWSEndpoint: session.connectUrl,
defaultViewport: null // Prevents 800x600 default viewport
  });
```

For a full list of session options and configuration fields, check out the [API reference for creating a session](/browsers/api).

Source: https://help.agent.mq/browsers/core-features/viewports/index.mdx