jQuery/JS Common Types - AIProvider
An object responsible for sending requests to an AI service.
import { AIProvider } from "devextreme/common/ai-integration"
Type:
sendRequest
A function that sends a request to an AI service.
Type:
Function parameters:
params:
Request parameters.
Return Value:
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://cdnjs.cloudflare.com/ajax/libs/devextreme-dist/25.1.4/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);Feedback