MAUI AI Chat Control — ASP.NET AI Components convergence

.github/workflows/ci-aicontrols.yml

@@ -0,0 +1,40 @@
+name: CI - AI Controls
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'src/AIControls/**'
+      - 'tests/Microsoft.AspNetCore.Components.AI.*/**'
+      - 'tests/Microsoft.Maui.AI.Chat.Controls.Tests/**'
+      - 'samples/AiControls*/**'
+      - 'eng/**'
+      - 'Directory.Build.props'
+      - 'Directory.Build.targets'
+      - 'Directory.Packages.props'
+      - 'global.json'
+      - 'NuGet.config'
+  pull_request:
+    types: [opened, synchronize, reopened, edited]
+    branches: [main]
+    paths:
+      - 'src/AIControls/**'
+      - 'tests/Microsoft.AspNetCore.Components.AI.*/**'
+      - 'tests/Microsoft.Maui.AI.Chat.Controls.Tests/**'
+      - 'samples/AiControls*/**'
+      - 'eng/**'
+      - 'Directory.Build.props'
+      - 'Directory.Build.targets'
+      - 'Directory.Packages.props'
+      - 'global.json'
+      - 'NuGet.config'
+
+jobs:
+  build:
+    uses: ./.github/workflows/_build.yml
+    with:
+      project-path: src/AIControls/AIControls.slnx
+      project-name: aicontrols
+      run-tests: true
+      pack: true
+      install-workloads: true

Directory.Packages.props

@@ -34,6 +34,7 @@
     <PackageVersion Include="Microsoft.Extensions.AI" Version="$(MicrosoftExtensionsAIVersion)" />
     <PackageVersion Include="Microsoft.Extensions.AI.OpenAI" Version="$(MicrosoftExtensionsAIOpenAIVersion)" />
     <PackageVersion Include="Azure.AI.OpenAI" Version="$(AzureAIOpenAIVersion)" />
+    <PackageVersion Include="Azure.Identity" Version="$(AzureIdentityVersion)" />
     <PackageVersion Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitMvvmVersion)" />
   </ItemGroup>
 
@@ -98,6 +99,8 @@
     <PackageVersion Include="DeviceRunners.XHarness.Maui" Version="$(DeviceRunnersVersion)" />
   </ItemGroup>
 
+
+
   <!-- Testing (Microsoft.NET.Test.Sdk and xunit.runner.visualstudio are
        implicitly provided by the Arcade SDK — do not define PackageVersion for them) -->
   <ItemGroup Label="Testing">

MauiLabs.slnx

@@ -8,6 +8,7 @@
     <Project Path="playground/DevFlow.Console/DevFlow.Console.csproj" />
   </Folder>
   <Folder Name="/samples/">
+    <Project Path="samples/AiControlsSample/AiControlsSample.csproj" />
     <Project Path="samples/AIExtensions.Sample.Garden/AIExtensions.Sample.Garden.csproj" />
     <Project Path="samples/AIExtensions.Sample.Hello/AIExtensions.Sample.Hello.csproj" />
     <Project Path="samples/AIExtensions.Sample.DIParameters/AIExtensions.Sample.DIParameters.csproj" />
@@ -20,6 +21,11 @@
   <Folder Name="/src/AI/">
     <Project Path="src/AI/Microsoft.Maui.Essentials.AI/Microsoft.Maui.Essentials.AI.csproj" />
   </Folder>
+  <Folder Name="/src/AIControls/">
+    <Project Path="src/AIControls/Microsoft.Maui.AI.Chat.Controls/Microsoft.Maui.AI.Chat.Controls.csproj" />
+    <Project Path="src/AIControls/Microsoft.AspNetCore.Components.AI.Core/Microsoft.AspNetCore.Components.AI.Core.csproj" />
+    <Project Path="src/AIControls/Microsoft.AspNetCore.Components.AI.SourceGenerators/Microsoft.AspNetCore.Components.AI.SourceGenerators.csproj" />
+  </Folder>
   <Folder Name="/src/AIExtensions/">
     <Project Path="src/AIExtensions/Microsoft.Maui.AI.Attributes/Microsoft.Maui.AI.Attributes.csproj" />
     <Project Path="src/AIExtensions/Microsoft.Maui.AI.Attributes.Generators/Microsoft.Maui.AI.Attributes.Generators.csproj" />
