Skip to content

Commit edbf2a8

Browse files
Update Readme Files (#9)
1 parent e424446 commit edbf2a8

2 files changed

Lines changed: 68 additions & 79 deletions

File tree

AIIntegrationServer/README.md

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
# AIIntegrationServer
1+
# DevExtreme DataGrid – Azure OpenAI Integration (.NET AIIntegrationServer)
22

3-
AIIntegrationServer is an API-only Web API that acts as a proxy between a DevExtreme DataGrid `AIIntegration` component and [Azure OpenAI](https://azure.microsoft.com/en-us/pricing/details/azure-openai/). It exposes endpoints for AI-powered grid column transformations and an assistant chat, forwarding prompts to Azure OpenAI and returning the model response.
3+
AIIntegrationServer is an API-only backend that connects [Azure OpenAI](https://azure.microsoft.com/en-us/pricing/details/azure-openai/) with the following AI-powered DevExtreme DataGrid features:
4+
5+
- [AI columns](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/)
6+
- [AI Assistant](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/)
7+
8+
See the root [README](../README.md) for additional information.
49

510
## Features
611

7-
- **API-only architecture** - No Views or static files
8-
- **Azure OpenAI integration** - Uses `Azure.AI.OpenAI` alongside `Microsoft.Extensions.AI`
9-
- **Two endpoints** - Separate routes for grid column transformations and the AI assistant (with JSON schema response format)
12+
- **API-only architecture** - No Views or UI elements
13+
- **AI .NET Library Integration** - Uses `Azure.AI.OpenAI` and `Microsoft.Extensions.AI`
14+
- **Feature-specific endpoints** - Separate routes for AI columns and AI assistant
1015
- **Stateless** - No session storage, each request is independent
1116
- **CORS enabled** - Allows cross-origin requests from client applications
12-
- **snake_case JSON** - Request/response payloads use `snake_case` property naming
13-
- **Port 5005** - Runs on HTTP port 5005 and HTTPS port 5006
17+
- **HTTP/HTTPS Support** - Runs on 5005 HTTP port and 5006 HTTPS port
1418

1519
## Project Structure
1620

@@ -35,11 +39,11 @@ AIIntegrationServer/
3539

3640
### POST /api/ai/grid-column
3741

38-
Runs a chat completion for grid column transformations (temperature `0.7`).
42+
Runs chat completions for AI columns. Uses a `0.7` temperature value.
3943

4044
### POST /api/ai/assistant
4145

42-
Runs a chat completion for the AI assistant (temperature `0.0`). If the request `data` contains a `responseSchema` property, it is forwarded to Azure OpenAI as a JSON schema response format; otherwise the response is returned as plain JSON.
46+
Runs chat completions for the AI assistant. Uses a `0.0` temperature value. Returns responses in JSON schemas (specified in a request `responseSchema` parameter). If `responseSchema` is not specified, returns dynamic JSON responses.
4347

4448
**Request Body (application/json):**
4549

@@ -63,9 +67,9 @@ Runs a chat completion for the AI assistant (temperature `0.0`). If the request
6367
}
6468
```
6569

66-
## Configuration
70+
## Configure an AI Service
6771

68-
Update `appsettings.json` with your Azure OpenAI credentials:
72+
Add your Azure OpenAI credentials to `appsettings.json`:
6973

7074
```json
7175
{
@@ -89,4 +93,4 @@ The server will start on:
8993

9094
## CORS Policy
9195

92-
The server allows all HTTP methods and headers for requests from `http://localhost:5050`. This configuration is for development purposes only. For production, restrict allowed origins in [Program.cs](AIIntegrationServer/Program.cs) to specific domains.
96+
The server allows all HTTP methods and headers for requests from `http://localhost:5050`. This configuration is for development purposes only. For production, update allowed origins in [Program.cs](AIIntegrationServer/Program.cs) to your production domains.

README.md

Lines changed: 52 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -4,92 +4,72 @@
44
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
55
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
66
<!-- default badges end -->
7-
# DevExtreme DataGrid - AI Integration
7+
# DevExtreme DataGrid – Azure OpenAI Integration (.NET)
88

9-
This example demonstrates how to enhance the [DevExtreme DataGrid](https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Overview/) with two AI-powered features: an [AI column](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/) that fills cells with values generated from row context, and the [AI Assistant](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/) chat that lets end users control the grid (sort, filter, search, group, page, etc.) through natural-language requests.
9+
This example uses an ASP.NET Web API backend to configure the following AI-powered [DevExtreme DataGrid](https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Overview/) features:
10+
11+
- [AI columns](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/)
12+
- [AI Assistant](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/)
1013

1114
![Example image](images/image-template.png)
1215

1316
## Implementation Details
1417

15-
### Setup the AI Integration Server
16-
17-
This example includes a pre-configured ASP.NET Core Web API server (see [AIIntegrationServer](/AIIntegrationServer/)) that acts as a proxy between the client and [Azure OpenAI](https://azure.microsoft.com/en-us/pricing/details/azure-openai/). The server runs at `http://localhost:5005` and exposes the following endpoints:
18-
- `/api/ai/grid-column` (POST) - Used by the DataGrid AI column to generate cell values.
19-
- `/api/ai/assistant` (POST) - Used by the AI Assistant to translate chat messages into DataGrid commands. When the request body contains a `responseSchema`, the server forwards it to Azure OpenAI as a structured JSON response format.
20-
21-
Credentials are read from [appsettings.json](AIIntegrationServer/appsettings.json) under the `AzureOpenAI` section (`Endpoint`, `ApiKey`, `ModelName`). The sample is preconfigured to use the public DevExpress demo endpoint; replace those values with your own Azure OpenAI deployment for production use. CORS is enabled for `http://localhost:5050` (the ASP.NET Core front-end) and the framework client dev servers.
22-
23-
### Configure the AIIntegration object
24-
25-
All framework projects share the same client-side pattern:
26-
27-
1. A `sendRequest` factory wraps `fetch` and posts `{ prompt, data }` to the chosen endpoint. The request is aborted via `AbortController` if the user cancels, and oversized prompts (≥ 5000 characters) are rejected before any network call.
28-
29-
2. Two separate [AIIntegration](https://js.devexpress.com/Documentation/ApiReference/Common_Types/AIIntegration) instances are created with `new DevExpress.aiIntegration.AIIntegration({ sendRequest })` - one bound to the column endpoint, one to the assistant endpoint. They are passed to the DataGrid via the [aiIntegration](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#aiIntegration) option and the [aiAssistant.aiIntegration](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/#aiIntegration) sub-option respectively.
30-
31-
### Configure the DataGrid AI column
32-
33-
A column with `type: 'ai'` enables automatic cell value generation. The [ai](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/) sub-options describe how the model should fill values:
18+
The [AIIntegrationServer](/AIIntegrationServer/) backend exposes separate endpoints for AI columns and the AI Assistant:
3419

35-
- `prompt` - The natural-language instruction sent to the model with row data as context.
36-
- `mode` - `'auto'` runs the AI for every visible row automatically; `'manual'` waits for user action.
37-
- `noDataText` - Placeholder shown while values are being generated.
20+
```js
21+
const _SERVER_URL = 'http://localhost:5005/api/ai';
3822

39-
### Configure the DataGrid AI Assistant
23+
const AI_COLUMN_URL = `${_SERVER_URL}/grid-column`;
24+
const AI_ASSISTANT_URL = `${_SERVER_URL}/assistant`;
25+
```
4026

41-
The [aiAssistant](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/) option turns on a chat panel that issues structured commands to the grid. The embedded [Chat](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxChat/) is configured with:
27+
This example uses endpoint URLs in a factory function to configure two [AIIntegration](https://js.devexpress.com/Documentation/ApiReference/Common_Types/AIIntegration) instances:
4228

43-
- `user` - Identifies the end user in the chat data source.
44-
- `suggestions.items` - Quick-action chips (Help, Filter, Sort, Group). Each item carries a `prompt` payload.
45-
- `suggestions.onItemClick` - Pushes the suggestion's prompt into the chat data source as a new user (or `help`) message.
46-
- `onInitialized` - Stores the chat instance reference so suggestions can append messages directly to its data source.
29+
```js
30+
function createSendRequest(url) {
31+
return ({ prompt, data }) => {
32+
const controller = new AbortController();
33+
const signal = controller.signal;
4734

48-
## Run the Example
35+
const promise = fetch(url, {
36+
method: 'POST',
37+
headers: { 'Content-Type': 'application/json' },
38+
body: JSON.stringify({ prompt, data }),
39+
signal,
40+
})
41+
.then(response => response.json())
42+
.then(result => {
43+
return result.content;
44+
});
4945

50-
### Angular, React, Vue, and jQuery
46+
return {
47+
promise,
48+
abort: () => controller.abort(),
49+
};
50+
};
51+
}
5152

52-
1. **Start the AI Integration Server**
53+
const columnAiIntegration = new DevExpress.aiIntegration.AIIntegration({
54+
sendRequest: createSendRequest(AI_COLUMN_URL),
55+
});
5356

54-
```bash
55-
cd AIIntegrationServer
56-
dotnet run
57-
```
57+
const assistantAiIntegration = new DevExpress.aiIntegration.AIIntegration({
58+
sendRequest: createSendRequest(AI_ASSISTANT_URL),
59+
});
60+
```
5861

59-
The server starts on `http://localhost:5005`.
62+
## Run the Server
6063

61-
2. **Run the Client Application**
62-
63-
- **Angular:** `cd Angular && npm install && npm start`
64-
- **React:** `cd React && npm install && npm run dev`
65-
- **Vue:** `cd Vue && npm install && npm run dev`
66-
- **jQuery:** `cd jQuery && npm install && npm start`
67-
68-
### ASP.NET Core
69-
70-
1. **Start the AI Integration Server**
71-
72-
```bash
73-
cd AIIntegrationServer
74-
dotnet run
75-
```
76-
77-
2. **Run the ASP.NET Core front-end** in a separate terminal:
78-
79-
```bash
80-
cd "ASP.NET Core"
81-
dotnet run
82-
```
83-
84-
The front-end starts on `http://localhost:5050`.
64+
To run the backend, follow the instructions in the following README: [AIIntegrationServer](AIIntegrationServer/README.md).
8565

8666
## Files to Review
8767

88-
- *AI Integration Server*
89-
- [Program.cs](AIIntegrationServer/Program.cs) - App startup, Azure OpenAI client, CORS, and routing
90-
- [AIIntegrationController.cs](AIIntegrationServer/Controllers/AIIntegrationController.cs) - `/api/ai/grid-column` and `/api/ai/assistant` endpoints
91-
- [AIIntegrationRequest.cs](AIIntegrationServer/Models/AIIntegrationRequest.cs) - Request/response payload models
92-
- [AzureOpenAIOptions.cs](AIIntegrationServer/Configuration/AzureOpenAIOptions.cs) - Azure OpenAI configuration binding
68+
- **AI Integration Server**
69+
- [Program.cs](AIIntegrationServer/Program.cs)
70+
- [AIIntegrationController.cs](AIIntegrationServer/Controllers/AIIntegrationController.cs)
71+
- [AIIntegrationRequest.cs](AIIntegrationServer/Models/AIIntegrationRequest.cs)
72+
- [AzureOpenAIOptions.cs](AIIntegrationServer/Configuration/AzureOpenAIOptions.cs)
9373
- **Angular**
9474
- [app.component.html](Angular/src/app/app.component.html)
9575
- [app.component.ts](Angular/src/app/app.component.ts)
@@ -116,6 +96,11 @@ The [aiAssistant](https://js.devexpress.com/Documentation/ApiReference/UI_Compon
11696
- [DataGrid - AI Assistant](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/)
11797
- [AIIntegration Utility](https://js.devexpress.com/Documentation/ApiReference/Common_Types/AIIntegration/)
11898

99+
## More Examples
100+
101+
- [DevExtreme DataGrid - AI Columns Demo](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/AIColumns/)
102+
- [DevExtreme DataGrid - AI Assistant Demo](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/AIAssistant/)
103+
119104
<!-- feedback -->
120105
## Does This Example Address Your Development Requirements/Objectives?
121106

0 commit comments

Comments
 (0)