DevExtreme DataGrid – Azure OpenAI Integration (.NET)

This example uses an ASP.NET Web API backend to configure the following AI-powered DevExtreme DataGrid features:

• AI columns
• AI Assistant

Implementation Details

The AIIntegrationServer backend exposes separate endpoints for AI columns and the AI Assistant:

const _SERVER_URL = 'http://localhost:5005/api/ai';

const AI_COLUMN_URL = `${_SERVER_URL}/grid-column`;
const AI_ASSISTANT_URL = `${_SERVER_URL}/assistant`;

This example uses endpoint URLs in a factory function to configure two AIIntegration instances:

function createSendRequest(url) {
    return ({ prompt, data }) => {
        const controller = new AbortController();
        const signal = controller.signal;

        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;
            });

        return {
            promise,
            abort: () => controller.abort(),
        };
    };
}

const columnAiIntegration = new DevExpress.aiIntegration.AIIntegration({
    sendRequest: createSendRequest(AI_COLUMN_URL),
});

const assistantAiIntegration = new DevExpress.aiIntegration.AIIntegration({
    sendRequest: createSendRequest(AI_ASSISTANT_URL),
});

Run the Server

To run the backend, follow the instructions in the following README: AIIntegrationServer.

Files to Review

• AI Integration Server
  • Program.cs
  • AIIntegrationController.cs
  • AIIntegrationRequest.cs
  • AzureOpenAIOptions.cs
• Angular
  • app.component.html
  • app.component.ts
  • ai.service.ts
• React
  • App.tsx
  • service.ts
• Vue
  • App.vue
  • HomeContent.vue
  • service.ts
• jQuery
  • index.html
  • index.js
• ASP.NET Core
  • Index.cshtml
  • grid-ai-service.js
  • Program.cs

Documentation

• DataGrid - AI-Powered Features Overview
• DataGrid - AI Column
• DataGrid - AI Assistant
• AIIntegration Utility

More Examples

• DevExtreme DataGrid - AI Columns Demo
• DevExtreme DataGrid - AI Assistant Demo

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)