React Html Editor - AI-powered Text Editing

The DevExtreme HTML Editor supports AI-powered text editing operations. Users can initiate AI requests and insert results directly into the editor. To activate this feature, you must:

Link the HTML Editor to an AI service through the aiIntegration option.
Specify the "ai" toolbar item in the toolbar configuration.

TS JS

Backend API

import React from 'react'; import HtmlEditor, { Toolbar, ToolbarItem, Command } from 'devextreme-react/html-editor'; import { markup, extractKeywordsPrompt, aiIntegration } from './data.ts'; export default function App() { return ( <HtmlEditor height={530} defaultValue={markup} aiIntegration={aiIntegration} > <Toolbar> <ToolbarItem name="ai"> <Command name="summarize" /> <Command name="proofread" /> <Command name="expand" /> <Command name="shorten" /> <Command name="changeStyle" /> <Command name="changeTone" /> <Command name="translate" /> <Command name="askAI" /> <Command name="custom" text="Extract Keywords" prompt={extractKeywordsPrompt} /> </ToolbarItem> <ToolbarItem name="separator" /> <ToolbarItem name="undo" /> <ToolbarItem name="redo" /> </Toolbar> </HtmlEditor> ); }

import React from 'react'; import HtmlEditor, { Toolbar, ToolbarItem, Command } from 'devextreme-react/html-editor'; import { markup, extractKeywordsPrompt, aiIntegration } from './data.js'; export default function App() { return ( <HtmlEditor height={530} defaultValue={markup} aiIntegration={aiIntegration} > <Toolbar> <ToolbarItem name="ai"> <Command name="summarize" /> <Command name="proofread" /> <Command name="expand" /> <Command name="shorten" /> <Command name="changeStyle" /> <Command name="changeTone" /> <Command name="translate" /> <Command name="askAI" /> <Command name="custom" text="Extract Keywords" prompt={extractKeywordsPrompt} /> </ToolbarItem> <ToolbarItem name="separator" /> <ToolbarItem name="undo" /> <ToolbarItem name="redo" /> </Toolbar> </HtmlEditor> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import { type HtmlEditorTypes } from 'devextreme-react/html-editor'; import { AIIntegration, RequestParams, Response, } from 'devextreme-react/common/ai-integration'; import { AzureOpenAI, OpenAI } from 'openai'; type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & { content: string; }; const AzureOpenAIConfig = { dangerouslyAllowBrowser: true, deployment: 'gpt-4o-mini', apiVersion: '2024-02-01', endpoint: 'https://public-api.devexpress.com/demo-openai', apiKey: 'DEMO', }; const aiService = new AzureOpenAI(AzureOpenAIConfig); async function getAIResponse(messages: AIMessage[], signal: AbortSignal) { const params = { messages, model: AzureOpenAIConfig.deployment, max_tokens: 1000, temperature: 0.7, }; const response = await aiService.chat.completions.create(params, { signal }); const result = response.choices[0].message?.content; return result; } export const aiIntegration = new AIIntegration({ sendRequest({ prompt }: RequestParams): Response { const controller = new AbortController(); const signal = controller.signal; const aiPrompt: AIMessage[] = [ { role: 'system', content: prompt.system, }, { role: 'user', content: prompt.user, }, ]; const promise = getAIResponse(aiPrompt, signal); const result: Response = { promise, abort: () => { controller.abort(); }, }; return result; }, }); export const markup = ` <h2> <img src="../../../../images/widgets/HtmlEditor.svg" alt="HtmlEditor"> Formatted Text Editor (HTML Editor) </h2> <br> <p>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format textual and visual content and store it as HTML.</p> <p>Supported features:</p> <ul> <li>Inline formats: <ul> <li>Bold, italic, strikethrough text formatting</li> <li>Font, size, color changes (HTML only)</li> </ul> </li> <li>Block formats: <ul> <li>Headers</li> <li>Text alignment</li> <li>Lists (ordered and unordered)</li> <li>Code blocks</li> <li>Quotes</li> </ul> </li> <li>Custom formats</li> <li>Mail-merge placeholders (for example, %username%)</li> <li>Adaptive toolbar for working images, links, and color formats</li> <li>Image upload: drag-and-drop images onto the form, select files from the file system, or specify a URL.</li> <li>Copy-paste rich content (unsupported formats are removed)</li> <li>Tables support</li> </ul> `; export const extractKeywordsPrompt: HtmlEditorTypes.AICustomCommand['prompt'] = () => 'Extract a list of keywords from the text and return it as a comma-separated string';

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

import { AIIntegration } from 'devextreme-react/common/ai-integration'; import { AzureOpenAI } from 'openai'; const AzureOpenAIConfig = { dangerouslyAllowBrowser: true, deployment: 'gpt-4o-mini', apiVersion: '2024-02-01', endpoint: 'https://public-api.devexpress.com/demo-openai', apiKey: 'DEMO', }; const aiService = new AzureOpenAI(AzureOpenAIConfig); async function getAIResponse(messages, signal) { const params = { messages, model: AzureOpenAIConfig.deployment, max_tokens: 1000, temperature: 0.7, }; const response = await aiService.chat.completions.create(params, { signal }); const result = response.choices[0].message?.content; return result; } export const aiIntegration = new AIIntegration({ sendRequest({ prompt }) { const controller = new AbortController(); const signal = controller.signal; const aiPrompt = [ { role: 'system', content: prompt.system }, { role: 'user', content: prompt.user }, ]; const promise = getAIResponse(aiPrompt, signal); const result = { promise, abort: () => { controller.abort(); }, }; return result; }, }); export const markup = ` <h2> <img src="../../../../images/widgets/HtmlEditor.svg" alt="HtmlEditor"> Formatted Text Editor (HTML Editor) </h2> <br> <p>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format textual and visual content and store it as HTML.</p> <p>Supported features:</p> <ul> <li>Inline formats: <ul> <li>Bold, italic, strikethrough text formatting</li> <li>Font, size, color changes (HTML only)</li> </ul> </li> <li>Block formats: <ul> <li>Headers</li> <li>Text alignment</li> <li>Lists (ordered and unordered)</li> <li>Code blocks</li> <li>Quotes</li> </ul> </li> <li>Custom formats</li> <li>Mail-merge placeholders (for example, %username%)</li> <li>Adaptive toolbar for working images, links, and color formats</li> <li>Image upload: drag-and-drop images onto the form, select files from the file system, or specify a URL.</li> <li>Copy-paste rich content (unsupported formats are removed)</li> <li>Tables support</li> </ul> `; export const extractKeywordsPrompt = () => 'Extract a list of keywords from the text and return it as a comma-separated string';

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

.dx-htmleditor-content img { vertical-align: middle; padding-right: 10px; }

The default "ai" toolbar item includes the following predefined commands:

Summarize
Proofread
Expand
Shorten
Change style
Change tone
Translate
Ask AI assistant (allows users to run their own prompts to alter HTML Editor content)

You can also specify predefined commands to include in the "ai" item and customize standard command default options (for example, by setting a custom list of target languages for translation). Additionally, you can add a new custom command to the "ai" item by specifying your prompt. In this demo, the custom command is "Extract Keywords". For additional information, check the prompt in code.

This implementation works with selected text. If nothing is selected, the entire text is altered.