MauiReactor Documentation

The MauiReactor MCP server provides the following capabilities to your IDE/AI agent:

• Tools: Scaffolding MAUI components, reading/writing workspace files, and performing basic build/test tasks.
• Resources: Access to embedded templates located under Tools/Resources/Components.
• Prompts: MCP-compliant prompt definitions designed for guided workflows.

In MauiReactor, state management is handled via the SetState() method. When you call SetState(), the component automatically triggers a re-render to reflect the changes. You can access the current state through the State property. For updates that should not happen immediately, you can use SetState(action, delay) to provide a delay.

// Updating state
SetState(s => s.Count++);

// Accessing state
var currentCount = State.Count;

// Delayed update
SetState(() => s.IsLoading = false, 500);

MauiReactor uses a fluent API for event handling. Most controls provide methods like .OnClicked() or .OnTapped() to attach actions. Event handlers have full access to the component's state and can modify it to trigger UI updates.

Button("Click Me")
    .OnClicked(() => {
        SetState(s => s.ClickedCount++);
    })

MauiReactor provides several layout containers to structure your UI components. Use these to manage the positioning and flow of child elements:

• VStack: Arranges child elements in a vertical stack.
• HStack: Arranges child elements in a horizontal stack.
• Grid: A grid-based layout using rows and columns.
• AbsoluteLayout: Allows for absolute positioning of elements.
• FlexLayout: A flexible layout engine for dynamic sizing and wrapping.

MauiReactor implements the Model-View-Update (MVU) pattern to manage UI state and rendering, similar to React Native or Flutter.

• Model: Represented by POCO (Plain Old CLR Object) classes that hold the component state.
• View: The visual tree structure defined by components using declarative C# syntax.
• Update: State changes (triggered via SetState) cause the framework to re-render the View.

This pattern ensures that the UI is a direct function of the current state.

Once a theme is defined with selectors, you can apply those styles to components using the .ThemeKey() method. This allows you to use semantic names (like AppTheme.PrimaryButton) instead of hardcoding styles in every component.

Button("Action")
    .ThemeKey(AppTheme.PrimaryButton)
    .OnClicked(OnClicked)

When building applications with MauiReactor, follow these architectural guidelines to ensure maintainability and performance:

Component Structure

• Single Purpose: Keep components focused on a single task.
• Composition: Prefer composing UI from smaller components rather than using inheritance.
• Reusability: Extract reusable UI elements into their own separate classes.

State Design

• Minimalism: Keep state objects as small and focused as possible.
• Immutability: Use immutable state updates whenever possible to align with the MVU pattern.
• State Lifting: When multiple components need access to the same data, lift the state to their common ancestor.

To run the topic generation script, ensure the following environment is prepared:

1. PowerShell: Windows PowerShell 5.1 or PowerShell 7+.
2. Documentation Repository: The docs repository must be cloned and located at C:\Source\github\reactorui-maui-docs (or the path must be updated in the script's $root variable).

The MauiReactor MCP Server provides tools for component scaffolding, workspace inspection, and build/test actions via the Model Context Protocol (MCP). You can install and run it using dnx by configuring your IDE's MCP settings.

VS Code Setup

Create a .vscode/mcp.json file in your workspace root with the following configuration:

Visual Studio Setup

Create a .mcp.json file in your solution directory with the same configuration used for VS Code.

{
  "servers": {
    "MauiReactor.MCP": {
      "type": "stdio",
      "command": "dnx",
      "args": [
        "MauiReactor.MCP",
        "--version",
        "0.1.0-preview",
        "--yes"
      ]
    }
  }
}