Composite UI Tools - Azyrom Help

Composite UI Tools are high-level MCP tools that create complete UI components with multiple elements, proper styling, and platform-specific design patterns in one call.

Overview

Instead of manually creating 5-10 individual elements for a button or card, composite tools handle all the complexity automatically:

Single Operation - Create 3-10 elements with one tool call
Platform Styles - iOS and Android design systems built-in
Theme Support - Light and dark theme options
Automatic Layout - Elements positioned correctly relative to parent
Rollback Safety - If creation fails, no partial elements left behind

Available Composite Tools

1. create_ui_status_bar

Creates an iOS or Android status bar with system icons and time display.

create_ui_status_bar({
  "platform": "ios",
  "theme": "light",
  "parentId": "screen-frame",
  "y": 0
})

Returns: Status bar with 5+ elements
- Frame (390×54)
- Time text "9:41"
- Signal strength icon
- WiFi icon
- Battery icon

2. create_ui_navbar

Creates a navigation bar with title and optional back/action buttons.

create_ui_navbar({
  "title": "Settings",
  "showBack": true,
  "rightIcon": "gear",
  "theme": "light",
  "parentId": "screen-frame"
})

Returns: Navigation bar with 3-5 elements
- Frame background
- Title text (centered)
- Back button (optional)
- Right action icon (optional)

3. create_ui_button

Creates a styled button with optional icon and label.

create_ui_button({
  "label": "Sign In",
  "variant": "primary",
  "icon": "arrow-right",
  "x": 100,
  "y": 400,
  "width": 320,
  "parentId": "screen-frame"
})

Variants: "primary", "secondary", "outlined", "ghost"

Returns: Button with 3 elements
- Frame/background
- Label text
- Icon (if specified)

4. create_ui_tab_bar

Creates a bottom tab bar with multiple tabs (icons + labels).

create_ui_tab_bar({
  "tabs": [
    {"icon": "house", "label": "Home", "active": true},
    {"icon": "magnifying-glass", "label": "Search"},
    {"icon": "heart", "label": "Favorites"},
    {"icon": "user", "label": "Profile"}
  ],
  "parentId": "screen-frame",
  "y": 750
})

Returns: Tab bar with 12+ elements
- Frame background
- 4 tab backgrounds
- 4 icons
- 4 labels

5. create_ui_input

Creates a styled input field with optional icon and label.

create_ui_input({
  "label": "Email",
  "placeholder": "Enter your email",
  "icon": "envelope",
  "style": "outlined",
  "x": 100,
  "y": 200,
  "width": 320,
  "parentId": "screen-frame"
})

Styles: "outlined", "filled", "underlined"

Returns: Input with 4+ elements
- Frame/border
- Label text (above)
- Placeholder text
- Icon (if specified)

6. create_ui_card

Creates a card component with title, subtitle, and body content.

create_ui_card({
  "title": "Card Title",
  "subtitle": "Optional subtitle",
  "body": "Card body content here",
  "shadow": true,
  "x": 100,
  "y": 200,
  "width": 320,
  "parentId": "screen-frame"
})

Returns: Card with 4+ elements
- Frame with rounded corners
- Title text (18pt, bold)
- Subtitle text (14pt, gray)
- Body text (14pt)

7. create_ui_list_item

Creates a list item row with leading/trailing icons and divider.

create_ui_list_item({
  "title": "Settings",
  "subtitle": "Manage preferences",
  "leadingIcon": "gear",
  "trailing": "chevron-right",
  "divider": true,
  "x": 0,
  "y": 100,
  "width": 390,
  "parentId": "screen-frame"
})

Returns: List item with 6+ elements
- Frame background
- Leading icon
- Title text
- Subtitle text (optional)
- Trailing icon
- Divider line

8. create_ui_home_indicator

Creates an iOS home indicator bar (bottom of screen).

create_ui_home_indicator({
  "parentId": "screen-frame",
  "y": 820,
  "color": "#000000"
})

Returns: Home indicator (134×5, centered)

Common Parameters

Platform

ios - iOS design system (SF Pro font, iOS blue #007AFF)
android - Material Design (Roboto font, Material colors)

Theme

light - Light color scheme (white backgrounds, dark text)
dark - Dark color scheme (dark backgrounds, light text)

Position & Size

x, y - Position relative to parent (default: 0, 0)
width - Component width (default varies by component)
height - Component height (auto-calculated if not specified)

Parent Relationship

parentId - ID of parent frame/screen (optional)
id - Client-specified ID for the composite root element

Rollback Safety

If composite tool creation fails partway through, all created elements are automatically deleted (rolled back). You never see partial/broken components.

Return Format

All composite tools return:

{
  "success": true,
  "compositeId": "button-frame-001",
  "type": "button",
  "childIds": ["label-001", "icon-001"],
  "elementCount": 3
}

compositeId - ID of the root/container element
childIds - Array of all child element IDs created
elementCount - Total number of elements created

Example Usage

Building a Login Form

                "Create a login form with an email input, password input, and a primary 'Sign In' button"
            

Claude will use:

create_ui_input for email field
create_ui_input for password field
create_ui_button for sign-in button

Creating a Settings Screen

                "Create a settings screen with a navigation bar and 5 list items for Account, Privacy, Notifications, Appearance, and Help"
            