UI tools¶

Build, style, inspect and drive user interfaces.

4 tools in the ui category. Badges: read-only tools never change the project; mutating tools are undoable and attributed; open-world tools reach outside the engine and MCP clients ask before running them.

Tool	Summary
`ui_create`	Build a whole user interface (HUD, menu, dialog, inventory, document) from one declarative JSON tree in a single undoable step.
`ui_style`	Restyle a UI.
`ui_inspect`	Read the computed UI layout: every element's rect [x, y, w, h] in pixels for a viewport (default: the canvas's reference resolution), visibility, text, values and style classes, as a tree.
`ui_interact`	Use a widget the way a player would: click a button (sends Wander `on ui "<name>"` and `on click` on the next tick while playing), toggle, set a slider/progress value, type into an input, scroll a scroll view, or click at a pixel (hit-tested like a mouse).

`ui_create`¶

Build UI mutating

Build a whole user interface (HUD, menu, dialog, inventory, document) from one declarative JSON tree in a single undoable step. Each node: {type: panel|image|text|button|toggle|slider|progress|scroll|input|spacer, name, text, image, style (classes, e.g. "primary large"), css (inline style), anchor (top_left, top, top_right, left, center, right, bottom_left, bottom, bottom_right, fill, top_stretch, bottom_stretch, left_stretch, right_stretch...), position [x,y] (offset, y down), size [w,h], margin, layout (row|column|grid), gap, padding (CSS order), align (start|center|end|stretch), justify (start|center|end|space_between), columns, fit (none|width|height|both), flex, value, event, children: [...]}. Text nodes size to their content by default; button names default to their text, so on ui "Play" works. Without parent a new screen canvas is made (configure it with canvas). Templates: main_menu, hud, pause_menu, settings, inventory, document, dialogue (the dialogue box the dialogue system uses). Returns created ids and the computed layout (rects in pixels at the canvas's reference resolution). Example: {"root": {"type": "panel", "anchor": "center", "layout": "column", "gap": 12, "style": "card", "children": [{"type": "text", "text": "Paused", "style": "heading"}, {"type": "button", "text": "Resume", "style": "primary"}]}}

Argument	Type	Description	Values
`root`	object	One UI tree (node with children)
`elements`	object[]	Several sibling trees
`template`	string	Start from a prebuilt tree (added after root/elements)	`main_menu` `hud` `pause_menu` `settings` `inventory` `document` `dialogue`
`parent`	integer \| string	Canvas or UI element to add under (default: a new canvas)
`canvas`	object	New canvas:
`width`	integer	Viewport width for the returned layout (default: reference resolution)
`height`	integer	Viewport height for the returned layout

Tool callCLIMCP request

ui_create {"root": {"type": "panel", "anchor": "center", "layout": "column", "gap": 12, "style": "card", "children": [{"type": "text", "text": "Paused", "style": "heading"}, {"type": "button", "text": "Resume", "style": "primary"}]}}

skywalker call ui_create '{"root": {"type": "panel", "anchor": "center", "layout": "column", "gap": 12, "style": "card", "children": [{"type": "text", "text": "Paused", "style": "heading"}, {"type": "button", "text": "Resume", "style": "primary"}]}}' --project my_game

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "ui_create",
    "arguments": {
      "root": {
        "type": "panel",
        "anchor": "center",
        "layout": "column",
        "gap": 12,
        "style": "card",
        "children": [
          {
            "type": "text",
            "text": "Paused",
            "style": "heading"
          },
          {
            "type": "button",
            "text": "Resume",
            "style": "primary"
          }
        ]
      }
    }
  }
}

`ui_style`¶

Style UI mutating

