1. Writing NoesisGUI ViewModels in TypeScript - Using PuerTS's uclass_extends to eliminate blueprint development
2. Perfect recreation of official Buttons and QuestLog samples - Proving the completeness and viability of the approach
3. Full AI-assisted development support (e.g., Claude Code) - Enabling near-automated UI code generation
4. Completely code-based workflow - XAML + TypeScript, version control friendly, no blueprint merge conflicts

• Core Features
• AI-Assisted Development - Near-Automated UI Code Generation
• Technical Architecture Highlights
• Official Sample Recreation
• Quick Start
• Related Links

• ✅ Perfect Recreation of Official Samples: Successfully recreated NoesisGUI's official Buttons and QuestLog samples using TypeScript
• 🚀 TypeScript Code-Based ViewModels: Using PuerTS's uclass_extends to inherit UE classes and auto-generate blueprints
• 🔧 Dynamic DataContext Setting: Custom UNoesisViewModeInstance to adjust DataContext assignment timing
• 🤖 AI-Friendly: Both XAML and ViewModels are code, easy for AI to understand and generate
• 📦 Version Control Friendly: Completely code-based, say goodbye to blueprint merge conflicts
• ⚡ Automatic Property Notifications: NoesisProxy automatically handles PropertyChanged, supports TArray and TMap

• ✅ XAML files are text format - AI can understand and generate them
• ✅ ViewModels written in TypeScript - AI excels at handling them
• ✅ Data binding logic is clear and readable - AI can reason about it

• Claude Code
• GitHub Copilot
• Cursor
• Other AI coding assistants

// 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}`);
    }
}

• 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)

• "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

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!");
    }
}

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

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)

• Basic property binding
• Command binding
• XAML animations and styles

• 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;
    }
}

• Unreal Engine 5.4
• NoesisGUI Plugin 3.2+
• PuerTS Plugin (latest version)

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

• ✅ Windows Users: After cloning, simply double-click NoesisDemo.uproject to open - works out of the box
• ⚠️ Mac/Linux Users: Manual C++ code compilation required

• GitHub Repository: https://github.com/No-needto-recall/NoesisDemo
• PuerTS UClass Extends Documentation: https://puerts.github.io/docs/puerts/unreal/uclass_extends/
• NoesisGUI Property Change Notifications: Official Documentation

• ✅ Use TypeScript instead of blueprints for ViewModels
• ✅ Completely code-based, version control friendly, no blueprint merge conflicts
• ✅ Full compatibility with AI-assisted development tools, enabling near-automated UI code generation
• ✅ Recreation of official samples, proving the completeness and viability of the approach
• ✅ Automatic property notifications, supports complex TArray and TMap bindings

• Projects requiring frequent UI iterations
• Team projects with multiple collaborators
• Developers wanting to leverage AI-assisted development
• Developers seeking to eliminate blueprint merge conflicts