Skip to main content
Glama

Add section

swebsy_add_section

Insert a new section into the current page using a component tree or HTML, appending by default or placing it relative to a target component.

Instructions

Insert a new section into the current page. Use for adding discrete sections (hero, features, pricing, CTA) to an existing page. Supply exactly one of component (a component tree) or html (one root element). Appends to the end by default; to place it somewhere specific, pass position plus the targetPath of the component to place it next to.

Input Schema

NameRequiredDescriptionDefault
htmlNoThe section as HTML with a single root element (e.g. one <section>). No data-gjs-* attributes. Omit when sending `component`.
summaryYes1 sentence describing what this section does.
positionNoWhere to insert. Defaults to 'end' if omitted. 'before-selected'/'after-selected' are measured against `targetPath` when you pass one, otherwise against the canvas selection — so pass `targetPath` with them unless the user has selected something.
componentNoThe section component to insert. Omit when sending `html`.
targetPathNoZero-based component indexes from the current page root, exactly as returned by the most recent `read_page` call. The new section lands as a sibling immediately before or after this component, per `position`. Ignored when `position` is 'start' or 'end'.

Schema Changelog

Changes observed during successful MCP inspections.

  1. Changed2 schema fields changedv0.14.1
    • changedInput schema / properties / component / properties / t / enum
      Previous value: -[
      -  "container",
      -  "layout-row",
      -  "column",
      -  "div",
      -  "divider",
      -  "heading",
      -  "h1",
      -  "h2",
      -  "h3",
      -  "h4",
      -  "h5",
      -  "h6",
      -  "paragraph",
      -  "link",
      -  "link-block",
      -  "badge",
      -  "blockquote",
      -  "list",
      -  "ul",
      -  "ol",
      -  "li",
      -  "list-item",
      -  "span",
      -  "text",
      -  "textnode",
      -  "image",
      -  "video",
      -  "iframe",
      -  "audio",
      -  "google-map",
      -  "card",
      -  "card-media",
      -  "card-overlay",
      -  "card-group",
      -  "card-header",
      -  "card-body",
      -  "card-footer",
      -  "swebsy-icon",
      -  "gallery",
      -  "lightbox",
      -  "svg",
      -  "svg-in",
      -  "nav",
      -  "navbar",
      -  "navbar-brand",
      -  "navbar-toggler",
      -  "navbar-collapse",
      -  "navbar-nav",
      -  "nav-item",
      -  "nav-link",
      -  "breadcrumbs",
      -  "btn",
      -  "copy-button",
      -  "dark-mode-switch",
      -  "marquee",
      -  "form",
      -  "input",
      -  "textarea",
      -  "select",
      -  "option",
      -  "label",
      -  "fieldset",
      -  "legend",
      -  "checkbox",
      -  "radio",
      -  "button"
      -]New value: +[
      +  "container",
      +  "layout-row",
      +  "column",
      +  "div",
      +  "divider",
      +  "heading",
      +  "h1",
      +  "h2",
      +  "h3",
      +  "h4",
      +  "h5",
      +  "h6",
      +  "paragraph",
      +  "link",
      +  "link-block",
      +  "badge",
      +  "blockquote",
      +  "list",
      +  "ul",
      +  "ol",
      +  "li",
      +  "list-item",
      +  "span",
      +  "text",
      +  "textnode",
      +  "image",
      +  "video",
      +  "iframe",
      +  "audio",
      +  "google-map",
      +  "image-compare",
      +  "card",
      +  "card-media",
      +  "card-overlay",
      +  "card-group",
      +  "card-header",
      +  "card-body",
      +  "card-footer",
      +  "swebsy-icon",
      +  "gallery",
      +  "lightbox",
      +  "svg",
      +  "svg-in",
      +  "nav",
      +  "navbar",
      +  "navbar-brand",
      +  "navbar-toggler",
      +  "navbar-collapse",
      +  "navbar-nav",
      +  "nav-item",
      +  "nav-link",
      +  "breadcrumbs",
      +  "btn",
      +  "copy-button",
      +  "dark-mode-switch",
      +  "marquee",
      +  "accordion",
      +  "accordion-item",
      +  "accordion-summary",
      +  "form",
      +  "input",
      +  "textarea",
      +  "select",
      +  "option",
      +  "label",
      +  "fieldset",
      +  "legend",
      +  "checkbox",
      +  "radio",
      +  "button"
      +]
    • changedInput schema / properties / component / properties / type / enum
      Previous value: -[
      -  "container",
      -  "layout-row",
      -  "column",
      -  "div",
      -  "divider",
      -  "heading",
      -  "h1",
      -  "h2",
      -  "h3",
      -  "h4",
      -  "h5",
      -  "h6",
      -  "paragraph",
      -  "link",
      -  "link-block",
      -  "badge",
      -  "blockquote",
      -  "list",
      -  "ul",
      -  "ol",
      -  "li",
      -  "list-item",
      -  "span",
      -  "text",
      -  "textnode",
      -  "image",
      -  "video",
      -  "iframe",
      -  "audio",
      -  "google-map",
      -  "card",
      -  "card-media",
      -  "card-overlay",
      -  "card-group",
      -  "card-header",
      -  "card-body",
      -  "card-footer",
      -  "swebsy-icon",
      -  "gallery",
      -  "lightbox",
      -  "svg",
      -  "svg-in",
      -  "nav",
      -  "navbar",
      -  "navbar-brand",
      -  "navbar-toggler",
      -  "navbar-collapse",
      -  "navbar-nav",
      -  "nav-item",
      -  "nav-link",
      -  "breadcrumbs",
      -  "btn",
      -  "copy-button",
      -  "dark-mode-switch",
      -  "marquee",
      -  "form",
      -  "input",
      -  "textarea",
      -  "select",
      -  "option",
      -  "label",
      -  "fieldset",
      -  "legend",
      -  "checkbox",
      -  "radio",
      -  "button"
      -]New value: +[
      +  "container",
      +  "layout-row",
      +  "column",
      +  "div",
      +  "divider",
      +  "heading",
      +  "h1",
      +  "h2",
      +  "h3",
      +  "h4",
      +  "h5",
      +  "h6",
      +  "paragraph",
      +  "link",
      +  "link-block",
      +  "badge",
      +  "blockquote",
      +  "list",
      +  "ul",
      +  "ol",
      +  "li",
      +  "list-item",
      +  "span",
      +  "text",
      +  "textnode",
      +  "image",
      +  "video",
      +  "iframe",
      +  "audio",
      +  "google-map",
      +  "image-compare",
      +  "card",
      +  "card-media",
      +  "card-overlay",
      +  "card-group",
      +  "card-header",
      +  "card-body",
      +  "card-footer",
      +  "swebsy-icon",
      +  "gallery",
      +  "lightbox",
      +  "svg",
      +  "svg-in",
      +  "nav",
      +  "navbar",
      +  "navbar-brand",
      +  "navbar-toggler",
      +  "navbar-collapse",
      +  "navbar-nav",
      +  "nav-item",
      +  "nav-link",
      +  "breadcrumbs",
      +  "btn",
      +  "copy-button",
      +  "dark-mode-switch",
      +  "marquee",
      +  "accordion",
      +  "accordion-item",
      +  "accordion-summary",
      +  "form",
      +  "input",
      +  "textarea",
      +  "select",
      +  "option",
      +  "label",
      +  "fieldset",
      +  "legend",
      +  "checkbox",
      +  "radio",
      +  "button"
      +]
  2. Changed3 schema fields changedv0.13.1
    • changedInput schema / properties / component / description
      Previous value: -"The section component to insert."New value: +"The section component to insert. Omit when sending `html`."
    • addedInput schema / properties / html
      Added value: +{
      +  "description": "The section as HTML with a single root element (e.g. one <section>). No data-gjs-* attributes. Omit when sending `component`.",
      +  "type": "string"
      +}
    • changedInput schema / required
      Previous value: -[
      -  "summary",
      -  "component"
      -]New value: +[
      +  "summary"
      +]
  3. First observedv0.8.0

