Skip to main content
Glama

ui_builder_render_design_matrix

See one design on several devices in ONE picture: a contact sheet with a captioned cell per device × theme × font scale, plus each cell's device, size and box on the sheet. Nothing is saved — the design's environment is swapped on a scratch copy for each cell. Name devices by preset (phone_small, phone, phone_landscape, foldable_folded, foldable_unfolded, tablet_portrait, tablet_landscape, wear_small_round, wear_large_round, wear_square, tv_1080p, widget_small_round, widget_small_squircle, widget_small_rectangular, widget_large_round, widget_large_squircle, widget_large_rectangular) or as {widthDp, heightDp, label?, round?}; or a formFactor (phone, foldable, tablet, wear, tv, widget, adaptive) for its default set; with neither you get the design's own form factor — phone, foldable and tablet for a mobile catalog, the round watches for Wear, and for a Wear widget (a widget-container-* root) its own container in each widget host: Samsung round, Pixel Watch squircle and rectangular, at the container's frame. Widget host cells are drawn natively in that host when the caller holds ui-builder-export and the host has a native lane (renderer: "native"); otherwise by the editor's export, masked to the host's outline. Add themes: ["light","dark"] and fontScales: [1, 2] to cross them; at most 16 cells. The sheet is a short-lived signed https link kept under 3.5 MB, so a chat surface can show it inline; inline: true puts the bytes in the reply as well.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
tokenNoA grant token from poll_access, when you cannot set the X-Compose-Preview-Token header yourself — an MCP client fixes its headers at connect time, so this is how a token approved during this session is used in it. Prefer the header where you control it.
inlineNoAlso return the PNG as an image block. Defaults to false; a host with no public origin always does.
themesNoDefaults to the design's own theme.
devicesNoDevices to draw. Omit for the form factor's defaults.
designIdYes
revisionNoA past revision. Omit for the current one.
agentNameNoOptional agent/client name shown to design viewers; self-reported.
agentModelNoOptional current model name shown to design viewers; self-reported. Omit when unknown.
fontScalesNoDefaults to the design's own font scale.
formFactorNoA default device set, instead of `devices`.

Output Schema

TableJSON Schema
NameRequiredDescriptionDefault
rowsYes
cellsYes
imageYes
schemaYes
columnsYes
summaryYes
designIdYes
revisionYes
imageBase64No

Schema Changelog

