AI Chat Control

• Jun 05, 2026
• 15 minutes to read

Note

The DevExpress AI Chat Control (AIChatControl) can only be used in WPF applications that target .NET 8+ and newer frameworks.

The AI Chat Control allows you to embed an interactive, Copilot-inspired chat interface in your WPF application. The control uses BlazorWebView to host the DevExpress Blazor AI Chat component (DxAIChat).

Run Demo: AI Chat Control View Example: AI Chat

Getting Started

To use the AIChatControl:

Install DevExpress.AIIntegration.Wpf.Chat.

Refer to the following help topics for more information:

• How to Install DevExpress Products
• Install Packages from NuGet.org: Visual Studio, VS Code, and JetBrains Rider

Change Project SDK

Update the project SDK to Microsoft.NET.Sdk.Razor:

.csproj

<Project Sdk="Microsoft.NET.Sdk.Razor">

Register AI Client

See the following help topic for information on required NuGet packages and system requirements: Register an AI Client.

The following code snippet registers an Azure OpenAI client at application startup within the AIExtensionsContainerDesktop container:

C#

using Azure.AI.OpenAI;
using DevExpress.AIIntegration;
using DevExpress.Xpf.Core;
using Microsoft.Extensions.AI;
using System;
using System.Windows;

namespace AIAssistantApp {
    public partial class App : Application {
        static App() {
            CompatibilitySettings.UseLightweightThemes = true;
        }

        protected override void OnStartup(StartupEventArgs e) {
            base.OnStartup(e);
            ApplicationThemeHelper.ApplicationThemeName = "Win11Light";

            // For example, ModelId = "gpt-4o-mini"
            IChatClient azureChatClient = new Azure.AI.OpenAI.AzureOpenAIClient(new Uri(AzureOpenAIEndpoint),
                new System.ClientModel.ApiKeyCredential(AzureOpenAIKey)).GetChatClient(ModelId).AsIChatClient();
            AIExtensionsContainerDesktop.Default.RegisterChatClient(azureChatClient);
        }
    }
}

VB.NET

Imports Azure.AI.OpenAI
Imports DevExpress.AIIntegration
Imports DevExpress.Xpf.Core
Imports Microsoft.Extensions.AI
Imports System
Imports System.Windows

Namespace AIAssistantApp
    Partial Public Class App
        Inherits Application

        Shared Sub New()
            CompatibilitySettings.UseLightweightThemes = True
        End Sub

        Protected Overrides Sub OnStartup(ByVal e As StartupEventArgs)
            MyBase.OnStartup(e)
            ApplicationThemeHelper.ApplicationThemeName = "Win11Light"

            ' For example, ModelId = "gpt-4o-mini"
            Dim azureChatClient As IChatClient = New AzureOpenAIClient(New Uri(AzureOpenAIEndpoint), 
                New System.ClientModel.ApiKeyCredential(AzureOpenAIKey)).GetChatClient(ModelId).AsIChatClient()
            AIExtensionsContainerDesktop.Default.RegisterChatClient(azureChatClient)
        End Sub
    End Class
End Namespace

Create AI Chat Control

Note

The AI Chat Control does not support design-time rendering.

The following code snippet creates the AIChatControl with default settings:

XAML

<dx:ThemedWindow 
    x:Class="DXApplication3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxaichat="http://schemas.devexpress.com/winfx/2008/xaml/aichat"
    Title="MainWindow" Height="800" Width="1000">
    <Grid>
        <dxaichat:AIChatControl
            x:Name="aiChatControl"
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            Margin="10">
        </dxaichat:AIChatControl>
    </Grid>
</dx:ThemedWindow>

CLI Project Templates

Use AI Chat Application and AI Chat (RAG) Application CLI project templates to create a chat application that integrates the AI Chat Control. Both templates support .NET 8 / .NET 9 / .NET10 and integrate the DevExpress MCP Server for DevExpress-specific guidance.

AI Chat Application

The AI Chat Application template creates a WPF chat app that integrates the AI Chat Control.

dx.wpf.aichat

Parameter: --ai-provider | Values: azureopenai, openai, ollama

Creates a WPF chat app that integrates the DevExpress AI Chat Control. You can optionally enable DevExpress-specific guidance by adding an mcp.json configuration file to integrate the DevExpress MCP Server.

Supported AI providers:

