Vue Common Types - AIProvider

An object responsible for sending requests to an AI service.

import { AIProvider } from "devextreme/common/ai-integration"
Type:

Object

sendRequest

A function that sends a request to an AI service.

Type:

Function

Function parameters:
params:

RequestParams

Request parameters.

Return Value:

Response

An object with AI response.

jQuery
index.js
index.html
const aiIntegration = new DevExpress.aiIntegration({
    sendRequest({ prompt }) {
        const promise = fetch('https://example.org/post', {
            method: 'POST',
            headers: { 
                // Add any custom headers here
             },
            body: JSON.stringify({ prompt }),
        })
            .then(async (response) => {
                const result = await response.json();

                return result.output || '';
            })

        return {
            promise,
            abort: () => {
                // Add an abort request
            },
        };
    },
});
<head>
    <!-- ... -->
    <script type="text/javascript" src="../artifacts/js/dx.ai-integration.js" charset="utf-8"></script>
    <!-- or if using CDN -->
    <script src="https://unpkg.com/devextreme-dist@25.2-next/dist/js/dx.ai-integration.js"></script>
</head>
Angular
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 { 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';

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