UMGBridge Plugin

A TCP-based bridge plugin for Unreal Engine 5 that enables AI-assisted UMG (Unreal Motion Graphics) widget creation and manipulation via MCP (Model Context Protocol).

Features

• TCP Server: Built-in TCP server listening on port 9999 for receiving commands
• Widget Operations: Create, modify, delete, and query UMG widgets programmatically
• Animation Support: Create widget animations with keyframes
• Asset Management: Create, open, and save Widget Blueprints
• Screenshot: Capture widget preview screenshots
• JSON Protocol: Simple JSON-based command/response protocol
• MCP Integration: Works with Claude Code and other MCP-compatible AI assistants
• UI Analysis: Analyze UI screenshots and generate widget hierarchies

Architecture

┌─────────────────┐     TCP      ┌─────────────────┐
│  AI Assistant   │◄────────────►│   Python MCP    │
│  (Claude Code)  │   stdio      │     Server      │
└─────────────────┘              └────────┬────────┘
                                          │
                                          │ TCP:9999
                                          ▼
                                 ┌────────────────┐
                                 │  UMGBridge     │
                                 │  TCP Server    │
                                 │   (UE5 C++)    │
                                 └────────┬───────┘
                                          │
                                          ▼
                                 ┌────────────────┐
                                 │  Command       │
                                 │  Executor      │
                                 └────────┬───────┘
                                          │
                    ┌─────────────────────┼─────────────────────┐
                    ▼                     ▼                     ▼
           ┌───────────────┐     ┌───────────────┐     ┌───────────────┐
           │   Widget      │     │  Animation    │     │    Asset      │
           │   Handler     │     │   Handler     │     │   Handler     │
           └───────────────┘     └───────────────┘     └───────────────┘

Requirements

• Unreal Engine 5.3 or later
• Python 3.10+ (for MCP server)
• Windows 10/11

Installation

Plugin Installation

1. Clone or download this repository
2. Copy the UMGBridgePlugin folder to your project's Plugins directory
3. Restart Unreal Editor
4. Enable the plugin in Edit > Plugins > UMG Bridge

MCP Server Installation

# Navigate to the MCP server directory
cd Plugins/UMGBridgePlugin/Resources/mcp_server

# Install the package
pip install -e .

Or using uvx:

uvx install umg-mcp

Configuration

Configure the plugin in Edit > Project Settings > Plugins > UMG Bridge:

Setting	Description	Default
Server Port	TCP port for incoming connections	9999
Auto Start Server	Start server automatically when plugin loads	false
Max Connections	Maximum number of concurrent connections	10
Connection Timeout	Connection timeout in seconds	30.0
Log Commands	Log all received commands	true
Log Responses	Log all sent responses	false

Claude Code Configuration

Add to your Claude Code MCP settings:

Windows: %APPDATA%\Claude\claude_desktop_config.json

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "umg-mcp": {
      "command": "umg-mcp",
      "description": "MCP server for creating UMG widgets in UE5"
    }
  }
}

Quick Start

1. Open your UE5 project with the UMGBridge plugin enabled
2. Create or open a Widget Blueprint
3. Start the MCP server (automatically done when using Claude Code with MCP)
4. Use natural language to create UI:

Create a main menu UI with:
- A title text "My Game" at the top
- A vertical box with Start, Options, and Quit buttons
- Style the buttons with blue background

Available MCP Tools

Connection

Tool	Description
umg_connect	Connect to UE5 UMGBridge plugin via TCP
umg_disconnect	Disconnect from UE5

Widget Operations

Tool	Description
umg_create_widget	Create a UMG widget in UE5
umg_set_property	Set a property on a widget
umg_delete_widget	Delete a widget
umg_get_widget_tree	Get the widget hierarchy as JSON
umg_batch_create	Create multiple widgets in one request

Animation Operations

Tool	Description
umg_create_animation	Create a new animation
umg_add_keyframe	Add a keyframe to an animation
umg_play_animation	Play an animation
umg_stop_animation	Stop an animation
umg_list_animations	List all animations in the blueprint
umg_apply_animation_preset	Apply a predefined animation preset

Asset Operations

Tool	Description
umg_create_widget_blueprint	Create a new Widget Blueprint asset
umg_open_widget_blueprint	Open an existing Widget Blueprint
umg_save_asset	Save the current blueprint
umg_take_screenshot	Take a screenshot of the widget preview

UI Analysis