• Azure OpenAI
• OpenAI
• Ollama

AI Chat (RAG) Application

The AI Chat (RAG) Application template creates a desktop WPF application with the AI Chat Control and built-in Retrieval-Augmented Generation (RAG) for document-grounded conversations.

dx.wpf.aichatrag

Parameter: --ai-provider | Values: azureopenai, openai, ollama

Parameter: --vectorstore | Values: sqlite, inmemory

Creates a desktop WPF application with the DevExpress AI Chat Control and built-in Retrieval-Augmented Generation (RAG) for document-grounded conversations:

• Uses local document data for context-aware answers.
• Scans user Documents folders and indexes PDF, DOCX, TXT, RTF, and HTML files.
• Extracts, embeds, and semantically searches document text.
• Stores vectors in In-Memory (rebuilds each run) or SQLite (persistent database).
• Merges retrieved content with user prompts to improve accuracy.
• Optionally integrates the DevExpress MCP Server for DevExpress-specific guidance.

Streaming

The AI Chat Control can display responses from the AI assistant as they are generated in a natural, conversational flow (rather than waiting for the entire message to complete before showing it to the user). Enable the UseStreaming setting to activate this feature:

XAML

<dxaichat:AIChatControl
    x:Name="aiChatControl"
    UseStreaming="True"
    HorizontalAlignment="Stretch" 
    VerticalAlignment="Stretch" 
    Margin="10">
</dxaichat:AIChatControl>

Play the following animation to see the result:

Markdown Message Rendering

To enable Markdown message rendering:

1. Set the ContentFormat property to Markdown to receive responses as Markdown.
2. Handle the MarkdownConvert event to convert markdown text into HTML and make responses more readable, structured, and visually appealing.

Warning

Always sanitize AI-generated content before rendering it in the UI.

The following example enables Markdown message rendering. The example uses the Markdig Markdown processing library to convert Markdown text into HTML.

XAML

<dxaichat:AIChatControl
    x:Name="aiChatControl"
    UseStreaming="True"
    ContentFormat="Markdown"
    MarkdownConvert="AiChatControl_MarkdownConvert"
    HorizontalAlignment="Stretch" 
    VerticalAlignment="Stretch" 
    Margin="10">
</dxaichat:AIChatControl>

C#

using DevExpress.Xpf.Core;
using DevExpress.AIIntegration.Blazor.Chat.WebView;
using Microsoft.AspNetCore.Components;
using Ganss.Xss;
using Markdig;

namespace DXApplication {
    var sanitizer;

    public partial class MainWindow : ThemedWindow {
        public MainWindow() {
            InitializeComponent();
            sanitizer = new HtmlSanitizer();
        }

        void AiChatControl_MarkdownConvert(object sender, AIChatControlMarkdownConvertEventArgs e) {
            // Convert Markdown to HTML.
            string html = Markdown.ToHtml(e.MarkdownText);

            // WARNING: The AI agent's content may be untrusted. 
            // Developers must sanitize all HTML before rendering to prevent XSS attacks.
            string safeHtml = sanitizer.Sanitize(html);

            // Assign sanitized HTML for rendering.
            e.HtmlText = (MarkupString)safeHtml;
        }
    }
}

The following screenshot demonstrates the result:

File Attachments

Users can now attach files directly to their chat messages. AI analyzes document content (such as text files, PDFs, images) and delivers more context-aware responses.

Run Demo: File Attachments — AI Chat

To activate file upload:

1. Enable the FileUploadEnabled property to allow users to attach files.
2. Configure additional settings based on your project requirements (the maximum file size, allowed file types/extensions, the maximum number of files that users can attach to a message).

XAML

xmlns:dxaichat="http://schemas.devexpress.com/winfx/2008/xaml/aichat"
xmlns:chat="clr-namespace:DevExpress.AIIntegration.Blazor.Chat;assembly=DevExpress.AIIntegration.Blazor.Chat.v25.1"
xmlns:system="clr-namespace:System;assembly=mscorlib"

