This is a submission for the AI Challenge for Cross-Platform Apps - AI Acceleration

What I Built

DevFlow is a full-featured cross-platform API client application, similar to Postman or Hoppscotch, built entirely with Uno Platform. It enables developers to test REST APIs, GraphQL endpoints, and real-time connections (WebSocket/SSE) from a single, unified interface that runs everywhere.

The application demonstrates how modern AI tooling combined with Uno Platform's MCP (Model Context Protocol) servers can dramatically accelerate cross-platform development, taking what would traditionally be weeks of work and compressing it into days.

Key Features

Platform Support

Demo

GitHub Repository:

You can test it without installing any exe by using WASM version here:

Else you can download supported OS latest release from the Releases page:
Github Release Page

Running DevFlow

# Clone the repository
git clone https://github.com/prime399/DevFlow.git
cd DevFlow

# Run on Desktop (Windows/macOS/Linux)
dotnet run --project DevFlow/DevFlow.csproj -f net10.0-desktop

# Run on WebAssembly
dotnet run --project DevFlow/DevFlow.csproj -f net10.0-browserwasm

AI Tooling in Action

This project showcases the power of contextual AI acceleration. GitHub Copilot with Uno Platform MCP integration was my primary development companion throughout this project.

GitHub Copilot with Uno Platform MCP

The real game-changer was GitHub Copilot integrated with Uno Platform's MCP servers. This combination provided context-aware assistance that understood not just general .NET development, but specifically how to build Uno Platform applications correctly.

What made this powerful was Copilot's ability to:

• Search Uno Platform documentation in real-time via uno_platform_docs_search
• Test my locally running app using the App MCP tools
• Validate UI changes by capturing screenshots and inspecting the visual tree
• Provide grounded guidance based on official Uno Platform best practices

MCP Tools Used Throughout Development

Here's the complete list of Uno Platform MCP tools that accelerated my workflow:

Remote MCP Tools (Documentation & Guidance)

Local App MCP Tools (Runtime Interaction)

Using App MCP and Uno Platform MCP

Setting Up the MCP Servers

Uno Platform provides two MCP servers that transformed my development workflow:

{
  "servers": {
    "uno": {
       "url": "https://mcp.platform.uno/v1"
    },
    "uno-app": {
       "command": "dnx",
       "args": ["-y", "uno.devserver", "--mcp-app"]
    }
  }
}

How MCP Docs Search Accelerated Development

The uno_platform_docs_search tool was invaluable throughout development. Here are concrete examples of how it helped:

Challenge 1: Language Preference and Localization

When implementing language preference selection mode for the application settings, I was unsure about Uno Platform's recommended approach. A simple query to the MCP:

"How to implement language preference selection in Uno Platform?"

The MCP documentation search returned detailed guidance on using Uno.Extensions.Localization with IStringLocalizer, saving me hours of research.

Challenge 2: Syntax Highlighting for Code Editor

Building the CodeEditorControl required understanding how to implement syntax highlighting within Uno's rendering model.

The MCP search for

"What's the best Syntax Highlighting Code Editor supported in UNO"
pointed me to the correct approach using Run elements:

<TextBlock FontFamily="{StaticResource MonospaceFontFamily}">
    <Run Text="{x:Bind LineNumber}" Foreground="{StaticResource TextMutedBrush}"/>
    <Run Text="  "/>
    <Run Text="{x:Bind Content}" Foreground="{StaticResource TextPrimaryBrush}"/>
</TextBlock>

Challenge 3: HttpKiota for REST API Support

The built-in HttpKiota feature was a revelation. When I queried the MCP about HTTP client best practices, it guided me toward using IHttpClientFactory with proper dependency injection. Here's the actual configuration from my App.xaml.cs:

// App.xaml.cs - HTTP Client Configuration
.UseHttp((context, services) => {
#if DEBUG
    // DelegatingHandler will be automatically injected for debugging
    services.AddTransient<DelegatingHandler, DebugHttpHandler>();
#endif
    // Configure HttpClient for API with base URL from configuration
    var apiBaseUrl = context.Configuration["AppConfig:ApiBaseUrl"] ?? "https://localhost:7192";
    services.AddHttpClient<Services.IDataItemService, Services.DataItemService>(client =>
    {
        client.BaseAddress = new Uri(apiBaseUrl);
    });

    // Named client for the API Tester feature
    services.AddHttpClient("ApiTester");
})

