NoesisDemo - TypeScript + AI-Powered MVVM Development Solution

Development Programming & Scripting
,
1

NoesisDemo - TypeScript + AI-Powered MVVM Development Solution

:link: Project Repository: GitHub - No-needto-recall/NoesisDemo: Develop XAML UIs elegantly with TypeScript in UnrealEngine

:bullseye: What Does This Project Do?

This is an Unreal Engine 5.4 sample project that demonstrates:

  • Writing NoesisGUI ViewModels in TypeScript - Using PuerTS’s uclass_extends to eliminate blueprint development

  • Perfect recreation of official Buttons and QuestLog samples - Proving the completeness and viability of the approach

  • Full AI-assisted development support (e.g., Claude Code) - Enabling near-automated UI code generation

  • Completely code-based workflow - XAML + TypeScript, version control friendly, no blueprint merge conflicts

Core Philosophy: XAML and ViewModels are both code → AI fully understands → Automatic generation and modification → Dramatically improved development efficiency

:bookmark_tabs: Table of Contents

:sparkles: Core Features

:white_check_mark: Perfect Recreation of Official Samples: Successfully recreated NoesisGUI’s official Buttons and QuestLog samples using TypeScript

:rocket: TypeScript Code-Based ViewModels: Using PuerTS’s uclass_extends to inherit UE classes and auto-generate blueprints

:wrench: Dynamic DataContext Setting: Custom UNoesisViewModeInstance to adjust DataContext assignment timing

:robot: AI-Friendly: Both XAML and ViewModels are code, easy for AI to understand and generate

:package: Version Control Friendly: Completely code-based, say goodbye to blueprint merge conflicts

:high_voltage: Automatic Property Notifications: NoesisProxy automatically handles PropertyChanged, supports TArray and TMap

:robot: AI-Assisted Development - Near-Automated UI Code Generation

Why Is This Approach AI-Friendly?

This solution adopts a completely code-based workflow:

  • :white_check_mark: XAML files are text format - AI can understand and generate them

  • :white_check_mark: ViewModels written in TypeScript - AI excels at handling them

  • :white_check_mark: Data binding logic is clear and readable - AI can reason about it

This makes the project fully compatible with AI-assisted development tools, such as:

  • Claude Code

  • GitHub Copilot

  • Cursor

  • Other AI coding assistants

What Can AI Do?

1. Automatically Generate ViewModel Code

Simply describe your requirements, and AI generates complete ViewModels:

// Input: "Create a settings interface with volume and quality options"
// AI automatically generates:
class TS_SettingsViewMode extends UE.Object {
    @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite)
    Volume: number = 80;
    
    @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite)
    Quality: string = "High";
    
    @ufunction(ufunction.BlueprintCallable)
    ApplySettings(): void {
        console.log(`Applying: Volume=${this.Volume}, Quality=${this.Quality}`);
    }
}

2. Automatically Modify and Refactor Code

  • Tell AI “add sound effects toggle” → Automatically modifies TypeScript and XAML

  • AI understands data binding logic, automatically adds corresponding properties and commands

  • Automatically handles complex collection bindings (TArray, TMap)

3. Rapidly Generate Complete Interfaces

  • “Create an interface with a user list” → AI automatically generates XAML + ViewModel

  • “Add search and filtering functionality” → AI automatically adds related code

  • “Implement drag-and-drop sorting” → AI generates complete event handling logic

Using AI tools like Claude Code, simply describe your UI requirements and interaction logic, and AI automatically generates XAML and ViewModel code.

Developers only need to review and fine-tune, dramatically improving development efficiency and achieving a near-automated UI code development experience.

“No more manual blueprint wiring - AI generates the code directly!” - Developer

:building_construction: Technical Architecture Highlights

1. PuerTS uclass_extends - Auto-Generate Blueprint Classes

Using TypeScript decorators to define properties and methods, PuerTS automatically generates blueprint classes:

class TS_ButtonsViewMode extends UE.Object {
    static Path(): string {
        return "/Game/BluePrints/TypeScript/ViewMode/Buttons/TS_ButtonsViewMode_C";
    }
    
