DEV Community

Cover image for DevFlow: API testing tool made with UNO.
Anshu Mandal
Anshu Mandal Subscriber

Posted on • Edited on

DevFlow: API testing tool made with UNO.

#devchallenge #unoplatformchallenge #dotnet #crossplatform

AI Challenge for Cross-Platform Apps - AI Acceleration Submission

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.

DevFlow Application Preview

Key Features

Feature Description
REST Client Full HTTP method support (GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS)
GraphQL Testing Query editor with syntax support
Real-time Connections WebSocket and Server-Sent Events (SSE)
Authorization Bearer Token, Basic Auth, API Key support
Response Viewer JSON formatting, raw view, and headers inspection
Cross-Platform Single codebase for all platforms

Platform Support

Platform Architecture Status
Windows x64, ARM64 Supported
macOS ARM64 (Apple Silicon), x64 Supported
Linux AMD64 (x64) Supported
WebAssembly Browser-based Supported

Demo

GitHub Repository:

GitHub logo prime399 / DevFlow

DevFlow

DevFlow Logo

A cross-platform API client built with Uno Platform

Release License Live Demo

Live Demo (WebAssembly) • Download • Features • Installation

Overview

DevFlow is a full-featured, cross-platform API client application similar to Postman or Hoppscotch. Built entirely with Uno Platform, it runs on Windows, macOS, Linux, and WebAssembly from a single codebase.

Test REST APIs, GraphQL endpoints, and real-time connections (WebSocket/SSE) from a unified, modern interface with a beautiful dark theme.

Live Demo

Try DevFlow instantly in your browser - no installation required:

devflow.primefolio.tech

Downloads

Download the latest release for your platform:

GitHub Releases































Platform Architecture Download
Windows x64, ARM64 Latest Release
macOS ARM64 (Apple Silicon) Latest Release
Linux AMD64 (x64)
.deb, .rpm packages
WebAssembly Browser Live Demo

Features

REST Client

  • Full HTTP method support: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS
  • Query parameters editor with enable/disable toggles
  • Custom headers management
  • Request body editor with…
View on GitHub

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

devflow.primefolio.tech

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

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
Enter fullscreen mode Exit fullscreen mode

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)

Tool Purpose
uno_platform_docs_search Search Uno Platform documentation for specific topics
uno_platform_docs_fetch Retrieve complete documentation pages
uno_platform_agent_rules_init Initialize agent with Uno development best practices
uno_platform_usage_rules_init Prime the agent with Uno API usage patterns

Local App MCP Tools (Runtime Interaction)

Tool Purpose
uno_app_get_runtime_info Get app info (PID, OS, Platform)
uno_app_get_screenshot Capture screenshot of running app
uno_app_pointer_click Click at X,Y coordinates
uno_app_key_press Type individual keys with modifiers
uno_app_type_text Type strings into input controls
uno_app_visualtree_snapshot Get textual representation of visual tree
uno_app_element_peer_default_action Execute automation peer actions
uno_app_close Close the running app

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"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Language Support

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>
Enter fullscreen mode Exit fullscreen mode

Syntax Highlighting

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");
})
Enter fullscreen mode Exit fullscreen mode

HttpKiota Client

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
Enter fullscreen mode Exit fullscreen mode

API testing in-action

Second GraphQL endpoint

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."
Enter fullscreen mode Exit fullscreen mode

̥Visual̥ tree̥ inspection̥

HTTP Method Testing Automation

Copilot systematically tested all HTTP methods against the mock API:

Method Endpoint Action Result
GET /posts/1 uno_app_pointer_click on method dropdown → select GET 200 OK
POST /posts uno_app_type_text JSON body → Send 201 Created
PUT /posts/1 Switch method, update body → Send 200 OK
DELETE /posts/1 Switch method → Send 200 OK

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Platform-Specific Stats

Metric Desktop WebAssembly
Cold Start ~1.5s ~3-4s
Hot Reload Instant N/A
HTTP Requests Native speed Slightly slower
Memory Usage ~150MB Browser-dependent

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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; }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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

Built with Uno Platform 6.4.26 on .NET 10.0

Top comments (1)

Collapse
 
prime_299792 profile image
Anshu Mandal •

I hope you like it! :)