From 3751ce8dc0ebe90da119bab3a72bd2befb968e15 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Mon, 6 Jul 2026 15:10:59 +0400 Subject: [PATCH 1/6] Update Readme Files --- AIIntegrationServer/README.md | 18 ++--- README.md | 119 +++++++++++++++------------------- 2 files changed, 62 insertions(+), 75 deletions(-) diff --git a/AIIntegrationServer/README.md b/AIIntegrationServer/README.md index 5077577..db949bd 100644 --- a/AIIntegrationServer/README.md +++ b/AIIntegrationServer/README.md @@ -1,16 +1,18 @@ # 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 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/) ## 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 the 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 HTTP port 5005 and HTTPS port 5006 ## Project Structure @@ -35,11 +37,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 `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 `0.0` temperature value. Returns responses in JSON schemas (specified in a request's `responseSchema` parameter). If `responseSchema` is not specified in a request, returns a plain JSON response. **Request Body (application/json):** diff --git a/README.md b/README.md index a4602c0..63d786e 100644 --- a/README.md +++ b/README.md @@ -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) -# DevExtreme DataGrid - AI Integration +# DevExtreme DataGrid - Azure OpenAI (.NET) Integration -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 a minimal 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 [AIIntegrationServer README](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/) + ## Does This Example Address Your Development Requirements/Objectives? From 76b9871c8211f14887ddb12c69fd3ae357a58e48 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 7 Jul 2026 18:16:40 +0400 Subject: [PATCH 2/6] Apply suggestions from code review Co-authored-by: Elena Khamliuk <80813840+khamlyuk@users.noreply.github.com> --- AIIntegrationServer/README.md | 10 +++++----- README.md | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/AIIntegrationServer/README.md b/AIIntegrationServer/README.md index db949bd..a519582 100644 --- a/AIIntegrationServer/README.md +++ b/AIIntegrationServer/README.md @@ -9,10 +9,10 @@ AIIntegrationServer is an API-only backend that connects [Azure OpenAI](https:// - **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 the AI assistant +- **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 -- **HTTP/HTTPS Support** - Runs on HTTP port 5005 and HTTPS port 5006 +- **HTTP/HTTPS Support** - Runs on 5005 HTTP port and 5006 HTTPS port ## Project Structure @@ -41,7 +41,7 @@ Runs chat completions for AI columns. Uses `0.7` temperature value. ### POST /api/ai/assistant -Runs chat completions for the AI assistant. Uses `0.0` temperature value. Returns responses in JSON schemas (specified in a request's `responseSchema` parameter). If `responseSchema` is not specified in a request, returns a plain JSON response. +Runs chat completions for the AI assistant. Uses `0.0` temperature value. Returns responses in JSON schemas (specified in a request `responseSchema` parameter). If `responseSchema` is not specified, returns a empty? JSON response. **Request Body (application/json):** @@ -65,9 +65,9 @@ Runs chat completions for the AI assistant. Uses `0.0` temperature value. Return } ``` -## Configuration +## Configure an AI Service -Update `appsettings.json` with your Azure OpenAI credentials: +Add your Azure OpenAI credentials to `appsettings.json`: ```json { diff --git a/README.md b/README.md index 63d786e..619168b 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ # DevExtreme DataGrid - Azure OpenAI (.NET) Integration -This example uses a minimal ASP.NET Web API backend to configure the following AI-powered [DevExtreme DataGrid](https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Overview/) features: +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/) @@ -15,7 +15,7 @@ This example uses a minimal ASP.NET Web API backend to configure the following A ## Implementation Details -The [AIIntegrationServer](/AIIntegrationServer/) backend exposes separate endpoints for AI columns and the AI Assistant: +The [AIIntegrationServer](/AIIntegrationServer/) backend exposes separate endpoints for AI columns and AI Assistant: ```js const _SERVER_URL = 'http://localhost:5005/api/ai'; @@ -61,7 +61,7 @@ const assistantAiIntegration = new DevExpress.aiIntegration.AIIntegration({ ## Run the Server -To run the backend, follow the instructions in [AIIntegrationServer README](AIIntegrationServer/README.md). +To run the backend, follow the instructions in the following README: [AIIntegrationServer](AIIntegrationServer/README.md). ## Files to Review From 5ecf1689c71952ca43d7a68ea4e31f5cd6a4d45d Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 7 Jul 2026 18:31:49 +0400 Subject: [PATCH 3/6] Update Following Feedback --- AIIntegrationServer/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/AIIntegrationServer/README.md b/AIIntegrationServer/README.md index a519582..95845ee 100644 --- a/AIIntegrationServer/README.md +++ b/AIIntegrationServer/README.md @@ -1,6 +1,6 @@ -# AIIntegrationServer +# DevExtreme DataGrid - Azure OpenAI (.NET) Integration - AIIntegrationServer -AIIntegrationServer is an API-only backend that connects [Azure OpenAI](https://azure.microsoft.com/en-us/pricing/details/azure-openai/) with AI-powered DevExtreme DataGrid features: +AIIntegrationServer is this example's API-only backend that connects [Azure OpenAI](https://azure.microsoft.com/en-us/pricing/details/azure-openai/) with 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/) @@ -41,7 +41,7 @@ Runs chat completions for AI columns. Uses `0.7` temperature value. ### POST /api/ai/assistant -Runs chat completions for the AI assistant. Uses `0.0` temperature value. Returns responses in JSON schemas (specified in a request `responseSchema` parameter). If `responseSchema` is not specified, returns a empty? JSON response. +Runs chat completions for the AI assistant. Uses `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):** @@ -67,7 +67,7 @@ Runs chat completions for the AI assistant. Uses `0.0` temperature value. Return ## Configure an AI Service -Add your Azure OpenAI credentials to `appsettings.json`: +Add your Azure OpenAI credentials to `appsettings.json`: ```json { @@ -91,4 +91,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. From 823e446fe76ff238468e1b748e82e5518af4e83b Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Wed, 8 Jul 2026 14:41:47 +0400 Subject: [PATCH 4/6] Apply suggestions from code review Co-authored-by: Elena Khamliuk <80813840+khamlyuk@users.noreply.github.com> --- AIIntegrationServer/README.md | 4 ++-- README.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/AIIntegrationServer/README.md b/AIIntegrationServer/README.md index 95845ee..df97116 100644 --- a/AIIntegrationServer/README.md +++ b/AIIntegrationServer/README.md @@ -1,6 +1,6 @@ -# DevExtreme DataGrid - Azure OpenAI (.NET) Integration - AIIntegrationServer +# DevExtreme DataGrid – Azure OpenAI Integration (.NET AIIntegrationServer) -AIIntegrationServer is this example's API-only backend that connects [Azure OpenAI](https://azure.microsoft.com/en-us/pricing/details/azure-openai/) with AI-powered DevExtreme DataGrid features: +AIIntegrationServer is an API-only backend that connects [Azure OpenAI](https://azure.microsoft.com/en-us/pricing/details/azure-openai/) with 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/) diff --git a/README.md b/README.md index 619168b..342e770 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ [![](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) -# DevExtreme DataGrid - Azure OpenAI (.NET) Integration +# DevExtreme DataGrid – Azure OpenAI Integration (.NET) 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: From ecde6bb2973a61cab350dea053b5836676d29560 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Wed, 8 Jul 2026 14:58:23 +0400 Subject: [PATCH 5/6] Add Root Readme Link --- AIIntegrationServer/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/AIIntegrationServer/README.md b/AIIntegrationServer/README.md index df97116..210b1c1 100644 --- a/AIIntegrationServer/README.md +++ b/AIIntegrationServer/README.md @@ -5,6 +5,8 @@ AIIntegrationServer is an API-only backend that connects [Azure OpenAI](https:// - [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 UI elements From d32a934e22dcd36c3aeca0e4d3f526d209942836 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Wed, 8 Jul 2026 15:53:14 +0400 Subject: [PATCH 6/6] Add Final Updates --- AIIntegrationServer/README.md | 6 +++--- README.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/AIIntegrationServer/README.md b/AIIntegrationServer/README.md index 210b1c1..2796cb9 100644 --- a/AIIntegrationServer/README.md +++ b/AIIntegrationServer/README.md @@ -1,6 +1,6 @@ # DevExtreme DataGrid – Azure OpenAI Integration (.NET AIIntegrationServer) -AIIntegrationServer is an API-only backend that connects [Azure OpenAI](https://azure.microsoft.com/en-us/pricing/details/azure-openai/) with AI-powered DevExtreme DataGrid features: +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/) @@ -39,11 +39,11 @@ AIIntegrationServer/ ### POST /api/ai/grid-column -Runs chat completions for AI columns. Uses `0.7` temperature value. +Runs chat completions for AI columns. Uses a `0.7` temperature value. ### POST /api/ai/assistant -Runs chat completions for the AI assistant. Uses `0.0` temperature value. Returns responses in JSON schemas (specified in a request `responseSchema` parameter). If `responseSchema` is not specified, returns dynamic JSON responses. +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):** diff --git a/README.md b/README.md index 342e770..50c6067 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ This example uses an ASP.NET Web API backend to configure the following AI-power ## Implementation Details -The [AIIntegrationServer](/AIIntegrationServer/) backend exposes separate endpoints for AI columns and AI Assistant: +The [AIIntegrationServer](/AIIntegrationServer/) backend exposes separate endpoints for AI columns and the AI Assistant: ```js const _SERVER_URL = 'http://localhost:5005/api/ai';