Changes observed during successful MCP inspections.

  1. Changed4 schema fields changed
    • changedInput schema / properties / devices / items / anyOf
      Previous value: -[
      -  {
      -    "enum": [
      -      "phone_small",
      -      "phone",
      -      "phone_landscape",
      -      "foldable_folded",
      -      "foldable_unfolded",
      -      "tablet_portrait",
      -      "tablet_landscape",
      -      "wear_small_round",
      -      "wear_large_round",
      -      "wear_square",
      -      "tv_1080p"
      -    ],
      -    "type": "string"
      -  },
      -  {
      -    "additionalProperties": false,
      -    "properties": {
      -      "formFactor": {
      -        "type": "string"
      -      },
      -      "heightDp": {
      -        "maximum": 4096,
      -        "minimum": 1,
      -        "type": "integer"
      -      },
      -      "id": {
      -        "type": "string"
      -      },
      -      "label": {
      -        "type": "string"
      -      },
      -      "round": {
      -        "type": "boolean"
      -      },
      -      "widthDp": {
      -        "maximum": 4096,
      -        "minimum": 1,
      -        "type": "integer"
      -      }
      -    },
      -    "required": [
      -      "widthDp",
      -      "heightDp"
      -    ],
      -    "type": "object"
      -  }
      -]New value: +[
      +  {
      +    "enum": [
      +      "phone_small",
      +      "phone",
      +      "phone_landscape",
      +      "foldable_folded",
      +      "foldable_unfolded",
      +      "tablet_portrait",
      +      "tablet_landscape",
      +      "wear_small_round",
      +      "wear_large_round",
      +      "wear_square",
      +      "tv_1080p",
      +      "widget_small_round",
      +      "widget_small_squircle",
      +      "widget_small_rectangular",
      +      "widget_large_round",
      +      "widget_large_squircle",
      +      "widget_large_rectangular"
      +    ],
      +    "type": "string"
      +  },
      +  {
      +    "additionalProperties": false,
      +    "properties": {
      +      "formFactor": {
      +        "type": "string"
      +      },
      +      "heightDp": {
      +        "maximum": 4096,
      +        "minimum": 1,
      +        "type": "integer"
      +      },
      +      "id": {
      +        "type": "string"
      +      },
      +      "label": {
      +        "type": "string"
      +      },
      +      "round": {
      +        "type": "boolean"
      +      },
      +      "widthDp": {
      +        "maximum": 4096,
      +        "minimum": 1,
      +        "type": "integer"
      +      }
      +    },
      +    "required": [
      +      "widthDp",
      +      "heightDp"
      +    ],
      +    "type": "object"
      +  }
      +]
    • changedInput schema / properties / formFactor / enum
      Previous value: -[
      -  "phone",
      -  "foldable",
      -  "tablet",
      -  "wear",
      -  "tv",
      -  "adaptive"
      -]New value: +[
      +  "phone",
      +  "foldable",
      +  "tablet",
      +  "wear",
      +  "tv",
      +  "widget",
      +  "adaptive"
      +]
    • addedOutput schema / properties / cells / items / properties / renderer
      Added value: +{
      +  "anyOf": [
      +    {
      +      "type": "string"
      +    },
      +    {
      +      "type": "null"
      +    }
      +  ]
      +}
    • addedOutput schema / properties / cells / items / properties / widgetHostShape
      Added value: +{
      +  "anyOf": [
      +    {
      +      "type": "string"
      +    },
      +    {
      +      "type": "null"
      +    }
      +  ]
      +}
  2. Changed2 schema fields changed
    • addedInput schema / properties / agentModel
      Added value: +{
      +  "description": "Optional current model name shown to design viewers; self-reported. Omit when unknown.",
      +  "maxLength": 80,
      +  "type": "string"
      +}
    • addedInput schema / properties / agentName
      Added value: +{
      +  "description": "Optional agent/client name shown to design viewers; self-reported.",
      +  "maxLength": 80,
      +  "type": "string"
      +}
  3. Added

TDQS

A4.4/5.0
Behavior5/5

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

With no annotations, the description carries the full burden and does so: 'Nothing is saved — the design's environment is swapped on a scratch copy for each cell', a 16-cell ceiling, output as a short-lived signed https link kept under 3.5 MB, `inline: true` returning bytes, and the native/masked rendering condition tied to the ui-builder-export grant. These are exactly the traits an agent needs and none are derivable from the schema.

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

Conciseness3/5

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

The key value proposition is front-loaded in the first clause, but the body is a single dense run-on that re-enumerates all 17 device presets already present in the schema enum, which is redundant with structured data. The remaining content earns its place, but the wall-of-text form and duplicated enum hurt scanability.

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?

For a 10-parameter tool with no annotations, the description covers the important unknowns: output form and size cap, the no-persistence guarantee, the 16-cell limit, and the conditional native-rendering lane. With an output schema present it needn't explain return values, and the remaining parameter details (token, revision, agentName) are handled in the schema.

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 already 90%, so baseline is 3, and the description adds real meaning on top: it explains what each `formFactor` default set contains, how `themes`/`fontScales` cross-multiply against devices, and the at-most-16-cells constraint that governs the combination. It does restate the device preset enum, which the schema already lists.

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 names a specific verb and artifact — 'See one design on several devices in ONE picture: a contact sheet with a captioned cell per device × theme × font scale' — and the scratch-copy/no-save scope implicitly separates it from ui_builder_render_native and ui_builder_export. An agent can tell what this produces without opening the schema.

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?

It gives concrete selection rules for inputs: name `devices` by preset or {widthDp,heightDp}, or pass a `formFactor` for its default set, and with neither you get the design's own form factor (with per-family defaults spelled out for mobile, Wear and Wear widgets). It also states the native-vs-editor lane condition (caller must hold ui-builder-export). What's missing is any explicit routing to a sibling tool for the cases this one doesn't cover.

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

Try in Browser

Glama MCP Gateway

Add one secure layer between your agents and this server.