Skip to content

AI: Restructure & Add New Topics #8255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arman-boyakhchyan wants to merge 4 commits into
base: 25_2
Choose a base branch
from
Open

AI: Restructure & Add New Topics #8255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7366e0f
AI: Restructure & Add New Topics
arman-boyakhchyan Dec 12, 2025
b9d1cdd
Add AI Features/Overview
arman-boyakhchyan Dec 17, 2025
7a1dc2c
Add Info
arman-boyakhchyan Dec 17, 2025
ad933ae
Add Updates
arman-boyakhchyan Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion MenuConfig.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@

<MenuRule Destination="15 Common Concepts/60 Shadow DOM" SourcePattern="Howto:^Common/Shadow DOM" />

<MenuRule Destination="17 AI Features" SourcePattern="Howto:^90 AI Features" />
<MenuRule Destination="17 AI Features/00 Overview of AI-Powered DevExtreme Features" SourcePattern="Howto:^90 AI Features/00 Overview" />
Copy link

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The destination title "00 Overview of AI-Powered DevExtreme Features" is longer and more verbose than the typical pattern used in this file. Consider simplifying it to match existing conventions, such as "00 Overview" (similar to line 47: "15 Common Concepts/15 Data Validation/00 Overview") or just "Overview" (similar to line 58: "15 Common Concepts/40 Localization and Globalization/Overview").

Suggested change
<MenuRule Destination="17 AI Features/00 Overview of AI-Powered DevExtreme Features" SourcePattern="Howto:^90 AI Features/00 Overview" />
<MenuRule Destination="17 AI Features/00 Overview" SourcePattern="Howto:^90 AI Features/00 Overview" />

Copilot uses AI. Check for mistakes.

<MenuRule Destination="20 DevExtreme CLI" SourcePattern="Howto:^Common/DevExtreme CLI" />
<MenuRule Destination="25 Angular Application Template" SourcePattern="Howto:^40 Angular Components/30 Application Template" />
<MenuRule Destination="26 Vue Application Template" SourcePattern="Howto:^55 Vue Components/50 Application Template" />
Expand Down Expand Up @@ -92,7 +95,6 @@
<MenuRule Destination="90 Integration Guides/40 Azure Blob Storage Configuration" SourcePattern="Howto:^Common/Integration Guides/70 Manage Azure Blob Storage with DevExtreme Components"/>
<MenuRule Destination="90 Integration Guides/50 .NET Backend Solutions" SourcePattern="Howto:^Common/.NET Backend Solutions"/>
<MenuRule Destination="90 Integration Guides/60 Data Analytics and BI" SourcePattern="Howto:^Common/Data Analytics and BI"/>
<MenuRule Destination="90 Integration Guides/03 DevExpress MCP Server Configuration" SourcePattern="Howto:^Common/Integration Guides/05 DevExpress MCP Server Configuration"/>
<MenuRule Destination="90 Integration Guides/99 Migrate from DevExtreme Reactive" SourcePattern="Howto:^50 React Components/65 Migrate from DevExtreme Reactive" VisibleFor="React" />

<MenuRule Destination="10 UI Components/zz Common Types" SourcePattern="ApiReference:^40 Common Types" />
Expand Down
1 change: 1 addition & 0 deletions concepts/90 AI Features/00 Overview/00 Overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
DevExtreme ships with multiple AI-powered capabilities. You can implement any large language model (LLM) that offers REST/client APIs to activate these capabilities. This includes dedicated AI service providers, as well as self-hosted AI agents.
6 changes: 6 additions & 0 deletions concepts/90 AI Features/00 Overview/10 AI-Powered DevExtreme Features.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
DevExtreme includes the following AI-powered features:

- DataGrid/TreeList - AI Columns
- Form - Smart Paste
- HTML Editor - AI-Powered Text Editing
- Chat - Integration with AI Assistants
6 changes: 6 additions & 0 deletions concepts/90 AI Features/10 aiIntegration Setup/00 aiIntegration Setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
The aiIntegration type powers AI features in the following components:

- DataGrid
- Form
- HTML Editor
- TreeList
1 change: 1 addition & 0 deletions ...ts/90 AI Features/10 aiIntegration Setup/10 AI Service Provider Requirements.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
DevExtreme AI-Powered features support all AI service providers that offer REST or client APIs. This includes self-hosted AI agents.
161 changes: 161 additions & 0 deletions ...s/90 AI Features/10 aiIntegration Setup/20 Connect to an AI Service Provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
To use [aiIntegration]() within your project, import the type as follows:

---
##### jQuery

<!-- tab: 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/cdnjs_version/js/dx.ai-integration.js"></script>
</head>

To connect to an AI service provider using REST APIs, implement the [fetch API]() to define an AI request in the [sendRequest]() function within **aiIntegration**.**aiProvider**. Use the **fetch** promise within the [Request]() object returned by **sendRequest** as follows:

<!-- tab: 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

<!-- tab: app.component.ts -->
import { AIIntegration } from 'devextreme-angular/common/ai-integration';

aaa

<!-- tab: 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

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

</script>

aaa

<!-- tab: 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

<!-- tab: App.tsx -->
import { AIIntegration } from 'devextreme-react/common/ai-integration';

aaa

<!-- tab: 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);

---
Empty file added ...90 AI Features/10 aiIntegration Setup/30 Minimal aiIntegration Configuration.md
View file
Open in desktop
Empty file.
Empty file added concepts/90 AI Features/10 aiIntegration Setup/40 Specify a System Prompt.md
View file
Open in desktop
Empty file.
Empty file added ...pts/90 AI Features/10 aiIntegration Setup/50 Process Data and Abort Requests.md
View file
Open in desktop
Empty file.
0 ...00 DevExpress MCP Server Configuration.md → ...00 DevExpress MCP Server Configuration.md
View file
Open in desktop
File renamed without changes.
0 ...n/10 Why Use the DevExpress MCP Server.md → ...n/10 Why Use the DevExpress MCP Server.md
View file
Open in desktop
File renamed without changes.
0 ...tion/20 Prerequisites and Installation.md → ...tion/20 Prerequisites and Installation.md
View file
Open in desktop
File renamed without changes.
0 ...r Configuration/30 Custom Instructions.md → ...r Configuration/30 Custom Instructions.md
View file
Open in desktop
File renamed without changes.
Loading