<dxaichat:AIChatControl
    x:Name="aiChatControl"
    FileUploadEnabled="True"
    UseStreaming="True"
    HorizontalAlignment="Stretch" 
    VerticalAlignment="Stretch" 
    Margin="10">
    <dxaichat:AIChatControl.FileUploadSettings>
        <chat:DxAIChatFileUploadSettings MaxFileSize="5000000" MaxFileCount="5">
            <chat:DxAIChatFileUploadSettings.AllowedFileExtensions>
                <system:String>.png</system:String>
                <system:String>.pdf</system:String>
                <system:String>.txt</system:String>
            </chat:DxAIChatFileUploadSettings.AllowedFileExtensions>
            <chat:DxAIChatFileUploadSettings.FileTypeFilter>
                <system:String>image/png</system:String>
                <system:String>application/pdf</system:String>
                <system:String>text/plain</system:String>
            </chat:DxAIChatFileUploadSettings.FileTypeFilter>
        </chat:DxAIChatFileUploadSettings>
    </dxaichat:AIChatControl.FileUploadSettings>
</dxaichat:AIChatControl>

Tip

See the following article for more information on MIME types (FileTypeFilter): Common Media Types.

Prompt Suggestions

To help users get started or explore new possibilities, the AI Chat Control can display prompt suggestions.

Run Demo: Prompt Suggestions — AI Chat

Use the SetPromptSuggestions method to supply intelligent suggestions:

XAML

<dxaichat:AIChatControl>
    <dxaichat:AIChatControl.PromptSuggestions>
        <chat:DxAIChatPromptSuggestion
            Title="Birthday Wish"
            Text="A warm and cheerful birthday greeting message."
            PromptMessage="Write a heartfelt birthday message for a close friend." />
        <chat:DxAIChatPromptSuggestion
            Title="Thank You Note"
            Text="A polite thank you note to express gratitude."
            PromptMessage="Compose a short thank you note to a colleague who helped with a project." />
    </dxaichat:AIChatControl.PromptSuggestions>
</dxaichat:AIChatControl>

Handle Chat Messages

To manually process messages sent to an AI service, handle the MessageSending event. For example, you can manually call the AI client or service of choice, and return its responses to the chat. The following example adds responses to user questions:

XAML

<dxaichat:AIChatControl x:Name="aiChatControl"
                MessageSending="AiChatControl_MessageSending"
                HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" 
                Margin="10">
</dxaichat:AIChatControl>

C#

async void AiChatControl_MessageSending(object sender, AIChatControlMessageSendingEventArgs e) {
    e.Cancel = true; 
    await e.Chat.SendMessageAsync($"Processed: {e.Content}", ChatRole.User);
}

Note

Set the e.Cancel event parameter to true to block automatic message delivery and use the AIChatControl.SendMessageAsync method to send the message to the AI service manually.

Conversation History

Stateless and Stateful Chat Services

The AI Chat Control supports both stateless and stateful AI services. This distinction affects how conversation history is managed and how the control behaves when users clear chat content.

Stateless Services

Stateless services do not retain conversation context between requests. To preserve context, the AI Chat Control sends the full message history with each user request. In this mode:

• The service does not store conversation state.
• The AI Chat Control maintains conversation history.
• Clearing chat content removes all context.

Stateful Services

Stateful services maintain conversation history on the server. These services return a ConversationId value that identifies the current conversation session. When the AI Chat Control detects ConversationId, it automatically switches to stateful mode behavior:

• The AI Chat Control stores the conversation identifier.
• Subsequent requests send only new messages instead of the entire chat history.
• The AI service reconstructs the conversation context automatically.

Clear Chat Behavior for Stateful Services

For stateful services, clearing messages in the user interface does not automatically remove server-side conversation state. To ensure that the Clear button starts a completely new conversation, the AI Chat Control reinitializes IChatResponseProvider.

Register IChatResponseProvider as a transient dependency. This ensures that the AI Chat Control creates a new provider instance when chat content is cleared.

serviceCollection.AddTransient<IChatResponseProvider>(
    new AzureOpenAIClient("endpoint", "apiKey")
    .GetResponsesClient()
    .AsIChatClient("modelId")
    .AsIChatResponseProvider());

Append Message in Chat History

Call the AppendMessageAsync method to add a message to chat history without sending it to the AI service. Use this method in the MessageSending event to append a system prompt or supplemental context.

The following code snippet adds a system instruction to the chat:

C#

async void AiChatControl_MessageSending(object sender,  AIChatControlMessageSendingEventArgs e)
{
    await e.Chat.AppendMessageAsync("Translate message to Spanish", ChatRole.System);
}