    @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite)
    TestValue: string = "Hello NoesisGUI";
    
    @ufunction(ufunction.BlueprintCallable)
    StartCommand(): void {
        console.log("Button clicked!");
    }
}

2. UNoesisViewModeInstance - Solving DataContext Limitations

Custom UNoesisInstance subclass that automatically sets DataContext in the XamlLoaded callback, solving the issue where the official class doesn’t support dynamic setting.

3. NoesisProxy - Automatic Property Notifications

Using JavaScript Proxy API to automatically intercept property modifications and trigger NoesisGUI updates:

const proxy = createNoesisProxy<TS_ButtonsViewMode>(viewMode);

// Any property modification automatically notifies NoesisGUI
proxy.TestValue = "New Value";

// Supports TArray automatic notifications
proxy.items.Add(newItem);       // Automatically calls NotifyArrayPostAdd
proxy.items.RemoveAt(0);        // Automatically calls NotifyArrayPreRemove + PostRemove

// Supports TMap automatic notifications
proxy.map.Add("key", value);    // Automatically calls NotifyMapPostAdd

Data Binding Flow:

TypeScript class definition (@uproperty, @ufunction)
  ↓
PuerTS generates blueprint class
  ↓
TypeScript creates instance (UE.NewObject)
  ↓
Bind to UNoesisViewModeInstance (PendingDataContext)
  ↓
XAML loading complete (XamlLoaded callback)
  ↓
Automatically set DataContext
  ↓
Data binding takes effect (XAML Binding → ViewModel properties)
  ↓
Property updates (NoesisProxy → NotifyPropertyChanged → UI refresh)

:artist_palette: Official Sample Recreation

Buttons Sample

Demonstrates basic MVVM data binding:

  • Basic property binding

  • Command binding

  • XAML animations and styles

QuestLog Sample

Demonstrates complex data binding:

  • TArray collection binding - Quest list

  • Complex data objects - Quest class (title, image, difficulty, description, etc.)

  • Dynamic data operations - AddQuest method, automatically triggers UI updates

// QuestLog ViewModel Example
class TS_QuestLogViewMode extends UE.Object {
    @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite)
    Quests: UE.TArray<TS_Quest>;
    
    @ufunction(ufunction.BlueprintCallable)
    AddQuest(Title: string, Image: UE.Texture2D, ...): TS_Quest {
        const Quest = UE.NewObject(TS_Quest);
        Quest.Initialize(Title, Image, ...);
        
        // Use Proxy to automatically trigger TArray update notifications
        let Proxy = createNoesisProxy<TS_QuestLogViewMode>(this);
        Proxy.Quests.Add(Quest);
        
        return Quest;
    }
}

:rocket: Quick Start

Requirements:

  • Unreal Engine 5.4

  • NoesisGUI Plugin 3.2+

  • PuerTS Plugin (latest version)

Get the Project:

git clone https://github.com/No-needto-recall/NoesisDemo.git

:warning: Important Notes:

  • :white_check_mark: Windows Users: After cloning, simply double-click NoesisDemo.uproject to open - works out of the box

  • :warning: Mac/Linux Users: Manual C++ code compilation required

For detailed installation steps, configuration instructions, and usage tutorials, please visit the project’s GitHub repository to view the complete documentation.

:books: Related Links

:light_bulb: Summary

This project provides a new approach to NoesisGUI development in Unreal Engine:

:white_check_mark: Use TypeScript instead of blueprints for ViewModels

:white_check_mark: Completely code-based, version control friendly, no blueprint merge conflicts

:white_check_mark: Full compatibility with AI-assisted development tools, enabling near-automated UI code generation

:white_check_mark: Recreation of official samples, proving the completeness and viability of the approach

:white_check_mark: Automatic property notifications, supports complex TArray and TMap bindings

Perfect For:

  • Projects requiring frequent UI iterations

  • Team projects with multiple collaborators

  • Developers wanting to leverage AI-assisted development

  • Developers seeking to eliminate blueprint merge conflicts

If this project helps you, please give it a Star :star:!

We also welcome PRs to recreate more official UI demos - let’s improve this solution together! :tada:

Made with :heart: for the NoesisGUI Community