devexpress/agent-skills/devexpress-winforms-ai-chat

DevExpress WinForms AI Chat Control

AIChatControl (namespace DevExpress.AIIntegration.WinForms.Chat) embeds a ready-made chat UI in a WinForms app. It is a Blazor/WebView2-hosted control: you register an IChatClient (OpenAI, Azure OpenAI, Ollama) once at startup, add the control to a form, and it handles the message list, streaming, Markdown rendering, and history. It is .NET 8+ only (the project must use the Microsoft.NET.Sdk.Razor SDK).

When to Use This Skill

• Add a conversational AI chat panel to a WinForms app (assistant, copilot, support bot).
• Register an AI provider client (OpenAI / Azure OpenAI / Ollama) for the chat control.
• Stream responses, render Markdown safely, show a header, or add prompt suggestions.
• Intercept user messages before they are sent (MessageSending) to inject instructions or answer yourself.
• Save and restore chat history (SaveMessages / LoadMessages).

Before You Start — Ask the Developer

If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's AskUserQuestion tool or GitHub Copilot's askQuestions tool. If no such tool is available, ask the questions directly in the chat response before generating code.

1. Target framework? AIChatControl requires .NET 8+ with the Microsoft.NET.Sdk.Razor SDK. On .NET Framework it is unsupported — see references/getting-started-dotnet-fw.md.
2. Which AI provider? OpenAI, Azure OpenAI, or a local model via Ollama? This decides the provider NuGet package and the IChatClient registration.
3. One provider or several? A single RegisterChatClient, or multiple keyed providers selected via ChatResponseProviderServiceKey?
4. How are credentials supplied? Environment variables, a secrets store, or configuration — never hardcode API keys.
5. Markdown output? If the model returns Markdown, enable ContentFormat = Markdown and sanitize the HTML (MarkdownConvert + HtmlSanitizer).
6. Deployment target? Windows 10 / Server needs the WebView2 runtime distributed; it is built into Windows 11.

Reference Files

Quick Start (Minimal Working Example)

// 1. Install: DevExpress.AIIntegration.WinForms.Chat, DevExpress.Win.Design
//    + one AI provider package, e.g. OpenAI (≥ 2.2.0) + Microsoft.Extensions.AI.OpenAI
// 2. Change .csproj: <Project Sdk="Microsoft.NET.Sdk.Razor">
// 3. Target .NET 8+
 
// Program.cs
using Microsoft.Extensions.AI;
using DevExpress.AIIntegration;
 
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
 
IChatClient chatClient = new OpenAI.OpenAIClient(
    Environment.GetEnvironmentVariable("OPENAI_API_KEY"))
    .GetChatClient("gpt-4o-mini")
    .AsIChatClient();
 
AIExtensionsContainerDesktop.Default.RegisterChatClient(chatClient);
Application.Run(new Form1());

// Form1.cs
using DevExpress.AIIntegration.WinForms.Chat;
using DevExpress.XtraEditors;
 
public partial class Form1 : XtraForm
{
    public Form1()
    {
        InitializeComponent();
        var chat = new AIChatControl { Dock = DockStyle.Fill };
        Controls.Add(chat);
    }
}

If you declare `AIChatControl` in `*.Designer.cs`, wrap its setup in `BeginInit`/`EndInit`. AIChatControl implements ISupportInitialize, so a correct *.Designer.cs must surround its configuration in InitializeComponent() with ((System.ComponentModel.ISupportInitialize)(this.aiChatControl1)).BeginInit(); … EndInit(); — omitting it is bad practice. Register the IChatClient and set ContentFormat/templates in code.

Decision Guide

Which NuGet packages do I need?

How do I register the AI client?

• Single provider → AIExtensionsContainerDesktop.Default.RegisterChatClient(chatClient)
• Multiple providers → Register keyed IChatResponseProvider (and IChatClient) via services.AddKeyedScoped<IChatResponseProvider>(key, ...) + services.AddDevExpressAIDesktop(), then set AIChatControl.ChatResponseProviderServiceKey

Common Patterns

Streaming responses

aiChatControl1.UseStreaming = DevExpress.Utils.DefaultBoolean.True;

Markdown rendering (with sanitization)

// Install: Markdig, HtmlSanitizer NuGet packages
using DevExpress.AIIntegration.Blazor.Chat;
using Ganss.Xss;
using Markdig;
 