This pattern enabled efficient connection pooling and proper lifecycle management across all platforms.

App MCP: Testing My Locally Running Build

One of the most impressive capabilities was using GitHub Copilot with App MCP to test my locally running DevFlow build. Instead of manually clicking through the UI to verify functionality, Copilot could interact with the running application directly.

Live App Testing with Mock API Endpoints

I used JSONPlaceholder to validate DevFlow's REST client. Here's how Copilot automated the testing workflow:

# Copilot's Automated Testing Sequence

1. uno_app_get_runtime_info    → Confirmed DevFlow running (PID: 4912, Platform: Desktop)
2. uno_app_get_screenshot      → Captured initial UI state
3. uno_app_type_text           → Entered: "https://jsonplaceholder.typicode.com/posts/1"
4. uno_app_pointer_click       → Clicked Send button at (850, 45)
5. uno_app_get_screenshot      → Captured response - Status 200 visible
6. uno_app_visualtree_snapshot → Verified ResponseViewer populated correctly

UI Feedback During Agentic Coding

The uno_app_get_screenshot and uno_app_visualtree_snapshot tools provided immediate visual feedback during development. When I asked Copilot to "add a status badge to the response viewer," it could:

1. Make the XAML changes via Hot Reload
2. Capture a screenshot to verify the change
3. Inspect the visual tree to confirm the StatusBadge element rendered correctly

Copilot: "I've added the StatusBadge. Let me verify it rendered correctly..."

→ uno_app_get_screenshot: [UI captured]
→ uno_app_visualtree_snapshot:
   └── ResponseViewerControl
       ├── Grid
       │   ├── StatusBadge (Border)
       │   │   └── TextBlock: "200 OK"
       │   ├── TabView: [Body] [Headers] [Raw]
       │   └── CodeEditorControl
       └── ...

Copilot: "Confirmed - StatusBadge is rendering with '200 OK' text."

HTTP Method Testing Automation

Copilot systematically tested all HTTP methods against the mock API:

This automation caught a UI regression where the response headers weren't clearing between requests - something I would have missed with manual testing.

The uno-check Tool: A Lifesaver for Cross-Platform Development

One of the most valuable tools in my development journey was uno-check. During initial setup, I encountered build failures that were difficult to diagnose. Running:

dotnet tool install -g uno.check
uno-check

The tool identified that I was missing the wasm-tools workload and had an outdated .NET SDK. It automatically offered to fix these issues:

# uno-check detected and fixed:
# - Missing wasm-tools workload
# - Outdated Android SDK components  
# - Incorrect workload versions

uno-check --target desktop --target web

This automated environment validation saved significant debugging time and ensured consistent builds across my development machines.

Cross-Platform Reach

DevFlow runs on 6 target platforms from a single codebase:

Project Configuration

<Project Sdk="Uno.Sdk">
  <PropertyGroup>
    <TargetFrameworks>net10.0-desktop;net10.0-browserwasm</TargetFrameworks>
    <OutputType>Exe</OutputType>
  </PropertyGroup>

  <ItemGroup>
    <!-- Uno Features enabled -->
    <UnoFeatures>
      Material;
      Toolkit;
      MVUX;
      Navigation;
      HttpKiota;
      ThemeService;
      SkiaRenderer;
    </UnoFeatures>
  </ItemGroup>
</Project>

Platform-Specific Stats

The SkiaSharp renderer ensures pixel-perfect consistency across all platforms, meaning the UI looks identical whether running on Windows, macOS, Linux, or in a browser.

Development Experience

What Contextual AI Changed

The combination of GitHub Copilot with Uno Platform MCP fundamentally transformed my development workflow:

Before AI Acceleration

• Manually searching documentation
• Trial-and-error for platform-specific behaviors
• Hours spent on XAML styling issues
• Debugging build configuration problems

After AI Acceleration

• Instant, contextual documentation via MCP
• AI-guided platform-specific implementations
• Rapid UI iteration with Hot Reload + AI suggestions
• Automated environment validation with uno-check

