DevExpress-Examples · arman-boyakhchyan · Jul 8, 2026 · Jul 6, 2026 · Jul 7, 2026 · Jul 7, 2026
@@ -1,16 +1,20 @@
-# AIIntegrationServer
+# DevExtreme DataGrid – Azure OpenAI Integration (.NET AIIntegrationServer)
 
-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.
+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:
+
+- [AI columns](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/)
+- [AI Assistant](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/)
+
+See the root [README](../README.md) for additional information.
 
 ## Features
 
-- **API-only architecture** - No Views or static files
-- **Azure OpenAI integration** - Uses `Azure.AI.OpenAI` alongside `Microsoft.Extensions.AI`
-- **Two endpoints** - Separate routes for grid column transformations and the AI assistant (with JSON schema response format)
+- **API-only architecture** - No Views or UI elements
+- **AI .NET Library Integration** - Uses `Azure.AI.OpenAI` and `Microsoft.Extensions.AI`
+- **Feature-specific endpoints** - Separate routes for AI columns and AI assistant
 - **Stateless** - No session storage, each request is independent
 - **CORS enabled** - Allows cross-origin requests from client applications
-- **snake_case JSON** - Request/response payloads use `snake_case` property naming
-- **Port 5005** - Runs on HTTP port 5005 and HTTPS port 5006
+- **HTTP/HTTPS Support** - Runs on 5005 HTTP port and 5006 HTTPS port
 
 ## Project Structure
 
@@ -35,11 +39,11 @@ AIIntegrationServer/
 
 ### POST /api/ai/grid-column
 
-Runs a chat completion for grid column transformations (temperature `0.7`).
+Runs chat completions for AI columns. Uses a `0.7` temperature value.
 
 ### POST /api/ai/assistant
 
-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.
+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.
 
 **Request Body (application/json):**
 
@@ -63,9 +67,9 @@ Runs a chat completion for the AI assistant (temperature `0.0`). If the request
 }
 ```
 
-## Configuration
+## Configure an AI Service
 
-Update `appsettings.json` with your Azure OpenAI credentials:
+Add your Azure OpenAI credentials to `appsettings.json`:
 
 ```json
 {
@@ -89,4 +93,4 @@ The server will start on:
 
 ## CORS Policy
 
-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.
+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.
@@ -4,92 +4,72 @@
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
 <!-- default badges end -->
-# DevExtreme DataGrid - AI Integration
+# DevExtreme DataGrid – Azure OpenAI Integration (.NET)
 
-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.
+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:
+
+- [AI columns](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/)
+- [AI Assistant](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/)
 
 ![Example image](images/image-template.png)
 
 ## Implementation Details
 
-### Setup the AI Integration Server
-
-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:
-- `/api/ai/grid-column` (POST) - Used by the DataGrid AI column to generate cell values.
-- `/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.
-
-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.
-
-### Configure the AIIntegration object
-
-All framework projects share the same client-side pattern:
-
-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.
-
-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.
-
-### Configure the DataGrid AI column
-
-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:
+The [AIIntegrationServer](/AIIntegrationServer/) backend exposes separate endpoints for AI columns and the AI Assistant:
 
-- `prompt` - The natural-language instruction sent to the model with row data as context.
-- `mode` - `'auto'` runs the AI for every visible row automatically; `'manual'` waits for user action.
-- `noDataText` - Placeholder shown while values are being generated.
+```js
+const _SERVER_URL = 'http://localhost:5005/api/ai';
 
-### Configure the DataGrid AI Assistant
+const AI_COLUMN_URL = `${_SERVER_URL}/grid-column`;
+const AI_ASSISTANT_URL = `${_SERVER_URL}/assistant`;
+```
 
-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:
+This example uses endpoint URLs in a factory function to configure two [AIIntegration](https://js.devexpress.com/Documentation/ApiReference/Common_Types/AIIntegration) instances:
 
-- `user` - Identifies the end user in the chat data source.
-- `suggestions.items` - Quick-action chips (Help, Filter, Sort, Group). Each item carries a `prompt` payload.
-- `suggestions.onItemClick` - Pushes the suggestion's prompt into the chat data source as a new user (or `help`) message.
-- `onInitialized` - Stores the chat instance reference so suggestions can append messages directly to its data source.
+```js
+function createSendRequest(url) {
+    return ({ prompt, data }) => {
+        const controller = new AbortController();
+        const signal = controller.signal;
 
-## Run the Example
+        const promise = fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ prompt, data }),
+            signal,
+        })
+            .then(response => response.json())
+            .then(result => {
+                return result.content;
+            });
 