aiChatControl1.ContentFormat = ResponseContentFormat.Markdown;
aiChatControl1.MarkdownConvert += (s, e) => {
    var html     = Markdown.ToHtml(e.MarkdownText);
    var safeHtml = new HtmlSanitizer().Sanitize(html);
    e.HtmlText   = (Microsoft.AspNetCore.Components.MarkupString)safeHtml;
};

Show header with title

aiChatControl1.ShowHeader = DevExpress.Utils.DefaultBoolean.True;
aiChatControl1.HeaderText = "AI Assistant";

Intercept messages manually

Handle MessageSending to inspect or modify a user message before it is sent. Append extra messages with e.Chat.AppendMessageAsync(...), and set e.Cancel = true to block the default AI call when you want to handle the request yourself.

using DevExpress.AIIntegration.Blazor.Chat.WebView;
using Microsoft.Extensions.AI;
 
aiChatControl1.MessageSending += async (s, e) => {
    // Add a system instruction before the user message is sent
    await e.Chat.AppendMessageAsync("Translate text to Spanish", ChatRole.System);
 
    // To bypass the default AI service and answer yourself:
    // e.Cancel = true;
    // await e.Chat.AppendMessageAsync(await MyService.AskAsync(...), ChatRole.Assistant);
};

Save and restore chat history

using DevExpress.AIIntegration.Blazor.Chat;
 
List<BlazorChatMessage> saved = (List<BlazorChatMessage>)aiChatControl1.SaveMessages();
// ... later ...
aiChatControl1.LoadMessages(saved);

Customize rendering with templates (Razor)

AIChatControl renders through Blazor, so its templates are Razor RenderFragments assigned via Set*Template methods (not designer properties). The main ones:

MessageTemplate takes priority over MessageContentTemplate when both are set. Author the fragment inline (via RenderTreeBuilder) or as a .razor component:

using DevExpress.AIIntegration.Blazor.Chat;
 
aiChatControl1.SetMessageTemplate(message => builder => {
    builder.OpenElement(0, "div");
    builder.AddAttribute(1, "class", message.Role == ChatMessageRole.User ? "user-msg" : "ai-msg");
    builder.AddContent(2, message.Content);
    builder.CloseElement();
});

Troubleshooting

Constraints & Rules

Follow these rules in every interaction:

1. Verify builds: after code changes, run dotnet build and fix every error before you claim success. If the build cannot be executed in this environment, say so explicitly and report the change as unverified — never report success on an unverified build.
2. Do not mix DevExpress package versions: reference the control through the DevExpress.AIIntegration.WinForms.Chat NuGet package — never assembly DLLs by path — and keep every DevExpress package in the project on the same version.
3. .NET 8+ and the Razor SDK are mandatory: the project must target .NET 8+ (Windows) and use <Project Sdk="Microsoft.NET.Sdk.Razor">. The control is not available on .NET Framework. AIChatControl was introduced in DevExpress v26.1 — it does not exist in earlier versions.
4. Register an `IChatClient` before `Application.Run`: call AIExtensionsContainerDesktop.Default.RegisterChatClient(...) (or register keyed providers) at startup, or the control reports "No registered service of type IChatClient".
5. Never hardcode API keys: read them from environment variables / a secrets store, not source.
6. Sanitize Markdown/HTML: when handling MarkdownConvert, run the generated HTML through HtmlSanitizer before assigning e.HtmlText — AI output is untrusted and can carry XSS.
7. WebView2 runtime is required at runtime: distribute it for Windows 10 / Server (built into Windows 11).
8. Wrap the control in `BeginInit`/`EndInit` in the designer file: if AIChatControl is declared in *.Designer.cs, InitializeComponent() must surround its setup with ((System.ComponentModel.ISupportInitialize)(aiChatControl1)).BeginInit() … EndInit(). It implements ISupportInitialize; omitting these is bad practice.

Using DevExpress Documentation MCP

Check your available tools for devexpress_docs_search / devexpress_docs_get_content — installing this skill as a full plugin registers the dxdocs MCP server automatically, but skills copied in directly may not have it connected, and the tool name may carry a host-specific prefix. If present (match on any tool whose name contains devexpress_docs_search/devexpress_docs_get_content), use it to verify API details before writing code; if not, rely on this skill's own reference files.

• Search: devexpress_docs_search(technologies=["WindowsForms"], question="<keywords>")
• Fetch: devexpress_docs_get_content(url="<url-from-search>")

Use MCP for: multi-client / keyed provider registration, the Assistants API ("chat with your own data"), file uploads and prompt suggestions, the full AIChatControl property/event surface, and provider-specific client setup beyond OpenAI/Azure/Ollama.