MCP + Claude Desktop - Azyrom Help

Azyrom integrates with Claude Desktop through the Model Context Protocol (MCP), allowing you to use natural language to create complex designs, apply styles, and build prototypes.

Prerequisites

Azyrom app installed and running
Claude Desktop installed (Download)
Dart SDK (included with Flutter)

Setup Instructions

Step 1: Start Azyrom

Launch the Azyrom app. The MCP WebSocket server automatically starts on port 9999.

Step 2: Configure Claude Desktop

Edit Claude Desktop's configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Add the Azyrom MCP server configuration:

{
  "mcpServers": {
    "azyrom": {
      "command": "/path/to/flutter/bin/dart",
      "args": [
        "run",
        "/path/to/azyrom/mcp_server/bin/main.dart"
      ]
    }
  }
}

Important: Replace /path/to/flutter/bin/dart with the full path to your Dart executable, and /path/to/azyrom with the path to your Azyrom installation.

Step 3: Restart Claude Desktop

Quit and reopen Claude Desktop. You should see "azyrom" in the MCP servers list (click the plug icon).

What You Can Do

Create Design Elements

Ask Claude to create shapes, text, frames, and more:

"Create a blue rectangle 200x100 pixels"
"Add a text element saying 'Hello World' with 24px font"
"Create a frame for a mobile login screen"
"Add a circular avatar placeholder"

Apply Fills and Gradients

Use the set_fill tool for advanced fills:

Solid colors: "Fill the button with #FF5733"
Linear gradients: "Add a gradient from red to blue going left to right"
Radial gradients: "Create a radial gradient from white center to black edge"
Patterns: "Fill with a dot pattern"
Textures: "Add a noise texture at 50% intensity"

Add Strokes and Shadows

"Add a 2px black stroke to the selected element"
"Set stroke position to inside"
"Add a drop shadow with 8px blur"
"Make the shadow color #00000040"

Create Prototype Interactions

Build interactive prototypes with navigation:

"When clicking this button, navigate to the home screen"
"Add a hover interaction that shows a tooltip"
"Create a back button that goes to the previous screen"
"Open an overlay modal when this is clicked"

Manage Design System

"Show me all the design tokens"
"List available components"
"What styles are defined?"
"Export the color palette"

Available Tools

Azyrom provides 148+ MCP tools for comprehensive design automation. The core tools are organized into 12 categories below:

MCP Server Version: 1.0.3 (MCP Protocol v2025-03-26)
Note: This page shows the most commonly used tools. See the full tool list in Claude by asking "What tools do you have access to?"

Category 1: Document Operations (5 tools)

Tool	Description
`get_document_info`	Get document metadata and statistics
`get_all_elements`	List all elements in the document
`clear_canvas`	Remove all elements from canvas
`undo`	Undo last action
`redo`	Redo last undone action

Category 2: Element Creation (7 tools)

Tool	Description
`create_rectangle`	Create a rectangle element
`create_circle`	Create a circle/ellipse element
`create_text`	Create a text element
`create_line`	Create a line element
`create_image`	Create an image element
`create_frame`	Create a frame (container) element
`create_group`	Create a group from multiple elements

Category 3: Element Modification (8 tools)

Tool	Description
`update_element`	Update element properties
`delete_element`	Delete an element
`duplicate_element`	Duplicate an element
`get_element`	Get element details
`move_element`	Move element by offset
`resize_element`	Resize element dimensions
`rotate_element`	Rotate element by angle
`set_element_name`	Set element name/label

Category 4: Selection & Visibility (7 tools)

Tool	Description
`select_element`	Select specific element(s)
`get_selection`	Get currently selected elements
`clear_selection`	Clear current selection
`select_all`	Select all elements
`show_element`	Make element visible
`hide_element`	Make element invisible
`toggle_element_visibility`	Toggle visibility state

Category 5: Z-Order & Hierarchy (6 tools)

Tool	Description
`bring_to_front`	Move element to top of z-order
`send_to_back`	Move element to bottom of z-order
`bring_forward`	Move element up one layer
`send_backward`	Move element down one layer
`set_parent`	Change element's parent
`unparent_element`	Remove element from parent

Category 6: Layout & Alignment (6 tools)

Tool	Description
`align_elements`	Align elements (left, center, right, top, middle, bottom)
`distribute_elements`	Distribute elements evenly (horizontal, vertical)
`set_constraints`	Set layout constraints
`lock_element`	Lock element to prevent editing
`unlock_element`	Unlock element for editing
`set_blend_mode`	Set element blend mode

Category 7: Styling (5 tools)

