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:

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

Widget Operations

Animation Operations

Asset Operations

UI Analysis

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

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