MCP Integration

Azyrom features full Model Context Protocol (MCP) integration, allowing AI assistants like Claude to create, modify, and query your designs programmatically.

What is MCP?

The Model Context Protocol (MCP) is an open standard that enables AI assistants to interact with applications. With MCP, you can:

Features

🎨 Full Design Control

Create, update, and delete elements. Apply fills, strokes, effects, and typography.

🔄 Batch Operations

Create or update multiple elements in a single command for 10-100x performance.

🎭 Iconify Integration

Access 200,000+ icons from 150+ collections (Material Design, Font Awesome, Heroicons, Phosphor, and more) via MCP tools.

🔗 Component System

Create component definitions and instances with property overrides.

⏮️ Undo/Redo

Programmatically undo and redo actions for error recovery and experimentation.

📐 Smart Positioning

Query element bounds, align elements, and calculate precise layouts.

🧩 Composite UI Tools

Create complete UI components (buttons, cards, navbars) in single operations.

📱 Screen Templates

Generate complete screens (login, settings, dashboard) with 15-30 elements instantly.

🚀 Namespace System

Lazy-loaded tool categories for 60% faster startup and better organization.

Quick Start

  1. Enable MCP server in Azyrom settings (Settings → MCP)
  2. Configure Claude Desktop with the MCP server
  3. Start designing with natural language commands
Getting Started

See the Getting Started Guide for detailed setup instructions.

New in v1.2.0

Performance and productivity update with major new capabilities:

Learn more in the New Features Guide.

Available Articles

Getting Started with MCP

Complete setup guide for Claude Desktop integration

New Features (v1.2.0)

Comprehensive guide to all MCP capabilities

Composite UI Tools

Create multi-element UI components in single operations

Screen Templates

Generate complete screen layouts instantly

Batch Operations

Client-specified IDs, nested children, and advanced workflows

Namespace System

Organized, lazy-loaded tool categories

Iconify Icon Tools

Search, browse, and insert 200K+ icons from 150+ collections

Example Commands

Create a blue rectangle:

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

Insert an icon:

"Insert a home icon from Font Awesome at 50, 50 with size 48"

Create a button with icon:

"Create a primary button with label 'Sign In' and an arrow icon"

Generate a complete screen:

"Generate an iOS login screen with dark theme"

Batch create elements:

"Create three rectangles in a row, each 100x100, with colors red, green, and blue"

Use Cases

Learn More

For technical documentation and API reference, see the MCP Server README in the Azyrom repository.