@@ -58,6 +64,7 @@
     <Project Path="src/AppProjectReference/Microsoft.Maui.Build.AppProjectReference.Tests/Microsoft.Maui.Build.AppProjectReference.Tests.csproj" />
   </Folder>
   <Folder Name="/tests/" />
+
   <Folder Name="/tests/AI/">
     <Project Path="tests/AI/Microsoft.Maui.Essentials.AI.Benchmarks/Microsoft.Maui.Essentials.AI.Benchmarks.csproj" />
     <Project Path="tests/AI/Microsoft.Maui.Essentials.AI.DeviceTests/Microsoft.Maui.Essentials.AI.DeviceTests.csproj" />

eng/Versions.props

@@ -40,6 +40,7 @@
     <MicrosoftExtensionsAIVersion>10.4.1</MicrosoftExtensionsAIVersion>
     <MicrosoftExtensionsAIOpenAIVersion>10.4.1</MicrosoftExtensionsAIOpenAIVersion>
     <AzureAIOpenAIVersion>2.1.0</AzureAIOpenAIVersion>
+    <AzureIdentityVersion>1.13.2</AzureIdentityVersion>
   </PropertyGroup>
   <PropertyGroup Label="Roslyn">
     <MicrosoftCodeAnalysisAnalyzersVersion>3.11.0</MicrosoftCodeAnalysisAnalyzersVersion>

samples/AiControlsBlazorSample/AiControlsBlazorSample.csproj

@@ -0,0 +1,74 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+	<PropertyGroup>
+		<TargetFrameworks>net10.0-android</TargetFrameworks>
+		<TargetFrameworks Condition="!$([MSBuild]::IsOSPlatform('linux'))">$(TargetFrameworks);net10.0-ios;net10.0-maccatalyst</TargetFrameworks>
+		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net10.0-windows10.0.19041.0</TargetFrameworks>
+
+		<OutputType>Exe</OutputType>
+		<RootNamespace>AiControlsBlazorSample</RootNamespace>
+		<UseMaui>true</UseMaui>
+		<SingleProject>true</SingleProject>
+		<ImplicitUsings>enable</ImplicitUsings>
+		<Nullable>enable</Nullable>
+		<TreatWarningsAsErrors>true</TreatWarningsAsErrors>
+		<NoWarn>$(NoWarn);XC0022;MEAI001;NU1510</NoWarn>
+		<ValidateXcodeVersion>false</ValidateXcodeVersion>
+
+		<UserSecretsId>ai-attributes-secrets</UserSecretsId>
+
+		<ApplicationTitle>AI Controls Blazor Sample</ApplicationTitle>
+		<ApplicationId>com.microsoft.maui.aicontrols.blazorsample</ApplicationId>
+		<ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
+		<ApplicationVersion>1</ApplicationVersion>
+
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">15.0</SupportedOSPlatformVersion>
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">15.0</SupportedOSPlatformVersion>
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">24.0</SupportedOSPlatformVersion>
+		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
+		<TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
+	</PropertyGroup>
+
+	<ItemGroup>
+		<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" />
+	</ItemGroup>
+
+	<ItemGroup>
+		<PackageReference Include="Microsoft.Maui.Controls" />
+		<PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" />
+		<PackageReference Include="Microsoft.Extensions.Logging.Debug" />
+		<PackageReference Include="Microsoft.Extensions.AI" />
+		<PackageReference Include="Microsoft.Extensions.AI.OpenAI" />
+		<PackageReference Include="Azure.AI.OpenAI" />
+		<PackageReference Include="Microsoft.Extensions.Configuration.Json" />
+	</ItemGroup>
+
+	<ItemGroup>
+		<ProjectReference Include="..\..\src\AIControls\Microsoft.AspNetCore.Components.AI.Core\Microsoft.AspNetCore.Components.AI.Core.csproj" />
+		<ProjectReference Include="..\..\src\AIControls\Microsoft.AspNetCore.Components.AI.Blazor\Microsoft.AspNetCore.Components.AI.Blazor.csproj" />
+	</ItemGroup>
+
+	<!-- The Blazor library uses FrameworkReference Microsoft.AspNetCore.App which has no
+	     runtime pack for mobile/Mac Catalyst. Remove the transitive FrameworkReference since
+	     Microsoft.AspNetCore.Components.WebView.Maui provides the required assemblies. -->
+	<Target Name="_RemoveAspNetCoreFrameworkReference" BeforeTargets="ResolveFrameworkReferences">
+		<ItemGroup>
+			<FrameworkReference Remove="Microsoft.AspNetCore.App" />
+		</ItemGroup>
+	</Target>
+
+	<!-- WARNING: This embeds your local secrets.json into the app binary.
+	     This is a terrible practice that will expose secrets if the app is ever
+	     distributed. It is acceptable here ONLY because this is a local-only
+	     developer sample that will never be published or shared. -->
+	<Target Name="AddUserSecrets" BeforeTargets="PrepareForBuild" Condition=" '$(UserSecretsId)' != '' ">
+		<PropertyGroup>
+			<UserSecretsFilePath Condition=" '$(OS)' == 'Windows_NT' ">$([System.Environment]::GetFolderPath(SpecialFolder.UserProfile))\AppData\Roaming\Microsoft\UserSecrets\$(UserSecretsId)\secrets.json</UserSecretsFilePath>
+			<UserSecretsFilePath Condition=" '$(OS)' == 'Unix' ">$([System.Environment]::GetFolderPath(SpecialFolder.UserProfile))/.microsoft/usersecrets/$(UserSecretsId)/secrets.json</UserSecretsFilePath>
+		</PropertyGroup>
+		<ItemGroup>
+			<EmbeddedResource Include="$(UserSecretsFilePath)" Condition="Exists($(UserSecretsFilePath))" />
+		</ItemGroup>
+	</Target>
+
+</Project>