-### Angular, React, Vue, and jQuery
+        return {
+            promise,
+            abort: () => controller.abort(),
+        };
+    };
+}
 
-1. **Start the AI Integration Server**
+const columnAiIntegration = new DevExpress.aiIntegration.AIIntegration({
+    sendRequest: createSendRequest(AI_COLUMN_URL),
+});
 
-    ```bash
-    cd AIIntegrationServer
-    dotnet run
-    ```
+const assistantAiIntegration = new DevExpress.aiIntegration.AIIntegration({
+    sendRequest: createSendRequest(AI_ASSISTANT_URL),
+});
+```
 
-    The server starts on `http://localhost:5005`.
+## Run the Server
 
-2. **Run the Client Application**
-
-    - **Angular:** `cd Angular && npm install && npm start`
-    - **React:** `cd React && npm install && npm run dev`
-    - **Vue:** `cd Vue && npm install && npm run dev`
-    - **jQuery:** `cd jQuery && npm install && npm start`
-
-### ASP.NET Core
-
-1. **Start the AI Integration Server**
-
-    ```bash
-    cd AIIntegrationServer
-    dotnet run
-    ```
-
-2. **Run the ASP.NET Core front-end** in a separate terminal:
-
-    ```bash
-    cd "ASP.NET Core"
-    dotnet run
-    ```
-
-    The front-end starts on `http://localhost:5050`.
+To run the backend, follow the instructions in the following README: [AIIntegrationServer](AIIntegrationServer/README.md).
 
 ## Files to Review
 
-- *AI Integration Server*
-    - [Program.cs](AIIntegrationServer/Program.cs) - App startup, Azure OpenAI client, CORS, and routing
-    - [AIIntegrationController.cs](AIIntegrationServer/Controllers/AIIntegrationController.cs) - `/api/ai/grid-column` and `/api/ai/assistant` endpoints
-    - [AIIntegrationRequest.cs](AIIntegrationServer/Models/AIIntegrationRequest.cs) - Request/response payload models
-    - [AzureOpenAIOptions.cs](AIIntegrationServer/Configuration/AzureOpenAIOptions.cs) - Azure OpenAI configuration binding
+- **AI Integration Server**
+    - [Program.cs](AIIntegrationServer/Program.cs)
+    - [AIIntegrationController.cs](AIIntegrationServer/Controllers/AIIntegrationController.cs)
+    - [AIIntegrationRequest.cs](AIIntegrationServer/Models/AIIntegrationRequest.cs)
+    - [AzureOpenAIOptions.cs](AIIntegrationServer/Configuration/AzureOpenAIOptions.cs)
 - **Angular**
     - [app.component.html](Angular/src/app/app.component.html)
     - [app.component.ts](Angular/src/app/app.component.ts)
@@ -116,6 +96,11 @@ The [aiAssistant](https://js.devexpress.com/Documentation/ApiReference/UI_Compon
 - [DataGrid - AI Assistant](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/aiAssistant/)
 - [AIIntegration Utility](https://js.devexpress.com/Documentation/ApiReference/Common_Types/AIIntegration/)
 
+## More Examples
+
+- [DevExtreme DataGrid - AI Columns Demo](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/AIColumns/)
+- [DevExtreme DataGrid - AI Assistant Demo](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/AIAssistant/)
+
 <!-- feedback -->
 ## Does This Example Address Your Development Requirements/Objectives?