Skip to main content
Glama

Extract responsive behavior

extract_responsive
Idempotent

Extracts CSS breakpoints, media query summaries, and layout trees at multiple viewport widths, with optional screenshots, to reveal responsive design.

Instructions

Extract how a website adapts across screen sizes: its breakpoints derived from @media rules, a summary of each media query (condition, rule count, sample selectors), and a layout tree captured at each requested viewport width. With outputDir, also saves a screenshot per width.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
urlYesAbsolute http:// or https:// URL to analyze.
widthsNoViewport widths to capture layout at.
maxDepthNoMaximum layout-tree depth per viewport.
maxNodesNoMaximum layout nodes per viewport.
outputDirNoAbsolute directory to save per-width screenshots into.
timeoutMsNoNavigation timeout in milliseconds.
userAgentNoOptional browser user-agent override.
waitUntilNoPage lifecycle event to await before extraction.domcontentloaded
autoScrollNoScroll through the page before extraction to trigger lazy-rendered content.
maxScrollsNoMaximum viewport-sized scroll steps when autoScroll is enabled.
maxHeightPxNoScreenshots taller than this are clipped.
viewportWidthNoBrowser viewport width in CSS pixels.
viewportHeightNoBrowser viewport height in CSS pixels.
allowPrivateNetworkNoAllow localhost and private-network URLs. Enable only for trusted sites.

Output Schema

TableJSON Schema
NameRequiredDescriptionDefault
resultYes
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already indicate readOnlyHint=false, openWorldHint=true, idempotentHint=true, and destructiveHint=false. The description adds valuable behavioral context by disclosing the optional file-saving side effect when outputDir is provided ('also saves a screenshot per width') and by detailing what will be extracted. It doesn't contradict the annotations and gives the agent a clear picture of the tool's actions.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences, front-loaded with the core action and result, and every clause adds information. There is no fluff or repetition of schema details, making it highly efficient and easy to scan.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (14 parameters, output schema, many siblings), the description adequately covers the essential aspects: what it extracts, the optional screenshot output, and the per-viewport nature. The output schema handles return-value details, so the description doesn't need to enumerate them. It could mention defaults or conditions like 'when no widths are provided', but these are already visible in the schema, so the description is sufficiently complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the baseline is 3. The description adds semantic value by linking the 'widths' parameter to the per-viewport layout tree extraction and by clarifying that screenshots are only saved when outputDir is provided. This connects parameters to tool behavior in a way the schema descriptions don't explicitly do.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb ('Extract') and clearly identifies the resource ('how a website adapts across screen sizes'), then lists the concrete outputs: breakpoints from @media rules, media query summaries, and layout trees at requested viewport widths. This distinguishes it from siblings like extract_layout (single layout) or capture_screenshot (just a screenshot), making the tool's purpose unmistakable.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description clearly implies when to use the tool: whenever you need to understand a website's responsive behavior across multiple screen sizes. It even specifies the kind of data produced (breakpoints, media queries, layout trees). However, it doesn't explicitly state when not to use it or mention alternatives, so it falls short of a 5 but provides solid contextual guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/blackridder22/PicassoWeb'

If you have feedback or need assistance with the MCP directory API, please join our Discord server