Skip to content

Commit d43cd23

Browse files
vladaskorohodovavladaskorohodova
authored
Chat: add Azure OpenAI Integration topic (#8555)
1 parent d3cd636 commit d43cd23

File tree

6 files changed

+173
-10
lines changed

6 files changed

+173
-10
lines changed

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
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).
1+
You can integrate DevExtreme Chat with various AI services:
22

3-
[note]
4-
5-
Review this demo for Azure OpenAI integration:
6-
7-
#include btn-open-demo with {
8-
href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Chat/AIAndChatbotIntegration/"
9-
}
10-
11-
[/note]
3+
- [OpenAI](/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service/#OpenAI)
4+
- [Azure OpenAI](/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service/#Azure_OpenAI)
5+
- [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‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
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‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
Configure a Chat to send user messages to your backend endpoint and render responses.
2+
3+
[important] Azure OpenAI credentials must remain on the server. Do not call Azure OpenAI directly from client code.
4+
5+
Use [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) to send a message to your API and push the response to the data store:
6+
7+
<!-- tab: TypeScript -->
8+
async function onMessageEntered(e) {
9+
const userMessage = e.message;
10+
dataSource.store().push([{ type: "insert", data: userMessage }]);
11+
12+
const response = await fetch("http://localhost:5005/api/Chat/GetAIResponse", {
13+
method: "POST",
14+
headers: { "Content-Type": "application/json" },
15+
body: JSON.stringify(userMessage)
16+
});
17+
18+
const assistantMessage = await response.json();
19+
dataSource.store().push([{ type: "insert", data: assistantMessage }]);
20+
}
21+
22+
Review this demo for Chat UI integration. The demo uses a DevExpress-hosted API:
23+
24+
#include btn-open-demo with {
25+
href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Chat/AIAndChatbotIntegration/"
26+
}

‎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‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
This section describes the server layer for Azure OpenAI integration.
2+
3+
The ASP.NET Web API backend performs the following actions:
4+
5+
- Stores Azure credentials in server configuration.
6+
- Sends chat completion requests to Azure OpenAI.
7+
- Exposes chat endpoints for the DevExtreme Chat client.
8+
9+
Core endpoints:
10+
11+
- `POST /api/Chat/GetAIResponse`
12+
- `GET /api/Chat/GetUserMessages`
13+
14+
The following implementations are available:
15+
16+
- [IChatClient](/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service/#Azure_OpenAI/ASPNET_Web_API_Backend/IChatClient)
17+
- [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‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
This implementation uses [Microsoft.Extensions.AI](https://learn.microsoft.com/en-us/dotnet/ai/microsoft-extensions-ai) and a single `IChatClient` instance.
2+
3+
#include btn-open-github with {
4+
href: "https://github.com/DevExpress-Examples/devextreme-chat-ai-integration-azure-openai-dotnet"
5+
}
6+
7+
**Prerequisites**:
8+
9+
- [.NET 9 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/9.0)
10+
- Azure OpenAI endpoint, API key, and deployment name
11+
12+
Register validated options and `IChatClient` in `Program.cs`:
13+
14+
<!-- tab: Program.cs -->
15+
builder.Services
16+
.AddOptions<AzureOpenAIOptions>()
17+
.Bind(builder.Configuration.GetSection(AzureOpenAIOptions.SectionName))
18+
.Validate(o => !string.IsNullOrWhiteSpace(o.Endpoint), "Endpoint missing")
19+
.Validate(o => !string.IsNullOrWhiteSpace(o.ApiKey), "ApiKey missing")
20+
.Validate(o => !string.IsNullOrWhiteSpace(o.ModelName), "ModelName missing")
21+
.ValidateOnStart();
22+
23+
builder.Services.AddSingleton<IChatClient>(sp => {
24+
var opts = sp.GetRequiredService<IOptions<AzureOpenAIOptions>>().Value;
25+
var client = new AzureOpenAIClient(
26+
new Uri(opts.Endpoint),
27+
new System.ClientModel.ApiKeyCredential(opts.ApiKey));
28+
return client.GetChatClient(opts.ModelName).AsIChatClient();
29+
});
30+
31+
Call `IChatClient` in the controller:
32+
33+
<!-- tab: ChatController.cs -->
34+
[HttpPost("GetAIResponse")]
35+
public async Task<ClientChatMessage> GetAIResponse([FromBody] ClientChatMessage userMessage) {
36+
var chatMessages = BuildChatHistory(userMessage);
37+
var completion = await _chatClient.CompleteAsync(chatMessages);
38+
return ToAssistantMessage(completion);
39+
}
40+
41+
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‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
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`.
2+
3+
#include btn-open-github with {
4+
href: "https://github.com/DevExpress-Examples/devextreme-chat-ai-integration-ms-agent-framework"
5+
}
6+
7+
Compared to the base `IChatClient` setup, this implementation adds:
8+
9+
- Multiple specialized agents (`VisionAgent`, `SupportAgent`, `Editor`).
10+
- A sequential workflow (`VirtualAssistant`) that orchestrates agent execution.
11+
- [MCP-based documentation tools](/Documentation/Guide/AI_Features/DevExpress_MCP_Server_Configuration/) for the support agent.
12+
- Multipart request handling for text and file attachments.
13+
14+
The application uses one shared `IChatClient` instance, then composes agents and workflow on top of it:
15+
16+
<!-- tab: Program.cs -->
17+
using Azure.AI.OpenAI;
18+
using Microsoft.Agents.AI;
19+
using Microsoft.Agents.AI.Hosting;
20+
using Microsoft.Agents.AI.Workflows;
21+
using Microsoft.Extensions.AI;
22+
using Microsoft.Extensions.Options;
23+
using System.ClientModel;
24+
25+
builder.Services.AddSingleton<IChatClient>(sp => {
26+
var opts = sp.GetRequiredService<IOptions<AzureOpenAIOptions>>().Value;
27+
var client = new AzureOpenAIClient(
28+
new Uri(opts.Endpoint),
29+
new ApiKeyCredential(opts.ApiKey));
30+
return client.GetChatClient(opts.ModelName).AsIChatClient();
31+
});
32+
33+
builder.AddAIAgent("VisionAgent", (sp, key) => {
34+
var chatClient = sp.GetRequiredService<IChatClient>();
35+
return new ChatClientAgent(chatClient, name: key, instructions: "Vision analysis instructions");
36+
});
37+
38+
builder.AddAIAgent("SupportAgent", (sp, key) => {
39+
var chatClient = sp.GetRequiredService<IChatClient>();
40+
return new ChatClientAgent(chatClient, name: key, instructions: "Support instructions", tools: [.. mcpTools.Cast<AITool>()]);
41+
});
42+
43+
builder.AddAIAgent("Editor", (sp, key) => {
44+
var chatClient = sp.GetRequiredService<IChatClient>();
45+
return new ChatClientAgent(chatClient, name: key, instructions: "Editing instructions");
46+
});
47+
48+
builder.AddWorkflow("VirtualAssistant", (sp, key) => {
49+
var visionAgent = sp.GetRequiredKeyedService<AIAgent>("VisionAgent");
50+
var supportAgent = sp.GetRequiredKeyedService<AIAgent>("SupportAgent");
51+
var editorAgent = sp.GetRequiredKeyedService<AIAgent>("Editor");
52+
53+
return AgentWorkflowBuilder.BuildSequential(
54+
workflowName: key,
55+
agents: [visionAgent, supportAgent, editorAgent]
56+
);
57+
}).AddAsAIAgent();
58+
59+
The support agent can call DevExpress documentation tools through MCP:
60+
61+
<!-- tab: Program.cs -->
62+
using ModelContextProtocol.Client;
63+
64+
await using var mcpClient = await McpClient.CreateAsync(
65+
new HttpClientTransport(new HttpClientTransportOptions
66+
{
67+
Endpoint = new Uri("https://api.devexpress.com/mcp/docs")
68+
})
69+
);
70+
var mcpTools = await mcpClient.ListToolsAsync().ConfigureAwait(false);
71+
72+
Assign `mcpTools` to the support agent in the `tools` parameter.
73+
74+
This server accepts `multipart/form-data` for `POST /api/Chat/GetAIResponse`:
75+
76+
- `text`: user message text
77+
- `id`: client message identifier
78+
- `timestamp`: message timestamp in ISO 8601 format
79+
- `attachments`: optional attachment metadata
80+
- `files`: optional files for image analysis
81+
82+
Use this format when your Chat UI sends files with user messages.
83+
84+
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).

0 commit comments

Comments
 (0)