Tool	Description
umg_analyze_ui	Analyze a UI image and generate widget structure
umg_create_from_description	Create UMG widgets from natural language description
umg_create_from_json	Create UMG widgets from JSON description

Supported Widget Types

Layout Widgets

• CanvasPanel, VerticalBox, HorizontalBox, GridPanel
• Overlay, ScrollBox, SizeBox, ScaleBox
• WrapBox, UniformGridPanel
• Border, InvalidationBox, RetainerBox

Basic Widgets

• Button, TextBlock, Image
• Spacer, ProgressBar, Slider

Input Widgets

• CheckBox, EditableText, EditableTextBox
• ComboBoxString, SpinBox, MultiLineEditableText

Advanced Widgets

• ListView, TreeView, RichTextBlock

Animation Presets

Preset	Description
fade_in, fade_out, fade_in_out	Opacity fade animations
slide_in_left, slide_in_right, slide_in_top, slide_in_bottom	Slide from screen edges
scale_up, scale_down	Scale animations
bounce, shake, pulse, rotate	Special effect animations

Protocol

Request Format

{
    "request_id": "unique-request-id",
    "command": "command_name",
    "params": {
        // Command-specific parameters
    }
}

Response Format

{
    "request_id": "unique-request-id",
    "success": true,
    "result": {
        // Command-specific result
    }
}

Error Response

{
    "request_id": "unique-request-id",
    "success": false,
    "error": {
        "code": "ERROR_CODE",
        "message": "Error description"
    }
}

Example Usage

Creating a Simple Button

# Connect to UE5
umg_connect(host="127.0.0.1", port=9999)

# Create a widget blueprint
umg_create_widget_blueprint(asset_path="/Game/UI/WBP_MainMenu", name="WBP_MainMenu")

# Create widgets
umg_batch_create(widgets=[
    {"type": "CanvasPanel", "name": "RootCanvas"},
    {"type": "Button", "name": "StartButton", "parent": "RootCanvas",
     "properties": {"text": "Start Game", "font_size": 24}}
])

# Save the asset
umg_save_asset()

Applying Animation

# Create animation
umg_create_animation(name="ButtonFade", target_widget="RootCanvas.StartButton")

# Add keyframes
umg_add_keyframe(animation="ButtonFade", widget="RootCanvas.StartButton",
                 property="RenderOpacity", time=0.0, value=0.0)
umg_add_keyframe(animation="ButtonFade", widget="RootCanvas.StartButton",
                 property="RenderOpacity", time=0.5, value=1.0)

Project Structure

UMGBridgePlugin/
├── Source/UMGBridge/
│   ├── Public/
│   │   ├── Animation/        # Animation builder
│   │   ├── Commands/         # Command types and executor
│   │   ├── TCP/              # TCP server interface
│   │   ├── Widgets/          # Widget factory
│   │   └── UMGBridgeModule.h
│   └── Private/
│       ├── Animation/
│       ├── Commands/
│       │   └── Handlers/     # Command handlers
│       ├── TCP/
│       └── Widgets/
├── Resources/
│   └── mcp_server/
│       ├── src/umg_mcp/
│       │   ├── models/       # Data models
│       │   ├── parser/       # UI parsers
│       │   ├── tools/        # MCP tools
│       │   └── transport/    # TCP client
│       ├── pyproject.toml
│       └── README.md
├── UMGBridge.uplugin
├── README.md
├── CHANGELOG.md
└── LICENSE

Troubleshooting

Connection Failed

1. Ensure the UMGBridge plugin is enabled in UE5
2. Check if Auto Start Server is enabled, or manually start the server
3. Verify port 9999 is not blocked by firewall
4. Check UE5 Output Log for plugin initialization messages

Widget Not Found

1. Ensure you have opened a Widget Blueprint before creating widgets
2. Use the correct widget path format: Parent.Child.Grandchild
3. Check widget names are unique within their parent

Animation Keyframes Not Working

Note: The current implementation of keyframe creation is a placeholder. Full MovieScene integration requires additional UE5 API work.

• Animation objects can be created
• Animation presets can be applied
• Keyframe creation logs requests but does not create actual keyframes yet

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Areas for Contribution

• Full MovieScene keyframe implementation
• Additional widget types
• More animation presets
• Widget property validation
• Undo/redo support
• Widget template system

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• Documentation: https://github.com/umg-mcp/UMGBridgePlugin#readme
• Issues: https://github.com/umg-mcp/UMGBridgePlugin/issues
• Repository: https://github.com/umg-mcp/UMGBridgePlugin