samples/AiControlsBlazorSample/App.xaml

@@ -0,0 +1,5 @@
+<?xml version = "1.0" encoding = "UTF-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="AiControlsBlazorSample.App">
+</Application>

samples/AiControlsBlazorSample/App.xaml.cs

@@ -0,0 +1,14 @@
+namespace AiControlsBlazorSample;
+
+public partial class App : Application
+{
+    public App()
+    {
+        InitializeComponent();
+    }
+
+    protected override Window CreateWindow(IActivationState? activationState)
+    {
+        return new Window(new MainPage()) { Title = "AI Controls Blazor Sample" };
+    }
+}

samples/AiControlsBlazorSample/Components/MainLayout.razor

@@ -0,0 +1,5 @@
+@inherits LayoutComponentBase
+
+<div class="page">
+    @Body
+</div>

samples/AiControlsBlazorSample/Components/Pages/ChatDemo.razor

@@ -0,0 +1,32 @@
+@page "/"
+@using Microsoft.AspNetCore.Components.AI
+@using Microsoft.Extensions.AI
+@inject IChatClient ChatClient
+
+<ChatPage Agent="@_agent" />
+
+@code {
+    private UIAgent _agent = default!;
+
+    protected override void OnInitialized()
+    {
+        var tools = new List<AITool>
+        {
+            AIFunctionFactory.Create(GetWeather, "GetCurrentWeather", "Get the current weather for a location")
+        };
+
+        var chatOptions = new ChatOptions
+        {
+            Tools = tools
+        };
+
+        _agent = new UIAgent(ChatClient, chatOptions);
+    }
+
+    [System.ComponentModel.Description("Get current weather for a city")]
+    private static string GetWeather(
+        [System.ComponentModel.Description("City name")] string city)
+    {
+        return $"The weather in {city} is sunny, 72°F with light clouds.";
+    }
+}

samples/AiControlsBlazorSample/Components/Routes.razor

@@ -0,0 +1,7 @@
+@using Microsoft.AspNetCore.Components.AI
+
+<Router AppAssembly="@typeof(Routes).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+    </Found>
+</Router>

samples/AiControlsBlazorSample/MainPage.xaml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:AiControlsBlazorSample.Components"
+             x:Class="AiControlsBlazorSample.MainPage">
+    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
+        <BlazorWebView.RootComponents>
+            <RootComponent Selector="#app" ComponentType="{x:Type local:Routes}" />
+        </BlazorWebView.RootComponents>
+    </BlazorWebView>
+</ContentPage>

samples/AiControlsBlazorSample/MainPage.xaml.cs

@@ -0,0 +1,9 @@
+namespace AiControlsBlazorSample;
+
+public partial class MainPage : ContentPage
+{
+    public MainPage()
+    {
+        InitializeComponent();
+    }
+}

samples/AiControlsBlazorSample/MauiProgram.cs