Tool	Description
`set_fill_color`	Set fill color (solid)
`set_stroke_color`	Set stroke color
`set_stroke_width`	Set stroke width
`set_opacity`	Set element opacity (0-1)
`set_corner_radius`	Set corner radius for rectangles

Category 8: Gradients (6 tools)

Tool	Description
`set_linear_gradient`	Apply linear gradient fill
`set_radial_gradient`	Apply radial gradient fill
`set_angular_gradient`	Apply angular/conic gradient fill
`add_gradient_stop`	Add color stop to gradient
`update_gradient_stop`	Update existing gradient stop
`remove_gradient_stop`	Remove gradient stop

Category 9: Boolean Operations (5 tools)

Tool	Description
`union_elements`	Combine shapes with union
`subtract_elements`	Subtract top shape from bottom
`intersect_elements`	Keep only overlapping areas
`exclude_elements`	Remove overlapping areas
`flatten_element`	Flatten element to path

Category 10: Effects (6 tools)

Tool	Description
`add_drop_shadow`	Add drop shadow effect
`add_inner_shadow`	Add inner shadow effect
`add_layer_blur`	Add layer blur effect
`add_background_blur`	Add background blur effect
`update_effect_property`	Update existing effect property
`remove_effect`	Remove specific effect

Category 11: Text & Fonts (5 tools)

Tool	Description
`set_text_content`	Set text content
`set_font_family`	Set font family
`set_font_size`	Set font size
`set_font_weight`	Set font weight (100-900)
`set_text_align`	Set text alignment (left, center, right, justify)

Category 12: Image Adjustments (6 tools)

Tool	Description
`set_image_brightness`	Adjust image brightness (-1 to 1)
`set_image_contrast`	Adjust image contrast (-1 to 1)
`set_image_saturation`	Adjust image saturation (-1 to 1)
`set_image_hue`	Adjust image hue rotation (0-360 degrees)
`set_image_exposure`	Adjust image exposure (-1 to 1)
`reset_image_adjustments`	Reset all image adjustments to defaults

Gradient Fill Examples

Linear Gradient (Top to Bottom)

{
  "type": "linearGradient",
  "gradientStops": [
    {"color": "#FF0000", "position": 0},
    {"color": "#0000FF", "position": 1}
  ],
  "gradientStartX": 0.5,
  "gradientStartY": 0,
  "gradientEndX": 0.5,
  "gradientEndY": 1
}

Radial Gradient

{
  "type": "radialGradient",
  "gradientStops": [
    {"color": "#FFFFFF", "position": 0},
    {"color": "#000000", "position": 1}
  ],
  "gradientStartX": 0.5,
  "gradientStartY": 0.5,
  "gradientRadius": 0.7
}

Multi-Stop Gradient

{
  "type": "linearGradient",
  "gradientStops": [
    {"color": "#FF0000", "position": 0},
    {"color": "#00FF00", "position": 0.5},
    {"color": "#0000FF", "position": 1}
  ]
}

Interaction Examples

Navigate on Click

{
  "elementId": "button-1",
  "trigger": "onClick",
  "action": "navigateTo",
  "targetId": "home-frame",
  "transition": {
    "type": "slideLeft",
    "duration": 300,
    "easing": "easeOut"
  }
}

Open Overlay Modal

{
  "elementId": "menu-button",
  "trigger": "onClick",
  "action": "openOverlay",
  "targetId": "menu-overlay",
  "overlayPosition": "center"
}

Future Features

🔮 Coming Soon: Interactive Canvas Viewer
When the mcp_server Dart library adds support for the _meta field, you'll be able to:

View your designs in an interactive canvas directly in Claude

Pan and zoom the design viewport

See real-time updates as Claude makes changes

Edit designs visually while chatting with Claude

Current Status: UI is built but requires library update for automatic embedding.
Workaround: You can manually access the UI at http://localhost:3001/ui/canvas.html when the MCP HTTP server is running.

Tips

Be specific: "Create a 200x50 blue button" works better than "make a button"
Use element IDs: Ask Claude to list elements first, then reference them by ID
Iterate: Start simple and refine with follow-up requests
Check connection: If tools fail, ensure Azyrom app is running

Troubleshooting

MCP Server Disconnected

Ensure Azyrom app is running
Check the full path to dart executable in config
Verify the path to mcp_server/bin/main.dart is correct
Restart Claude Desktop

Tools Not Working

Make sure Azyrom is in the foreground
Check that a document is open
The MCP server auto-reconnects, wait a few seconds if disconnected

Type Errors

If you see type casting errors, ensure you're using the latest version of Azyrom which handles numeric type conversions automatically.