DevExtreme React - aiIntegration Setup

The AIIntegration type powers AI features in the following components:

DataGrid
TreeList
Form
HTML Editor

You can configure one aiIntegration property in your application and implement the variable in multiple AI-enabled DevExtreme components. Alternatively, you can configure multiple properties to define AI settings specific to individual components/features.

AI Service Provider Requirements

DevExtreme AI-powered features support all AI service providers that offer REST or client APIs. You can also use self-hosted AI agents that have access to your application's data.

Connect to an AI Service Provider

To configure AIIntegration, import the DevExtreme AI integration module into your project:

jQuery

index.html

<head>
    <!-- ... -->
    <script type="text/javascript" src="../node_modules/devextreme-dist/js/dx.ai-integration.js" charset="utf-8"></script>
    <!-- or if using CDN -->
    <script src="https://cdn.jsdelivr.net/npm/devextreme-dist@26.1.3/js/dx.ai-integration.js"></script>
</head>

To use REST APIs to connect to an AI service provider, implement the fetch API within aiIntegration.aiProvider.sendRequest:

index.js

const aiIntegration = new DevExpress.aiIntegration.AIIntegration({
    sendRequest(params) {
        const promise = fetch('https://example.org/post', {
            method: 'POST',
            headers: { ... }, // Add custom headers here, including API authentication headers
            body: JSON.stringify(params.prompt),
        }).then(async (response) => {
                const result = await response.json();

                return result.output || '';
            })

        return {
            promise,
            abort: () => {
                // Add an abort request
            },
        };
    },
});

You can also use third-party libraries to connect to an AI service provider. The following code snippet uses the OpenAI NPM package to connect to Azure OpenAI:

index.html

index.js

<head>
    <!-- ... -->
    <script type="text/javascript" src="../node_modules/openai/index.min.js" charset="utf-8"></script>
    <!-- or if using CDN -->
    <script src="https://cdn.jsdelivr.net/npm/openai/index.min.js"></script>
</head>

const deployment = 'my-deployment-name';

const aiService = new AzureOpenAI({
    dangerouslyAllowBrowser: true, // Disable in production
    deployment,
    apiVersion: 'version',
    endpoint: 'https://example.com/endpoint',
    apiKey: 'AZURE_OPENAI_API_KEY',
});

