DevExtreme Vue - 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="../artifacts/js/dx.ai-integration.js" charset="utf-8"></script>
    <!-- or if using CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/devextreme-dist/25.2.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({
    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
            },
        };
    },
});
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);
}
Vue
App.vue
<script lang="ts" setup>
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 lang="ts" setup>
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>
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);