Skip to content

Commit eefecc4

Browse files
committed
update readme
1 parent 0e493f5 commit eefecc4

File tree

2 files changed

+12
-19
lines changed

2 files changed

+12
-19
lines changed

README.md

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
This example integrates an AI assistant to DevExpress Blazor Components. User requests and assistant responses are displayed on-screen using the [DevExpress Blazor AI Chat](http://docs.devexpress.com/Blazor/DevExpress.AIIntegration.Blazor.Chat.DxAIChat?v=24.2) component.
99

10-
With an AI Assistant integrated in our AI-chat component, you can filter and manipulate data, generate document summaries, and ask context-aware questions about report content, table data, and more — all within the user interface.
10+
With an [Azure OpenAI Assistant](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/assistant) integrated in our AI-chat component, you can filter and manipulate data, generate document summaries, and ask context-aware questions about report content, table data, and more — all within the user interface.
1111

1212
This example demonstrates the following DevExpress Blazor Components:
1313

@@ -24,18 +24,15 @@ This example demonstrates the following DevExpress Blazor Components:
2424

2525
The Report Viewer presents multiple reports bound to different data sources. The available reports include:
2626

27-
- The *Drill-Down Report* displays invoices where the expandable/collapsible sections list purchased products. You can ask the AI Assistant: Which invoice has the highest total order value? How many orders are currently in transit, pending, or delivered? What is the average order value per invoice?
28-
- The *Market Share Report* includes sales figures, changes from the prior year, and current market share percentages for various regions and countries across different time periods. You can ask the AI Assistant: Which region had the highest market share in September? How did market share change for India? How does Canada’s market share growth compare to the USA’s?
29-
- The *Restaurant Menu* includes multiple groups, each group represents a different category and sub-category of meals and beverages. You can ask the AI Assistant: What are the price ranges for the menu items? Are there any vegetarian or non-meat options on this menu?
27+
- The *Drill-Down Report* displays invoices where the expandable/collapsible sections list purchased products. You can ask the AI Assistant such as: Which invoice has the highest total order value? How many orders are currently in transit, pending, or delivered? What is the average order value per invoice?
28+
- The *Market Share Report* includes sales figures, changes from the prior year, and current market share percentages for various regions and countries across different time periods. You can ask the AI Assistant such as: Which region had the highest market share in September? How did market share change for India? How does Canada’s market share growth compare to the USA’s?
29+
- The *Restaurant Menu* includes multiple groups, each group represents a different category and sub-category of meals and beverages. You can ask the AI Assistant such as: What are the price ranges for the menu items? Are there any vegetarian or non-meat options on this menu?
3030

3131
Implementation details: [Add an AI Assistant to Blazor Report Viewer](#add-an-ai-assistant-to-report-viewer).
3232

3333
>[!TIP]
3434
> Please note that AI Assistant initialization takes time. The assistant tab appears once Microsoft Azure scans the source document (i.e., grid or report data) on the server side.
3535
36-
To navigate to a page with the component, click on the corresponding card on the root page:
37-
38-
![Cards](images/index-page.png)
3936

4037
## Implementation Details
4138

@@ -44,10 +41,6 @@ To navigate to a page with the component, click on the corresponding card on the
4441
> [!NOTE]
4542
> 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.
4643
47-
Create an Azure OpenAI resource in the Azure portal to use AI Assistants. 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).
48-
49-
Once you obtain a private endpoint and an API key, register them as `AZURE_OPENAI_ENDPOINT` and `AZURE_OPENAI_APIKEY` environment variables in your application.
50-
5144
Add the following code to the *Program.cs* file to register the AI Services and an [OpenAI Assistant](https://platform.openai.com/docs/assistants/overview) in your application:
5245

5346
```cs
@@ -71,7 +64,7 @@ builder.Services.AddDevExpressAI((config) => {
7164
});
7265
```
7366

74-
For more information on AI Assistants, refer to the following topic: [AI Service Assistants in the DxAIChat component](https://docs.devexpress.com/Blazor/DevExpress.AIIntegration.Blazor.Chat.DxAIChat#ai-service-assistants).
67+
For more information on AI Assistants in `DxAIChat`, refer to the following topic: [AI Service Assistants in the DxAIChat component](https://docs.devexpress.com/Blazor/DevExpress.AIIntegration.Blazor.Chat.DxAIChat#ai-service-assistants).
7568

7669
**Files to Review:**
7770

@@ -111,7 +104,7 @@ The following code snippet adds the [`DxAIChat`](https://docs.devexpress.com/Bla
111104
}
112105
```
113106

114-
Use the [`MessageContentTemplate`](https://docs.devexpress.com/Blazor/DevExpress.AIIntegration.Blazor.Chat.DxAIChat.MessageContentTemplate) property to display any render fragment in a message bubble. For more information on appearance customization, refer to the following help document: [Customizable Message Appearance and Empty Message Area](https://docs.devexpress.com/Blazor/DevExpress.AIIntegration.Blazor.Chat.DxAIChat#customizable-message-appearance-and-empty-message-area). To display rich formatted messages, use a markdown processor to convert the response content to HTML code.
107+
Use the [`MessageContentTemplate`](https://docs.devexpress.com/Blazor/DevExpress.AIIntegration.Blazor.Chat.DxAIChat.MessageContentTemplate) property to display rich formatted messages. Use a markdown processor to convert the response content to HTML code.
115108

116109
**Files to Review:**
117110

@@ -162,8 +155,6 @@ The following image displays Blazor Report Viewer UI implemented in this example
162155

163156
![Blazor Report Viewer and Integrated AI Assistant](images/report-viewer.png)
164157

165-
Use the [DxListBox](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2) component to select a report and explore how different data is handled.
166-
167158
#### Add a New Tab
168159

169160
Use the [`OnCustomizeTabs`](https://docs.devexpress.com/XtraReports/DevExpress.Blazor.DxViewer.OnCustomizeTabs) event to add a new tab:
@@ -194,7 +185,7 @@ Use the [`OnCustomizeTabs`](https://docs.devexpress.com/XtraReports/DevExpress.B
194185
}
195186
```
196187

197-
A new [`TabModel`](https://docs.devexpress.com/XtraReports/DevExpress.Blazor.Reporting.Models.TabModel._members) object is added to the list of tabs. The `UserAssistantTabContentModel` class implements the [`ITabContentModel`](https://docs.devexpress.com/XtraReports/DevExpress.Blazor.Reporting.Models.ITabContentModel) interface which defines the logic used to determine when the AI Assistant tab is displayed. The AI Assistant tab is only displayed when the report is initialized and contains at least one page.
188+
A new [`TabModel`](https://docs.devexpress.com/XtraReports/DevExpress.Blazor.Reporting.Models.TabModel._members) object is added to the list of tabs. The [`UserAssistantTabContentModel`](https://github.com/DevExpress-Examples/blazor-grid-and-report-viewer-integrate-ai-assistant/blob/24.2.3%2B/CS/DevExpress.AI.Samples.Blazor/Models/UserAssistantTabContentModel.cs#L6) class implements the [`ITabContentModel`](https://docs.devexpress.com/XtraReports/DevExpress.Blazor.Reporting.Models.ITabContentModel) interface which defines the logic used to determine when the AI Assistant tab is displayed. The AI Assistant tab is only displayed when the report is initialized and contains at least one page.
198189

199190
The `TabTemplate` property specifies the content of the tab. It dynamically renders an `DxAIChat` component inside the tab and passes the `ContentModel` as a parameter to control the tab's content.
200191

@@ -228,7 +219,7 @@ The content fot the AI Assistant tab is defined in the [AITabRenderer.razor](./D
228219
}
229220
```
230221

231-
Use the [`MessageContentTemplate`](https://docs.devexpress.com/Blazor/DevExpress.AIIntegration.Blazor.Chat.DxAIChat.MessageContentTemplate) property to display any render fragment in a message bubble. For more information on appearance customization, refer to the following help document: [Customizable Message Appearance and Empty Message Area](https://docs.devexpress.com/Blazor/DevExpress.AIIntegration.Blazor.Chat.DxAIChat#customizable-message-appearance-and-empty-message-area). To display rich formatted messages, use a markdown processor to convert the response content to HTML code.
222+
Use the [`MessageContentTemplate`](https://docs.devexpress.com/Blazor/DevExpress.AIIntegration.Blazor.Chat.DxAIChat.MessageContentTemplate) property to display rich formatted messages. Use a markdown processor to convert the response content to HTML code.
232223

233224
**Files to Review:**
234225

@@ -274,11 +265,11 @@ For information on OpenAI Assistants, refer to the following article: [Assistant
274265
## Files to Review
275266

276267
- [Program.cs](./DevExpress.AI.Samples.Blazor/Program.cs)
277-
- [ReportViewer.razor](./DevExpress.AI.Samples.Blazor/Components/Pages/ReportViewer.razor)
268+
- [Instructions.cs](./DevExpress.AI.Samples.Blazor/Instructions.cs)
278269
- [Grid.razor](./DevExpress.AI.Samples.Blazor/Components/Pages/Grid.razor)
270+
- [ReportViewer.razor](./DevExpress.AI.Samples.Blazor/Components/Pages/ReportViewer.razor)
279271
- [AITabRenderer.razor](./DevExpress.AI.Samples.Blazor/Components/Reporting/AITabRenderer.razor)
280272
- [UserAssistantTabContentModel.cs](./DevExpress.AI.Samples.Blazor/Models/UserAssistantTabContentModel.cs)
281-
- [Instructions.cs](./DevExpress.AI.Samples.Blazor/Instructions.cs)
282273

283274
## Documentation
284275

@@ -290,9 +281,11 @@ For information on OpenAI Assistants, refer to the following article: [Assistant
290281
## More Examples
291282

292283
- [Reporting for Blazor - Integrate AI-powered Summarize and Translate Features based on Azure OpenAI](https://github.com/DevExpress-Examples/blazor-reporting-ai/)
284+
- [Reporting for ASP.NET Core - Integrate AI Assistant based on Azure OpenAI](https://github.com/DevExpress-Examples/web-reporting-integrate-ai-assistant)
293285
- [AI Chat for Blazor - How to add DxAIChat component in Blazor, MAUI, WPF, and WinForms applications](https://github.com/DevExpress-Examples/devexpress-ai-chat-samples)
294286
- [Rich Text Editor and HTML Editor for Blazor - How to integrate AI-powered extensions](https://github.com/DevExpress-Examples/blazor-ai-integration-to-text-editors)
295287
<!-- feedback -->
288+
296289
## Does this example address your development requirements/objectives?
297290

298291
[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-grid-and-report-viewer-integrate-ai-assistant&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-grid-and-report-viewer-integrate-ai-assistant&~~~was_helpful=no)

images/index-page.png

-47.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)