Chat: add Azure OpenAI Integration topic

concepts/05 UI Components/Chat/15 Integrate with AI Service/00 Integrate with AI Service.md

@@ -1,11 +1,5 @@
-You can integrate DevExtreme Chat with various AI services, such as [OpenAI](https://platform.openai.com/docs/overview), [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/), [Google Dialogflow](https://cloud.google.com/dialogflow/docs), and [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/index-bf-sdk).
+You can integrate DevExtreme Chat with various AI services:
 
-[note]
-
-Review this demo for Azure OpenAI integration:
-
-#include btn-open-demo with {
-    href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Chat/AIAndChatbotIntegration/"
-}
-
-[/note]
+- [OpenAI](/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service/#OpenAI)
+- [Azure OpenAI](/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service/#Azure_OpenAI)
+- [Google Dialogflow](/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service/#Google_Dialogflow)

concepts/05 UI Components/Chat/15 Integrate with AI Service/07 Azure OpenAI/00 Azure OpenAI.md

@@ -0,0 +1 @@
+[Azure OpenAI](https://azure.microsoft.com/en-us/products/ai-foundry/models/openai/) allows you to run OpenAI models in Microsoft Azure cloud services.

concepts/05 UI Components/Chat/15 Integrate with AI Service/07 Azure OpenAI/05 Client Configuration.md

@@ -0,0 +1,26 @@
+Configure a Chat to send user messages to your backend endpoint and render responses.
+
+[important] Azure OpenAI credentials must remain on the server. Do not call Azure OpenAI directly from client code.
+
+Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) to send a message to your API and push the response to the data store:
+
+    <!-- tab: TypeScript -->
+    async function onMessageEntered(e) {
+        const userMessage = e.message;
+        dataSource.store().push([{ type: "insert", data: userMessage }]);
+
+        const response = await fetch("http://localhost:5005/api/Chat/GetAIResponse", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(userMessage)
+        });
+
+        const assistantMessage = await response.json();
+        dataSource.store().push([{ type: "insert", data: assistantMessage }]);
+    }
+
+Review this demo for Chat UI integration. The demo uses a DevExpress-hosted API:
+
+#include btn-open-demo with {
+    href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Chat/AIAndChatbotIntegration/"
+}

concepts/05 UI Components/Chat/15 Integrate with AI Service/07 Azure OpenAI/10 ASP.NET Web API Backend/00 ASP.NET Web API Backend.md

@@ -0,0 +1,17 @@
+This section describes the server layer for Azure OpenAI integration.
+
+The ASP.NET Web API backend performs the following actions:
+
+- Stores Azure credentials in server configuration.
+- Sends chat completion requests to Azure OpenAI.
+- Exposes chat endpoints for the DevExtreme Chat client.
+
+Core endpoints:
+
+- `POST /api/Chat/GetAIResponse`
+- `GET /api/Chat/GetUserMessages`
+
+The following implementations are available:
+
+- [IChatClient](/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service/#Azure_OpenAI/ASPNET_Web_API_Backend/IChatClient)
+- [IChatClient with Microsoft Agent Framework](/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service/#Azure_OpenAI/ASPNET_Web_API_Backend/IChatClient_with_Microsoft_Agent_Framework)

concepts/05 UI Components/Chat/15 Integrate with AI Service/07 Azure OpenAI/10 ASP.NET Web API Backend/05 IChatClient.md

@@ -0,0 +1,41 @@
+This implementation uses [Microsoft.Extensions.AI](https://learn.microsoft.com/en-us/dotnet/ai/microsoft-extensions-ai) and a single `IChatClient` instance.
+
+#include btn-open-github with {
+    href: "https://github.com/DevExpress-Examples/devextreme-chat-ai-integration-azure-openai-dotnet"
+}
+
+**Prerequisites**:
+
+- [.NET 9 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/9.0)
+- Azure OpenAI endpoint, API key, and deployment name
+
+Register validated options and `IChatClient` in `Program.cs`:
+
+    <!-- tab: Program.cs -->
+    builder.Services
+        .AddOptions<AzureOpenAIOptions>()
+        .Bind(builder.Configuration.GetSection(AzureOpenAIOptions.SectionName))
+        .Validate(o => !string.IsNullOrWhiteSpace(o.Endpoint), "Endpoint missing")
+        .Validate(o => !string.IsNullOrWhiteSpace(o.ApiKey), "ApiKey missing")
+        .Validate(o => !string.IsNullOrWhiteSpace(o.ModelName), "ModelName missing")
+        .ValidateOnStart();
+
+    builder.Services.AddSingleton<IChatClient>(sp => {
+        var opts = sp.GetRequiredService<IOptions<AzureOpenAIOptions>>().Value;
+        var client = new AzureOpenAIClient(
+            new Uri(opts.Endpoint),
+            new System.ClientModel.ApiKeyCredential(opts.ApiKey));
+        return client.GetChatClient(opts.ModelName).AsIChatClient();
+    });
+
+Call `IChatClient` in the controller:
+
+    <!-- tab: ChatController.cs -->
+    [HttpPost("GetAIResponse")]
+    public async Task<ClientChatMessage> GetAIResponse([FromBody] ClientChatMessage userMessage) {
+        var chatMessages = BuildChatHistory(userMessage);
+        var completion = await _chatClient.CompleteAsync(chatMessages);
+        return ToAssistantMessage(completion);
+    }
+
+Run the server with `dotnet run`. Default URLs are `http://localhost:5005` and `https://localhost:5006`.

concepts/05 UI Components/Chat/15 Integrate with AI Service/07 Azure OpenAI/10 ASP.NET Web API Backend/10 IChatClient with Microsoft Agent Framework.md

@@ -0,0 +1,84 @@
+This topic uses [Microsoft Agent Framework](https://learn.microsoft.com/en-us/agent-framework/overview/?pivots=programming-language-csharp) with an Azure OpenAI-backed `IChatClient`.
+
+#include btn-open-github with {
+    href: "https://github.com/DevExpress-Examples/devextreme-chat-ai-integration-ms-agent-framework"
+}
+
+Compared to the base `IChatClient` setup, this implementation adds:
+
+- Multiple specialized agents (`VisionAgent`, `SupportAgent`, `Editor`).
+- A sequential workflow (`VirtualAssistant`) that orchestrates agent execution.
+- [MCP-based documentation tools](/Documentation/Guide/AI_Features/DevExpress_MCP_Server_Configuration/) for the support agent.
+- Multipart request handling for text and file attachments.
+
+The application uses one shared `IChatClient` instance, then composes agents and workflow on top of it:
+
+    <!-- tab: Program.cs -->
+    using Azure.AI.OpenAI;
+    using Microsoft.Agents.AI;
+    using Microsoft.Agents.AI.Hosting;
+    using Microsoft.Agents.AI.Workflows;
+    using Microsoft.Extensions.AI;
+    using Microsoft.Extensions.Options;
+    using System.ClientModel;
+
+    builder.Services.AddSingleton<IChatClient>(sp => {
+        var opts = sp.GetRequiredService<IOptions<AzureOpenAIOptions>>().Value;
+        var client = new AzureOpenAIClient(
+            new Uri(opts.Endpoint),
+            new ApiKeyCredential(opts.ApiKey));
+        return client.GetChatClient(opts.ModelName).AsIChatClient();
+    });
+
+    builder.AddAIAgent("VisionAgent", (sp, key) => {
+        var chatClient = sp.GetRequiredService<IChatClient>();
+        return new ChatClientAgent(chatClient, name: key, instructions: "Vision analysis instructions");
+    });
+
+    builder.AddAIAgent("SupportAgent", (sp, key) => {
+        var chatClient = sp.GetRequiredService<IChatClient>();
+        return new ChatClientAgent(chatClient, name: key, instructions: "Support instructions", tools: [.. mcpTools.Cast<AITool>()]);
+    });
+
+    builder.AddAIAgent("Editor", (sp, key) => {
+        var chatClient = sp.GetRequiredService<IChatClient>();
+        return new ChatClientAgent(chatClient, name: key, instructions: "Editing instructions");
+    });
+
+    builder.AddWorkflow("VirtualAssistant", (sp, key) => {
+        var visionAgent = sp.GetRequiredKeyedService<AIAgent>("VisionAgent");
+        var supportAgent = sp.GetRequiredKeyedService<AIAgent>("SupportAgent");
+        var editorAgent = sp.GetRequiredKeyedService<AIAgent>("Editor");
+
+        return AgentWorkflowBuilder.BuildSequential(
+            workflowName: key,
+            agents: [visionAgent, supportAgent, editorAgent]
+        );
+    }).AddAsAIAgent();
+
+The support agent can call DevExpress documentation tools through MCP:
+
+    <!-- tab: Program.cs -->
+    using ModelContextProtocol.Client;
+
+    await using var mcpClient = await McpClient.CreateAsync(
+        new HttpClientTransport(new HttpClientTransportOptions
+        {
+            Endpoint = new Uri("https://api.devexpress.com/mcp/docs")
+        })
+    );
+    var mcpTools = await mcpClient.ListToolsAsync().ConfigureAwait(false);
+
+Assign `mcpTools` to the support agent in the `tools` parameter.
+
+This server accepts `multipart/form-data` for `POST /api/Chat/GetAIResponse`:
+
+- `text`: user message text
+- `id`: client message identifier
+- `timestamp`: message timestamp in ISO 8601 format
+- `attachments`: optional attachment metadata
+- `files`: optional files for image analysis
+
+Use this format when your Chat UI sends files with user messages.
+
+For baseline `IChatClient` registration and Azure options, see [IChatClient](/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service/#Azure_OpenAI/ASPNET_Web_API_Backend/IChatClient).