Save and Load Chat History

Use the following methods to manage chat history:

• SaveMessages – Returns an IEnumerable<ChatMessage> collection of messages.
• LoadMessages – Loads messages from the specified IEnumerable<ChatMessage> collection to the AI Chat Control and refreshes the control.

The following example saves/loads chat history when the user clicks the Save/Load button:

C#

public partial class MainWindow : ThemedWindow {
    List<BlazorChatMessage> chatHistory;

    public MainWindow() {
        InitializeComponent();
    }

    void ButtonSave_Click(object sender, EventArgs e) {
        chatHistory = (List<BlazorChatMessage>)aiChatControl.SaveMessages();
    }

    void ButtonLoad_Click(object sender, EventArgs e) {
        if(chatHistory != null)
            aiChatControl.LoadMessages(chatHistory);
    }
}

Display and Hide the Loading Indicator

Use the following methods to display a loading indicator while the application performs a long-running operation, such as preparing additional context before sending a request to the AI service:

• ShowLoadingIndicatorAsync(string) – Displays the loading indicator with an optional caption.
• HideLoadingIndicatorAsync() – Hides the loading indicator.

The following example displays the indicator with a custom caption when the user sends a message and hides it after the operation completes:

C#

async void AiChatControl_MessageSending(object sender, AIChatControlMessageSendingEventArgs e)
{
    await aiChatControl.ShowLoadingIndicatorAsync("Working on it...");
    // Perform a long-running operation (load data, call an external API, etc.).
    await PrepareContextAsync();
    await aiChatControl.HideLoadingIndicatorAsync();
}

Customize Chat UI and Appearance

The AIChatControl supports appearance customization through Razor-based templates. You can customize chat messages, errors, the empty message area, and text displayed when the chat has no message history.

Message Templates

Use the following properties to customize the chat message container (including paddings and inner content alignment) or the message content:

• AIChatControl.MessageTemplate
• AIChatControl.MessageContentTemplate

Note

• The AIChatControl.MessageTemplate property takes priority over the AIChatControl.MessageContentTemplate property if both templates are specified.
• The MessageContentTemplate does not support messages when ContentFormat is set to Markdown. When using MessageContentTemplate, implement markdown rendering logic within your custom template.

The following example displays a copy icon within chat messages. When a user clicks the icon, the message text is copied to the Clipboard, and a confirmation toast notification is displayed.

C#

using DevExpress.AIIntegration.Blazor.Chat;
using DevExpress.Mvvm.UI;
using Microsoft.AspNetCore.Components;
using System.Windows;

namespace DXChatApplication {
    public partial class MainWindow {
        RenderFragment<BlazorChatMessage> MyMessageTemplate;
        readonly NotificationService notificationService;

        public MainWindow() {
            InitializeComponent();

            // Configure DevExpress NotificationService.
            notificationService = new NotificationService() {
                ApplicationId = "DXChatApplication",
                ApplicationName = "DXChatApplication",
                PredefinedNotificationTemplate = NotificationTemplate.LongText
            };

            MyMessageTemplate = message => builder => {
                builder.OpenComponent<Message>(0);
                builder.AddAttribute(1, "message", message);
                builder.AddAttribute(2, "OnButtonClick", EventCallback.Factory.Create<BlazorChatMessage>(this, CustomButtonClick));
                builder.CloseComponent();
            };

            aiChatControl.MessageTemplate = MyMessageTemplate;
        }

        void CustomButtonClick(BlazorChatMessage message) {
            Dispatcher.Invoke(() => {
                try { Clipboard.SetText(message.Content ?? string.Empty); } catch { }
                var notification = notificationService.CreatePredefinedNotification("Message Copied to Clipboard", message.Content, null);
                _ = notification.ShowAsync();
            });
        }
    }
}

The Message.razor file:

@using Microsoft.AspNetCore.Components.Web
@using DevExpress.AIIntegration.Blazor.Chat

<style>
    .demo-chat-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        flex-direction: row;
    }

    .copy-icon {
        cursor: pointer;
        font-size: 16px;
        color: #555;
        transition: color 0.2s ease-in-out;
    }
</style>

<div class="@GetMessageClasses(message)">
    @if (message.Typing)
    {
        <span>Loading...</span>
    }
    else
    {
        <div class="demo-chat-content">
            <span>@message.Content</span>
            <span class="copy-icon" title="Copy" @onclick="OnButtonClicked">📋</span>
        </div>
    }
