You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# Dashboard for ASP.NET Core -- Integrate AI Assistant based on Azure OpenAI
6
+
# Dashboard for ASP.NET Core — Integrate AI Assistant based on Azure OpenAI
7
7
8
-
This example is an ASP.NET Core application with integrated DevExpress Reports and an AI assistant. User requests and assistant responses are displayed on-screen using the DevExtreme [`dxChat`](https://js.devexpress.com/jQuery/Documentation/24_2/ApiReference/UI_Components/dxChat/) component.
8
+
This example is an ASP.NET Core application with integrated DevExpress Reports and an AI assistant. User requests and assistant responses are displayed on-screen using the DevExtreme [`dxChat`](https://js.devexpress.com/jQuery/Documentation/24_2/ApiReference/UI_Components/dxChat/) component. An AI Assistant [custom dashboard item](https://docs.devexpress.com/Dashboard/117546/web-dashboard/advanced-customization/create-a-custom-item) is based on the `dxChat` widget.
9
9
10
-

10
+

11
11
12
-
The AI Assistant reviews and analyzes all the data displayed in the dashboard to answer your questions. For a more focused analysis, you can select a specific dashboard item. Simply click the **Values** button in the AI Assistant custom item's caption and choose the desired widget. Any changes to dashboard data—such as updates to parameters or master filters—will automatically trigger a recreation of the AI Assistant.
12
+
The AI Assistant reviews and analyzes all the data displayed in the dashboard to answer your questions. For a more focused analysis, you can select a specific dashboard item. Click the **Values** button in the AI Assistant custom item's caption and choose the desired widget. Any changes to dashboard data—such as updates to parameters or master filters—will automatically trigger a recreation of the AI Assistant. The dashboard data is exported in Excel format and passed to the AI Assistant.
13
13
14
14
**Please note that AI Assistant initialization takes time. The assistant is ready for interaction once Microsoft Azure scans the source document on the server side.**
15
15
@@ -20,9 +20,9 @@ The AI Assistant reviews and analyzes all the data displayed in the dashboard to
20
20
> [!NOTE]
21
21
> DevExpress AI-powered extensions follow the "bring your own key" principle. DevExpress does not offer a REST API and does not ship any built-in LLMs/SLMs. You need an active Azure/Open AI subscription to obtain the REST API endpoint, key, and model deployment name. These variables must be specified at application startup to register AI clients and enable DevExpress AI-powered Extensions in your application.
22
22
23
-
You need to create an Azure OpenAI resource in the Azure portal to use AI Assistants for DevExpress BI Dashboard. Refer to the following help topic for details: [Microsoft - Create and deploy an Azure OpenAI Service resource](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource?pivots=web-portal).
23
+
Create an Azure OpenAI resource in the Azure portal to use AI Assistants for DevExpress BI Dashboard. Refer to the following help topic for details: [Microsoft - Create and deploy an Azure OpenAI Service resource](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource?pivots=web-portal).
24
24
25
-
Once you obtain a private endpoint and an API key, register them as `AZURE_OPENAI_ENDPOINT` and `AZURE_OPENAI_APIKEY` environment variables. The [EnvSettings.cs](./CS/ReportingApp/EnvSettings.cs) reads these settings. `DeploymentName` in this file is a name of your Azure model, for example, `GPT4o`:
25
+
Once you obtain a private endpoint and an API key, register them as `AZURE_OPENAI_ENDPOINT` and `AZURE_OPENAI_APIKEY` environment variables. The [EnvSettings.cs](./CS/EnvSettings.cs) reads these settings. `DeploymentName` in this file is a name of your Azure model, for example, `GPT4o`:
26
26
27
27
```cs
28
28
publicstaticclassEnvSettings {
@@ -32,9 +32,6 @@ public static class EnvSettings {
32
32
}
33
33
```
34
34
35
-
>[!NOTE]
36
-
> Availability of Azure Open AI Assistants depends on the region. Refer to the following article for more details: [Assistants (Preview)](https://learn.microsoft.com/en-us/azure/ai-services/openai/concepts/models?tabs=global-standard%2Cstandard-chat-completions#assistants-preview).
> Availability of Azure Open AI Assistants depends on the region. Refer to the following article for more details: [Assistants (Preview)](https://learn.microsoft.com/en-us/azure/ai-services/openai/concepts/models?tabs=global-standard%2Cstandard-chat-completions#assistants-preview).
This example implements a [custom item](https://docs.devexpress.com/Dashboard/117546/web-dashboard/advanced-customization/create-a-custom-item) based on the [`dxChat`](https://js.devexpress.com/jQuery/Documentation/Guide/UI_Components/Chat/Overview/) component. The
88
+
89
+
For instructions on how to implement a custom dashboard items, refer to tutorials in the following section: [Create a Custom Item for the Web Dashboard](https://docs.devexpress.com/Dashboard/117546/web-dashboard/advanced-customization/create-a-custom-item).
86
90
87
-
This example implements a [custom item](https://docs.devexpress.com/Dashboard/117546/web-dashboard/advanced-customization/create-a-custom-item) based on the [`dxChat`](https://js.devexpress.com/jQuery/Documentation/Guide/UI_Components/Chat/Overview/) component.
91
+
For the **AI Assistant**custom item implementation, review to the following file: [aiChatCustomItem.js](./CS/wwwroot/js/aiChatCustomItem.js)
88
92
89
-
For the **AI Assistant** custom item implementation, refer to the following file: [aiChatCustomItem.js](./CS/wwwroot/js/aiChatCustomItem.js)
93
+
The additional logic for the custom item is implemented in `handleDashboardInitialized` and `customizeChatCustomItemCaptionToolbar` in the [Index.cshtml](./CS/Pages/Index.cshtml) file. The `itemCaptionToolbarUpdated` event is used to add a **Select Widget** button to the item's caption. This button allows users to select a dashboard item for the AI Assistant. The `DashboardInitialized` event is handled to implement the one AI Assistant per dashboard logic.
@@ -112,15 +120,25 @@ Register the created custom item extension in the Wen Dashboard:
112
120
</div>
113
121
```
114
122
115
-
After you registered the extension the Assistant icon appears in the Dashboard Toolbox:
123
+
After you registered the extension the AI Assistant icon appears in the Dashboard Toolbox:
116
124
117
125

118
126
119
-
Click the item to add an AI Assistant to the dashboard. Only one AI Assistant item is available per dashboard. You can ask the assistant questions in the Viewer mode.
127
+
Click the item to add an AI Assistant item to the dashboard. Only one AI Assistant item is available per dashboard. You can ask the assistant questions in the Viewer mode.
120
128
121
129
File to Review:
122
130
-[Index.cshtml](./CS/Pages/Index.cshtml)
123
131
132
+
### Access the Assistant
133
+
134
+
Each time a dashboard is initialized or its [dashboard state](https://docs.devexpress.com/Dashboard/DevExpress.DashboardCommon.DashboardState) changes, a new assistant is created and the dashboard data is exported in Excel format. This way the AI assistant is always provided with up-to-date data.
Each time a user sends a message, the [`onMessageEntered`](https://js.devexpress.com/jQuery/Documentation/24_2/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event handler passes the request to the assistant:
@@ -161,13 +179,16 @@ async onMessageEntered(e) {
161
179
}
162
180
```
163
181
164
-
[`AIChatController.GetAnswer`]() receives answers from the assistant.
182
+
[`AIChatController.GetAnswer`](./CS/Controllers/AIChatController.cs#L38) receives answers from the assistant.
0 commit comments