Web preview tool (webpreview)

Overview

webpreview refreshes a user-facing, mobile-proportioned screenshot of a web URL. The latest image appears as a reduced image between the chat scroll and the message textbox; the AI can trigger a refresh, but the screenshot is not returned to the AI for visual analysis.

Usage

The AI can show or reload a preview by invoking the tool with the current URL:

{
  "name": "webpreview",
  "arguments": {
    "url": "https://example.com/landing"
  }
}

To capture at a different size, add a viewport argument — a preset id ("phone", "phone+", "tablet", "laptop") or a "WIDTHxHEIGHT" string (e.g. "1280x800"). It defaults to the 375 × 667 "phone" capture:

{
  "name": "webpreview",
  "arguments": {
    "url": "https://example.com/landing",
    "viewport": "tablet"
  }
}

In the chat UI

• Right-aligned miniature — the latest successful capture is shown above the composer, outside the scrolling transcript, as a small phone-proportioned image. The screenshot is the only content in chat; page title/host/time are shown only in the full-screen viewer. Its height is capped (min(24dvh, 11rem)) so a tall page capture stays a thumbnail instead of taking over the chat: the dock is in the flow above the composer, so every pixel of it comes out of the transcript. The image fills the card and is cropped to the top of the page — the part worth previewing — and the full capture is one tap away in the viewer.

• Mobile proportion — by default the capture uses the Inspector's 375 × 667 Phone viewport and the dock preserves that aspect ratio. The capture resolution is reported in the full-screen viewer's footer and can be changed.

• Full image — tap the card to open the screenshot in a full-screen viewer (title with a short host sub-line, a Refresh button, the Size dropdown, capture time and resolution in the footer, and Open-in-new-tab). The header is a single row at every phone width. The title/host block is the only flexible child, so it absorbs the slack and ellipsizes; Refresh collapses to its icon and keeps its glyph centred in the 44 × 44 px button (it is the only control here with no text to justify); the Size dropdown keeps its own width (enough for the longest option, so its label is never clipped); and the close ✕ sits at the end of the row. On a 360 px phone the whole header is 55 px tall and every control is still a 44 × 44 px tap target.

• Change resolution — the full-screen viewer has a native Size selector beside the close button (Phone / Phone+ / Tablet / Laptop / Custom). Picking a preset re-captures the same URL immediately, without a model round-trip. Picking Custom reveals touch-friendly width and height fields; values from 64 to 2048 px can be applied. A custom size requested by the model pre-fills those fields.

• Dismiss — a small circular close button on the card's top-right border removes the preview without changing the chat.

• Open in browser — the full viewer can open the original URL in a new browser tab.

• Reload by the AI — another webpreview call replaces the card's image with a fresh capture.

• The dock always shows the newest capture. A capture goes to the dock once, when its tool result arrives, not when you open its card in the transcript, so opening an old webpreview card no longer swaps the dock back to that stale screenshot. The dock compares capturedAt: an older capture never replaces a newer one, and a capture with no timestamp never replaces one that has a timestamp. Transcript backfill renders old rows after newer ones, so this ordering matters (scripts/test-webpreview-dock-order.mjs).

Authorization

webpreview uses the project's tool authorization mode (Ask, Allow, or Off) and optional URL allowlist patterns. In Ask mode, changing the resolution closes the viewer and shows the standard authorization card in the chat; approving it retries the capture at the selected size.

Related

• Inspector — inspecting and interacting with live browser pages.

• Tool authorization — approving or gating tool execution.