</div>

@code {
    [Parameter]
    public BlazorChatMessage message { get; set; }

    [Parameter]
    public EventCallback<BlazorChatMessage> OnButtonClick { get; set; }

    string GetMessageClasses(BlazorChatMessage message) {
        switch (message.Role) {
            case ChatMessageRole.Assistant:
                return "dxbl-chatui-message dxbl-chatui-message-assistant";
            case ChatMessageRole.User:
                return "dxbl-chatui-message dxbl-chatui-message-user";
            case ChatMessageRole.Error:
                return "dxbl-chatui-message dxbl-chatui-message-error";
            default:
                return "dxbl-chatui-message";
        }
    }

    async Task OnButtonClicked() {
        if (OnButtonClick.HasDelegate)
            await OnButtonClick.InvokeAsync(message);
    }
}

Empty Area Text and Template

You can modify empty area text or template displayed when a chat has yet to start.

Use one of the following properties:

• EmptyStateText - Specifies the empty area message.
• EmptyStateTemplate - Specifies a template (RenderFragment) to customize the empty area.

Note

If both EmptyStateText and EmptyStateTemplate properties are set, the chat control uses the EmptyStateTemplate and ignores the EmptyStateText.

Customize Empty Area Text

XAML

<dxaichat:AIChatControl x:Name="aiChatControl"
                EmptyStateText="AI Assistant is ready to answer your questions."
                HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" 
                Margin="10">
</dxaichat:AIChatControl>

Customize Empty Area Appearance

C#

using Microsoft.AspNetCore.Components;

public MainWindow() {
    InitializeComponent();
    aiChatControl.EmptyStateTemplate = MyEmptyStateTemplate;
}

RenderFragment MyEmptyStateTemplate = builder => {
    builder.OpenComponent<EmptyArea>(0);
    builder.CloseComponent();
};

The EmptyArea.razor file:

<style>
    .emptyarea-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #666;
        font-family: sans-serif;
        text-align: center;
        padding: 40px;
    }
    .emptyarea-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }
    .emptyarea-title {
        font-size: 18px;
        font-weight: 500;
    }
    .emptyarea-description {
        font-size: 14px;
        margin-top: 8px;
    }
</style>

<div class="emptyarea-box">
    <div class="emptyarea-icon">
        💬
    </div>
    <div class="emptyarea-title">
        No messages yet
    </div>
    <div class="emptyarea-description">
        Start the conversation by sending a message.
    </div>
</div>

User and Assistant Message Background

Use the following properties to specify the background color for user and assistant messages:

• AIChatControl.UserMessageBackground – specifies the background color for user messages.
• AIChatControl.AssistantMessageBackground – specifies the background color for assistant messages.

XAML

<dxaichat:AIChatControl x:Name="aiChatControl"
                        UserMessageBackground="#FF7AB8FF"
                        AssistantMessageBackground="#FFB8E6C1">
</dxaichat:AIChatControl>

Error Message Background

Use the AIChatControl.ErrorMessageBackground property to specify the background color of error messages:

XAML

<dxaichat:AIChatControl x:Name="aiChatControl"
                ErrorMessageBackground="LightCoral"
                Margin="10">
</dxaichat:AIChatControl>

Title and Clear Chat Button

The AIChatControl can display a header. This header contains a customizable chat title and the Clear Chat button (removes all messages from conversation history, except for system messages).

Use the AIChatControl.ShowHeader option to display the chat header. The AIChatControl.HeaderText property specifies the chat title.

Input Area Placeholder

Use the InputBoxNullText property to display the prompt text in the AI Chat input box when it is empty.

If there is no property specified, the component uses the AIChat_InputPlaceholder localization string as the prompt text.

XAML

<dxaichat:AIChatControl x:Name="aiChatControl"
                InputBoxNullText="Ask me something...">
</dxaichat:AIChatControl>

Input Area Background

Use the AIChatControl.InputBackground property to specify the background color of the input area (the prompt input box and the surrounding submit area):

XAML

<dxaichat:AIChatControl x:Name="aiChatControl"
                        InputBackground="#FFFFF0B3">
</dxaichat:AIChatControl>

Resize Input Area

