Vue 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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <DxHtmlEditor :value="markup" :height="530" :ai-integration="aiIntegration" > <DxToolbar> <DxToolbarItem name="ai"> <DxCommand name="summarize"/> <DxCommand name="proofread"/> <DxCommand name="expand"/> <DxCommand name="shorten"/> <DxCommand name="changeStyle"/> <DxCommand name="changeTone"/> <DxCommand name="translate"/> <DxCommand name="askAI"/> <DxCommand name="custom" text="Extract Keywords" :prompt="extractKeywordsPrompt" /> </DxToolbarItem> <DxToolbarItem name="separator"/> <DxToolbarItem name="undo"/> <DxToolbarItem name="redo"/> </DxToolbar> </DxHtmlEditor> </template> <script setup lang="ts"> import { DxHtmlEditor, DxToolbar, DxToolbarItem, DxCommand, } from 'devextreme-vue/html-editor'; import { AIIntegration } from 'devextreme-vue/common/ai-integration'; import { AzureOpenAI, OpenAI } from 'openai'; import { markup, AzureOpenAIConfig, extractKeywordsPrompt, } from './data.ts'; type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & { content: string; }; 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; } const aiIntegration = new AIIntegration({ sendRequest({ prompt }) { 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 = { promise, abort: () => { controller.abort(); }, }; return result; }, }); </script> <style> .dx-htmleditor-content img { vertical-align: middle; padding-right: 10px; } </style>

import type { DxHtmlEditorTypes } from 'devextreme-vue/html-editor'; export const AzureOpenAIConfig = { dangerouslyAllowBrowser: true, deployment: 'gpt-4o-mini', apiVersion: '2024-02-01', endpoint: 'https://public-api.devexpress.com/demo-openai', apiKey: 'DEMO', }; export const extractKeywordsPrompt: DxHtmlEditorTypes.AICustomCommand['prompt'] = () => 'Extract a list of keywords from the text and return it as a comma-separated string'; 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> `;

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!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.3/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <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.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

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.

NOTE

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