const aiIntegration = new DevExpress.aiIntegration.AIIntegration({
    sendRequest(params) {
        const aiPrompt = [
            { role: 'system', content: params.prompt.system },
            { role: 'user', content: params.prompt.user },
        ];

        const controller = new AbortController();
        const signal = controller.signal;

        const chatParams = {
            messages: aiPrompt,
            model: deployment,
            max_completion_tokens: 1024,
        }

        const promise = aiService.chat.completions.create(chatParams, { signal })
            .then((response) => response.choices[0].message?.content ?? '');

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

Angular

app.component.ts

import { AIIntegration } from 'devextreme-angular/common/ai-integration';

To use REST APIs to connect to an AI service provider, implement the HttpClient service within aiIntegration.aiProvider.sendRequest:

app.component.ts

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AIIntegration } from 'devextreme-angular/common/ai-integration';
// ...
export class AppComponent {
    constructor(private http: HttpClient) {}
    provider = {
        sendRequest: ({ prompt }) => {
            const headers = new HttpHeaders({
                // Add any custom headers here
            });

            const body = JSON.stringify({ prompt });

            const promise = this.http
                .post<{ output?: string }>('https://example.org/post', body, {
                    headers,
                    signal: controller.signal,
                })
                .toPromise()
                .then((result) => result.output || '');

            return {
                promise,
                abort: () => {
                    // Add an abort request
                },
            };
        },
    };
    aiIntegration = new AIIntegration(provider);
}

You can also use third-party libraries to connect to an AI service provider. The following code snippet uses the OpenAI NPM package to connect to Azure OpenAI:

app.component.ts

import { Component } from '@angular/core';
import { AIIntegration } from 'devextreme-angular/common/ai-integration';
import { AzureOpenAI } from 'openai';
// ...
export class AppComponent {
    private deployment = 'my-deployment-name';

    private aiService = new AzureOpenAI({
        dangerouslyAllowBrowser: true, // Disable in production
        deployment,
        apiVersion: 'version',
        endpoint: 'https://example.com/endpoint',
        apiKey: 'AZURE_OPENAI_API_KEY',
    });

    provider = {
        sendRequest: ({ prompt }) => {
            const aiPrompt = [
                { role: 'system', content: prompt.system },
                { role: 'user', content: prompt.user },
            ];

            const controller = new AbortController();
            const signal = controller.signal;

            const chatParams = {
                messages: aiPrompt,
                model: this.deployment,
                max_completion_tokens: 1024,
            };

            const promise = this.aiService.chat.completions.create(chatParams, { signal })
                .then((response) => response.choices[0].message?.content ?? '');

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

    aiIntegration = new AIIntegration(this.provider);
}

Vue

App.vue

<script setup lang="ts">
import { AIIntegration } from 'devextreme-vue/common/ai-integration';

</script>

To use REST APIs to connect to an AI service provider, implement the fetch API within aiIntegration.aiProvider.sendRequest:

App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { AIIntegration } from 'devextreme-vue/common/ai-integration';

const provider = {
    sendRequest: ({ prompt }) => {
        const headers = {
            // Add any custom headers here
        };

        const promise = fetch('https://example.org/post', {
            method: 'POST',
            headers,
            body: JSON.stringify({ prompt }),
            signal: controller.signal,
        })
            .then(async (response) => {
                const result = await response.json();
                return result.output || '';
            });

        return {
            promise,
            abort: () => {
                // Add an abort request
            },
        };
    },
};

const aiIntegration = new AIIntegration(provider);
</script>

You can also use third-party libraries to connect to an AI service provider. The following code snippet uses the OpenAI NPM package to connect to Azure OpenAI:

App.vue

<script setup lang="ts">
import { AIIntegration } from 'devextreme-vue/common/ai-integration';
import { AzureOpenAI } from 'openai';

const deployment = 'my-deployment-name';

const aiService = new AzureOpenAI({
    dangerouslyAllowBrowser: true, // Disable in production
    deployment,
    apiVersion: 'version',
    endpoint: 'https://example.com/endpoint',
    apiKey: 'AZURE_OPENAI_API_KEY',
});

const provider = {
    sendRequest: ({ prompt }) => {
        const aiPrompt = [
            { role: 'system', content: prompt.system },
            { role: 'user', content: prompt.user },
        ];

        const controller = new AbortController();
        const signal = controller.signal;

        const chatParams = {
            messages: aiPrompt,
            model: deployment,
            max_completion_tokens: 1024,
        };

        const promise = aiService.chat.completions.create(chatParams, { signal })
            .then((response) => response.choices[0].message?.content ?? '');

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

const aiIntegration = new AIIntegration(provider);
</script>

React

App.tsx

import { AIIntegration } from 'devextreme-react/common/ai-integration';

To use REST APIs to connect to an AI service provider, implement the fetch API within aiIntegration.aiProvider.sendRequest:

App.tsx

import { AIIntegration } from 'devextreme-react/common/ai-integration';

const provider = {
    sendRequest: ({ prompt }) => {
        const headers = {
            'Content-Type': 'application/json',
            // Add any custom headers here
        };

        const promise = fetch('https://example.org/post', {
            method: 'POST',
            headers,
            body: JSON.stringify({ prompt }),
            signal: controller.signal,
        })
            .then(async (response) => {
                const result = await response.json();
                return result.output || '';
            });

        return {
            promise,
            abort: () => {
                // Add an abort request
            },
        };
    },
};
const aiIntegration = new AIIntegration(provider);

You can also use third-party libraries to connect to an AI service provider. The following code snippet uses the OpenAI NPM package to connect to Azure OpenAI:

App.tsx

import { AIIntegration } from 'devextreme-react/common/ai-integration';
import { AzureOpenAI } from 'openai';

const deployment = 'my-deployment-name';

const aiService = new AzureOpenAI({
    dangerouslyAllowBrowser: true, // Disable in production
    deployment,
    apiVersion: 'version',
    endpoint: 'https://example.com/endpoint',
    apiKey: 'AZURE_OPENAI_API_KEY',
});

const provider = {
    sendRequest: ({ prompt }) => {
        const aiPrompt = [
            { role: 'system', content: prompt.system },
            { role: 'user', content: prompt.user },
        ];

        const controller = new AbortController();
        const signal = controller.signal;

        const chatParams = {
            messages: aiPrompt,
            model: deployment,
            max_completion_tokens: 1024,
        };

        const promise = aiService.chat.completions.create(chatParams, { signal })
            .then((response) => response.choices[0].message?.content ?? '');

        return {
            promise,
            abort: () => {
                controller.abort();
            },
        };
    },
};
const aiIntegration = new AIIntegration(provider);

IMPORTANT

dangerouslyAllowBrowser: true enables browser-side requests. This exposes your API key. For production, route requests through your backend.

For additional AI integration examples, refer to Overview of AI-powered Features - Demos.

Feedback

Was this page helpful?

Yes

Yes, but...

Thanks for your feedback!

DevExtreme React - aiIntegration Setup

AI Service Provider Requirements

Connect to an AI Service Provider

jQuery

Angular

Vue

React

How can we improve this page? Select one or more answers