TDQS

A4.1/5.0
Behavior4/5

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

Annotations already declare this is a non-readonly, non-destructive, closed-world mutation. The description adds useful behavioral details beyond annotations: exactly one of component or html must be supplied, insertion appends to the end by default, and position plus targetPath controls placement next to a specific component. It does not describe error handling or the exact return value, but the added context is substantive.

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 front-loaded and efficient: it states the action, gives usage examples, explains the component/html exclusivity, then covers default and explicit positioning. Every sentence contributes to correct invocation, and there is no filler.

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 complex tool with five parameters, a nested component schema, and no output schema, the description covers the essential invocation behavior: what it inserts, the mutually exclusive input modes, default append behavior, and how to position relative to a target. It does not mention prerequisites such as reading the page first for targetPath or what the tool returns, but the schema carries the deep parameter detail and annotations cover safety.

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 important semantics beyond the schema by stating that exactly one of component or html must be provided, and by clarifying that targetPath is used with position to place the section next to a chosen component. This resolves a real ambiguity in the schema, where only summary is required.

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: insert a new section into the current page. It gives concrete examples of section types (hero, features, pricing, CTA), making the intended scope clear. It does not explicitly distinguish this from siblings such as insert_block, duplicate_section, or add_symbol_instance, 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 Guidelines4/5

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

It provides a clear usage context: adding discrete sections to an existing page. It also explains the component-vs-html choice and how to use position with targetPath for specific placement. It does not name alternative tools or state when not to use this one, so no explicit exclusions are present.

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