Enable the AIChatControl.AllowResizeInput option to allow users to resize the input area. Users can drag the top edge up to enlarge the input area or down to display a more detailed chat history.

Change Border Appearance

Use BorderBrush and BorderThickness properties to customize chat control border appearance. To round chat control corners, specify the CornerRadius property.

XAML

<dxaichat:AIChatControl x:Name="aiChatControl"
                BorderBrush="ForestGreen"
                BorderThickness="5"
                CornerRadius="20">
</dxaichat:AIChatControl>

Resources

The AIChatControl can access external or dynamically generated data through resources. A resource is an instance of the AIChatResource class that supplies text or binary content to the AI model at request time.

Resources extend chat context with additional input (for example, local documents, logs, or images). The AI model uses this data to generate more accurate and context-aware responses.

After you assign resources, the AIChatControl displays the “Attach Context” (+) button. Users can select one or more resources to include in the chat request.

Run Demo: Resources — AI Chat

See the following help topic for additional information: Chat Resources.

Tool Calling

AI Tool Calling API integrates application logic with natural language interaction. It allows the AI to analyze requests, select appropriate tools, resolve target instances, and invoke application methods at runtime in response to user prompts. Developers expose functionality as AI tools by annotating methods with metadata attributes. Each tool describes its purpose, input parameters, and (optionally) the target object on which it operates.

Run Demo: AI Tool Calling

See the following help topics for additional information:

• AI Tool Calling
• AIToolsBehavior

Create an Assistant That Chats Using Your Own Data

When integrating the AI Chat Control with an AI Assistant API (for example, the OpenAI Responses API or Azure AI Projects), you can configure the control to work with external data sources (for example, text files or PDF documents).

Refer to the following help topic for additional information: Chat with Your Own Data.

Warning

OpenAI Assistants API will be deprecated in August 2026.

Manage Multiple Chat Client Services

The WPF AIChatControl supports multiple AI services in a single application that enable you to:

• Run several independent chat UIs side by side powered by different AI services.
• Use one chat UI and dynamically switch between AI services or AI agents.

See the following help topic for additional information: Manage Multiple Chat Clients.

Troubleshooting

Deploy to Windows Server

When deploying WPF applications with the AI Chat Control to Windows Server or earlier versions of Windows, you may encounter the following error:

Warning

Microsoft.Web.WebView2.Core.WebView2RuntimeNotFoundException: “Could not find a compatible WebView2 Runtime installation to host WebViews.”

The WPF AI Chat Control leverages BlazorWebView to reuse the DevExpress Blazor DxAIChat component. This integration requires the WebView2 runtime to be installed on the target machine.

Windows 11 includes WebView2. Earlier versions of Windows and Windows Server may not have it preinstalled. To ensure compatibility, see Distribute your app and the WebView2 Runtime for information on how to distribute the WebView2 Runtime with your WPF application on operating systems other than Windows 11.

Airspace Issue in .NET 9 and Earlier: WPF Controls are Overlapped by the AI Chat Control

In .NET 9 and earlier, WPF popups, dialogs, flyouts, tooltips, menus, dock panels, and other overlay UI elements are always invisible when displayed over the AI Chat Control.

This rendering issue occurs because the AI Chat Control hosts the DevExpress Blazor DxAIChat component in BlazorWebView, which in turn relies on an HWND-hosted WebView2 control. The resulting native window appears above the WPF visual tree and overlaps any WPF content rendered in the same area.

Solution: Upgrade to .NET 10

The Airspace issue no longer occurs in .NET 10 because Microsoft.AspNetCore.Components.WebView.Wpf uses WebView2CompositionControl instead of the HWND-hosted WebView2 control. This composition-based control integrates properly with the WPF visual tree and allows overlapping WPF UI elements to be displayed on top of the AI Chat Control.

To avoid the Airspace issue:

1. Update the target framework to .NET 10.
2. Update the Microsoft.AspNetCore.Components.WebView.Wpf package to 10.0.x or newer.

.csproj

<PropertyGroup>
    <TargetFramework>net10.0-windows</TargetFramework>
</PropertyGroup>

<ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Wpf" Version="10.0.*" />
</ItemGroup>

Refer to the following help topics for additional information:

• WebView2CompositionControl Specification
• WebView2CompositionControl API Reference
• WPF and HwndHost Descendant Interoperation Limitations