Skip to main content
Glama

add_div

Add a box layer to a card. Pass html to draw a custom card: width and height set its layout box, and every visible style goes in the html, since backgroundColor and borderRadius only style plain boxes without html. A style element stays inside the card.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
xNoLayer center, in percent of the card width from the card center. 50 is the right edge.
yNoLayer center, in percent of the card height from the card center. 50 is the bottom edge.
htmlNoCustom card HTML, up to 8000 characters. Image src and CSS url() must be URLs from upload_image with type asset; data: URLs are rejected. font-family can use built-in editor fonts and fonts added with add_project_font; @import and external stylesheets are rejected. Mark everything a user may want to change, so the editor's Content panel can edit it and AI translation translates it: data-edit="text" on each element whose words change (headlines, labels, list rows, numbers; put it on the innermost element holding the words; line breaks are <br>), data-edit="image" on an <img> or on an element with a CSS background-image, data-edit-color="--accent" on an element whose style sets that CSS variable (use it as var(--accent); comma-separate several), data-edit-list on a container whose direct children are repeatable items (rows, bullets, cards), with data-max (default 12) and data-min (default 1). data-label names a field or list in the panel. Text in unmarked elements is not translated.
layerNofront paints above the phone and image layers, back paints behind the phone. Text layers always paint above both. Defaults to front for html cards and back for plain boxes.
scaleNoVisual multiplier from the center, 0.1 to 4. The html keeps its layout size and does not reflow. 1 is natural size.
widthYesCSS pixels on the 500px-tall card.
heightYesCSS pixels on the 500px-tall card.
opacityNo
rotationXNo3D tilt in degrees, -360 to 360, about the box center with the same perspective as phones. 0 is flat.
rotationYNo3D tilt in degrees, -360 to 360, about the box center with the same perspective as phones. 0 is flat.
rotationZNo3D tilt in degrees, -360 to 360, about the box center with the same perspective as phones. 0 is flat.
borderRadiusNo
screenshotIdYes
backgroundColorNo

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observed

TDQS

B3.4/5.0
Behavior3/5

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

No annotations are provided, so the description carries the full behavioral burden. It does disclose meaningful traits – that visible styles must live in the html, that backgroundColor/borderRadius only affect plain boxes, and that a <style> element stays scoped inside the card – but says nothing about mutation semantics, reversibility, or limits on the resulting layer, leaving real gaps for a write operation.

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

Conciseness4/5

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

Three tightly packed sentences with no filler, front-loaded with the core action and then the customization mode. The one weak spot is a slightly abrupt trailing clause about the style element, but overall it reads efficiently.

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

Completeness3/5

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

For a 14-parameter mutation tool with no output schema and only 71% schema coverage, the description covers the central html workflow well but omits orientation info (opacity, rotations) and any return/result expectations. It is adequate but not complete.

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

Parameters3/5

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

Schema coverage is 71%, so most parameters are already documented in the schema, and the description adds useful context about how width/height define the layout box and how they interact with html. It adds nothing for the undocumented parameters (opacity, borderRadius, backgroundColor, screenshotId), so it only marginally compensates for the coverage gap.

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

Purpose4/5

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

The description states a specific verb and resource: 'Add a box layer to a card,' and the html sentence clarifies it is the freeform-HTML card primitive. It implicitly separates itself from add_text/add_phone (text/phone layers) but never names those siblings outright, so it stops short of a 5.

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

Usage Guidelines3/5

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

It gives conditional guidance for two modes – pass html to draw a custom card, or omit it for a plain box styled by backgroundColor/borderRadius – which implies when each path applies. However, it never names an alternative tool or states when to prefer add_div over add_text, add_screenshot, or update_div, leaving routing to inference.

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.