Getting Started with MCP

This guide walks you through setting up the Model Context Protocol (MCP) integration to control Azyrom with Claude and other AI assistants.

Prerequisites

Azyrom installed on your system
Claude Desktop app (recommended) or another MCP-compatible AI client
Basic understanding of Azyrom's design interface

Step 1: Enable MCP Server in Azyrom

Open Azyrom
Go to Settings (⌘/Ctrl + ,)
Navigate to the MCP tab
Toggle Enable MCP Server to ON
Note the port number (default: 9999)

Keep It Running

The MCP server only runs while Azyrom is open. Keep the app running while using MCP features.

Step 2: Configure Claude Desktop

Locate Configuration File

Find your Claude Desktop configuration file:

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

Add Azyrom MCP Server

Edit the configuration file to add Azyrom:

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

Replace /path/to/azyrom/ with the actual path to your Azyrom installation.

Find Your Installation Path

macOS: Usually /Applications/Azyrom.app/Contents/Resources/
Windows: Usually C:\Program Files\Azyrom\
From Source: Your local repository path

Step 3: Restart Claude Desktop

Save the configuration file
Quit Claude Desktop completely
Relaunch Claude Desktop
The Azyrom MCP server will connect automatically

Step 4: Verify Connection

Test the connection by asking Claude:

"Can you see the Azyrom MCP server? What tools are available?"

Claude should respond with a list of available Azyrom tools.

Step 5: Start Designing!

Try these example commands to get started:

Basic Element Creation

"Create a blue rectangle 200x150 at position 100, 100"

Using Icons

"Insert a home icon from Font Awesome, size 48, color #2196F3"

Batch Operations

"Create three circles in a row, each 80x80, with colors red, green, and blue"

Component Instances

"Create a component named 'Button' and then create 3 instances of it"

Troubleshooting

Connection Failed

Ensure Azyrom is running
Check MCP server is enabled in Azyrom settings
Verify the port number (default: 9999)
Check firewall settings aren't blocking localhost connections

Tools Not Available

Restart Claude Desktop after configuration changes
Verify the path in claude_desktop_config.json is correct
Ensure Dart SDK is installed (required to run MCP server)

Commands Not Working

Be specific in your descriptions
Include position, size, and property details
Check the Azyrom console for error messages
Try simpler commands first to verify connection

Best Practices

Be Specific - Include exact positions, sizes, and colors
Start Simple - Test basic commands before complex operations
Use Undo - Experiment freely, undo mistakes easily
Batch Operations - Create multiple elements at once for better performance
Save Regularly - MCP operations are real changes to your document

Next Steps

Now that you're set up, explore advanced features:

New Features Guide - Learn about the latest MCP capabilities
Experiment with batch operations for complex layouts
Try generating UI from data descriptions
Explore component systems and design automation