@@ -0,0 +1,119 @@
+using System.ClientModel;
+using System.Reflection;
+using Azure.AI.OpenAI;
+using Microsoft.Extensions.AI;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.Logging;
+
+namespace AiControlsBlazorSample;
+
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
+    {
+        var builder = MauiApp.CreateBuilder();
+        builder
+            .UseMauiApp<App>()
+            .ConfigureFonts(fonts =>
+            {
+                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
+            });
+
+        builder.Services.AddMauiBlazorWebView();
+
+#if DEBUG
+        builder.Services.AddBlazorWebViewDeveloperTools();
+        builder.Logging.AddDebug();
+#endif
+
+        builder.Configuration.AddUserSecrets();
+
+        // Register Azure OpenAI as IChatClient with function invocation middleware
+        builder.AddOpenAIServices();
+
+        return builder.Build();
+    }
+
+    private static void AddUserSecrets(this ConfigurationManager manager)
+    {
+        var assembly = Assembly.GetExecutingAssembly();
+        var resourceNames = assembly.GetManifestResourceNames();
+        var secretsResource = resourceNames.FirstOrDefault(n => n.EndsWith("secrets.json"));
+        if (secretsResource is not null)
+        {
+            using var stream = assembly.GetManifestResourceStream(secretsResource);
+            if (stream is not null)
+                manager.AddJsonStream(stream);
+        }
+    }
+
+    private static MauiAppBuilder AddOpenAIServices(this MauiAppBuilder builder)
+    {
+        var aiSection = builder.Configuration.GetSection("AI");
+        var apiKey = aiSection["ApiKey"];
+        var endpoint = aiSection["Endpoint"];
+        var deploymentName = aiSection["DeploymentName"];
+
+        if (string.IsNullOrEmpty(apiKey) || string.IsNullOrEmpty(endpoint) || string.IsNullOrEmpty(deploymentName))
+        {
+            // Register a no-op client so the app compiles and launches without secrets
+            builder.Services.AddSingleton<IChatClient>(new NoOpChatClient());
+            return builder;
+        }
+
+        var azureClient = new AzureOpenAIClient(
+            new Uri(endpoint),
+            new ApiKeyCredential(apiKey));
+        var chatClient = azureClient.GetChatClient(deploymentName);
+
+        builder.Services.AddSingleton<IChatClient>(sp =>
+        {
+            var lf = sp.GetRequiredService<ILoggerFactory>();
+            return chatClient.AsIChatClient()
+                .AsBuilder()
+                .UseLogging(lf)
+                .UseFunctionInvocation()
+                .Build(sp);
+        });
+
+        return builder;
+    }
+}
+
+/// <summary>
+/// Fallback chat client used when AI services are not configured.
+/// </summary>
+internal sealed class NoOpChatClient : IChatClient
+{
+    public ChatClientMetadata Metadata { get; } = new("NoOp");
+
+    public Task<ChatResponse> GetResponseAsync(
+        IEnumerable<ChatMessage> messages,
+        ChatOptions? options = null,
+        CancellationToken cancellationToken = default)
+    {
+        var response = new ChatResponse(new ChatMessage(ChatRole.Assistant,
+            "AI services are not configured. Please set up user secrets."));
+        return Task.FromResult(response);
+    }
+
+    public IAsyncEnumerable<ChatResponseUpdate> GetStreamingResponseAsync(
+        IEnumerable<ChatMessage> messages,
+        ChatOptions? options = null,
+        CancellationToken cancellationToken = default)
+    {
+        return GetStreamingResponseCore(cancellationToken);
+    }
+
+    private static async IAsyncEnumerable<ChatResponseUpdate> GetStreamingResponseCore(
+        [System.Runtime.CompilerServices.EnumeratorCancellation] CancellationToken cancellationToken = default)
+    {
+        await Task.CompletedTask;
+        yield return new ChatResponseUpdate(ChatRole.Assistant,
+            "AI services are not configured. Please set up user secrets.");
+    }
+
+    public object? GetService(Type serviceType, object? serviceKey = null) => null;
+
+    public void Dispose() { }
+}

samples/AiControlsBlazorSample/Platforms/Android/AndroidManifest.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+	<application android:allowBackup="true" android:supportsRtl="true"></application>
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+	<uses-permission android:name="android.permission.INTERNET" />
+</manifest>

samples/AiControlsBlazorSample/Platforms/Android/MainActivity.cs

@@ -0,0 +1,9 @@
+using Android.App;
+using Android.Content.PM;
+
+namespace AiControlsBlazorSample;
+
+[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, LaunchMode = LaunchMode.SingleTop, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
+public class MainActivity : MauiAppCompatActivity
+{
+}