The MVUX Pattern with AI Assistance

The MCP was particularly helpful when learning Uno's MVUX pattern. When I asked about reactive state management, it provided exactly the right guidance:

public partial record RestRequestViewModel
{
    // State management with MVUX
    public IState<string> ResponseBody => State<string>.Value(this, () => string.Empty);
    public IState<int> StatusCode => State<int>.Value(this, () => 0);

    // Updating state
    public async Task SendRequest(CancellationToken ct)
    {
        var response = await _httpClient.SendAsync(request, ct);
        await ResponseBody.UpdateAsync(_ => await response.Content.ReadAsStringAsync(), ct);
        await StatusCode.UpdateAsync(_ => (int)response.StatusCode, ct);
    }
}

Reusable Control Architecture

With AI assistance, I developed a modular architecture with reusable controls:

Controls/
├── KeyValueEditorControl.xaml    # Reusable for Parameters/Headers
├── CodeEditorControl.xaml        # Code editor with line numbers
├── ResponseViewerControl.xaml    # Response display with tabs
└── AuthorizationEditorControl.xaml # Auth configuration panel

The IKeyValueItem interface pattern was suggested by the AI when I explained I needed to reuse the same table editor for both parameters and headers:

public interface IKeyValueItem : INotifyPropertyChanged
{
    Guid Id { get; }
    bool IsEnabled { get; set; }
    string Key { get; set; }
    string Value { get; set; }
    string Description { get; set; }
}

What Surprised Me Most

1. The Speed of Context-Aware AI

Traditional documentation searches require parsing through pages of content. With Uno Platform MCP, the AI agent already understood the context of my project and could provide targeted, actionable guidance instantly.

2. Hot Reload Actually Works

$env:DOTNET_MODIFIABLE_ASSEMBLIES = "debug"
dotnet run -f net10.0-desktop

XAML Hot Reload worked flawlessly for style changes, dramatically speeding up UI iteration. Combined with AI suggestions, I could prototype and refine UI components in minutes rather than hours.

3. Single Codebase Reality

I was skeptical that "write once, run everywhere" would actually work. It did. The same XAML and C# code runs on Windows, macOS, Linux, and WebAssembly without platform-specific modifications.

Technical Highlights

Custom Theming with Catppuccin Mocha

DevFlow uses a custom dark theme based on Catppuccin Mocha, defined in centralized resource dictionaries:

<!-- Styles/AppTheme.xaml -->
<Color x:Key="SurfaceColor">#1E1E2E</Color>
<Color x:Key="TextPrimaryColor">#CDD6F4</Color>
<Color x:Key="AccentPrimaryColor">#89B4FA</Color>

<SolidColorBrush x:Key="HttpGetBrush" Color="#94E2D5"/>
<SolidColorBrush x:Key="HttpPostBrush" Color="#F9E2AF"/>
<SolidColorBrush x:Key="HttpDeleteBrush" Color="#F38BA8"/>

Real-time Connection Services

The WebSocket and SSE implementations use a common interface, allowing easy switching between connection types:

public interface IRealtimeConnectionService
{
    bool IsConnected { get; }
    event EventHandler<string>? MessageReceived;

    Task ConnectAsync(string url, CancellationToken ct = default);
    Task SendMessageAsync(string message, CancellationToken ct = default);
    Task DisconnectAsync(CancellationToken ct = default);
}

Conclusion

Building DevFlow demonstrated that AI-accelerated development with Uno Platform MCP servers is not just a productivity boost, it is a paradigm shift. The combination of:

• Uno Platform MCP for context-aware documentation
• App MCP for runtime interaction, testing, and UI validation
• uno-check for environment troubleshooting
• Hot Reload for rapid UI iteration
• GitHub Copilot as the AI agent orchestrating all MCP tools

This stack enabled me to build a production-quality, cross-platform API client that runs on Windows, macOS, Linux, and WebAssembly from a single codebase, in a fraction of the time traditional development would require.

The future of cross-platform development is here, and it is powered by AI.

Resources

• Uno Platform Documentation
• Uno Platform MCP Guide
• uno-check Tool
• DevFlow GitHub Repository

Built with Uno Platform 6.4.26 on .NET 10.0