Restyle a UI. Switch a canvas's built-in theme (dark, light, parchment, glass, pixel), write style rules to a style sheet (*.uistyle.json) the canvas uses — rules map selectors (widget kind "button", class ".primary", entity "#Title", "canvas" for text defaults) to properties, with hover/pressed/focus/checked/disabled blocks and $vars — or set one element's classes / inline css. Properties: background, background2 (gradient), backgroundImage, slice (9-slice), radius, borderWidth, borderColor, shadowColor, shadowOffset, shadowBlur, opacity, padding, font, fontSize, color, textAlign, verticalAlign, bold, italic, lineSpacing, letterSpacing, textTransform, textOutline, textOutlineColor, textShadowColor, textShadowOffset, accent, track, knob, trackHeight, knobSize, placeholderColor, imageFit, imageTint, transition. Example: {"canvas": "HUD", "path": "ui/game.uistyle.json", "vars": {"accent": "#e8a33d"}, "rules": {"button": {"radius": 4, "hover": {"background": "$accent"}}}}

Argument	Type	Description	Values
`canvas`	integer \| string	Canvas to restyle
`theme`	string	Built-in theme for the canvas	`dark` `light` `parchment` `glass` `pixel`
`path`	string	Style sheet file to write/merge (project-relative, *.uistyle.json)
`rules`	object	selector -> properties
`vars`	object	variables referenced as $name
`element`	integer \| string	Element to restyle
`style`	string	Element classes (replaces), e.g. "primary large"
`css`	object	Element inline style (merged; null deletes a key)
`list`	boolean	Only list themes, properties and the canvas's selectors

Tool callCLIMCP request

ui_style {"canvas": "HUD", "path": "ui/game.uistyle.json", "vars": {"accent": "#e8a33d"}, "rules": {"button": {"radius": 4, "hover": {"background": "$accent"}}}}

skywalker call ui_style '{"canvas": "HUD", "path": "ui/game.uistyle.json", "vars": {"accent": "#e8a33d"}, "rules": {"button": {"radius": 4, "hover": {"background": "$accent"}}}}' --project my_game

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "ui_style",
    "arguments": {
      "canvas": "HUD",
      "path": "ui/game.uistyle.json",
      "vars": {
        "accent": "#e8a33d"
      },
      "rules": {
        "button": {
          "radius": 4,
          "hover": {
            "background": "$accent"
          }
        }
      }
    }
  }
}

`ui_inspect`¶

Inspect UI read-only

Read the computed UI layout: every element's rect [x, y, w, h] in pixels for a viewport (default: the canvas's reference resolution), visibility, text, values and style classes, as a tree. Use it to verify a layout without a screenshot, find what to click, or debug overlap. With element, also returns its resolved style.

Argument	Type	Description
`canvas`	integer \| string	Only this canvas
`element`	integer \| string	Only this element (and its children); includes its resolved style
`width`	integer	Viewport width (default: reference resolution)
`height`	integer	Viewport height

Tool callCLIMCP request

ui_inspect {"width": 1280, "height": 720}

skywalker call ui_inspect '{"width": 1280, "height": 720}' --project my_game

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "ui_inspect",
    "arguments": {
      "width": 1280,
      "height": 720
    }
  }
}

`ui_interact`¶

Use UI mutating

Use a widget the way a player would: click a button (sends Wander on ui "<name>" and on click on the next tick while playing), toggle, set a slider/progress value, type into an input, scroll a scroll view, or click at a pixel (hit-tested like a mouse). While editing, value changes are recorded edits and clicks only report which events would fire. Example: {"element": "Play", "action": "click"} then sim_control step.

Argument	Type	Description	Values
`element`	integer \| string	Element to use
`at`	number[]	Pixel [x, y] to click instead of an element (hit test)
`width`	integer	Viewport width for `at` (default 1920)
`height`	integer	Viewport height for `at` (default 1080)
`action`	string	What to do (default click)	`click` `set_value` `type` `scroll` `focus`
`value`	number	set_value: new value; scroll: offset in pixels
`text`	string	type: text to put in an input (replaces unless append)
`append`	boolean	type: append instead of replace

Tool callCLIMCP request

ui_interact {"element": "Play", "action": "click"}

skywalker call ui_interact '{"element": "Play", "action": "click"}' --project my_game

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "ui_interact",
    "arguments": {
      "element": "Play",
      "action": "click"
    }
  }
}

UI tools¶

ui_create¶

ui_style¶

ui_inspect¶

ui_interact¶

`ui_create`¶

`ui_style`¶

`ui_inspect`¶

`ui_interact`¶