AI Assistant
AI Assistant provides a way to boost your editing efficiency and creativity through the use of AI (“artificial intelligence”) powers. Users can generate new content and process the data using custom queries, or choose an action from the predefined list of commands, which you can also configure to your liking.
Unlock this feature with a CKEditor Paid Plan. Sign up for a free trial, or select the Plan that provides access to all the premium features you need.
# Demo
-
Select some content and press the “AI Commands” button
in the toolbar to get access to the most common tasks such as “Improve writing” or “Summarize.” -
Press the “AI Assistant” button
and provide your query for the AI. Here are a few ideas you might try:- ”Write a detailed guide for a one-day walking tour of Barcelona.”
- ”List the top 5 keywords related to traveling.”
- Select the table in the content below, then ask: “Fill empty cells with correct values.”
The three greatest things you learn from traveling
Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.
The real voyage of discovery consists not in seeking new landscapes, but having new eyes.
Marcel Proust
Appreciation of diversity
Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.
Top five cities to visit next year
| City | Country | Currency | Top places to visit |
|---|---|---|---|
| New York | United States | ||
| Paris | France | ||
| Tokyo | Japan | ||
| Rome | Italy | ||
| Sydney | Australia |
Improvisation
Here’s how my travel checklist looks now:
- buy a ticket
- pack the backpack
- put on a big smile
- start the adventure
Life doesn't allow us to execute every single plan perfectly. This especially seems to be the case when you travel. You plan it down to every minute with a big checklist. But when it comes to executing it, something always comes up and you’re left with your improvising skills. You learn to adapt as you go.
This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.
# UI colors (color coding)
The distinctive violet tint used in the AI Assistant’s user interface distinguishes it from other (non-AI) features within the CKEditor 5 ecosystem. This use of color coding enhances user experience and provides clear visual cues. Thanks to this, users should be able to tell which actions are AI-powered and what results they can expect.
All future AI-driven functionalities in CKEditor 5 will also use this color-coding approach. This includes possible smaller AI-related integrations in the existing features.
You can remove or customize the violet tint to meet the needs of your integration.
# Integration
AI Assistant relies on an external service to provide AI-generated responses. You will need to have access to such a service.
The feature supports integration with multiple AI API providers: OpenAI, Azure OpenAI, and Amazon Bedrock. You can also integrate it with custom models.
Read the AI Assistant integration guide to learn more.
# Customization
You can customize the feature to better fit your needs, for example:
- Change the list of the predefined commands by adding new ones or removing existing ones.
- Change the UI colors, styling, and sizes.
Read the AI Assistant configuration and styling guide to learn more.
# Data filtering in responses
The AI response will only incorporate HTML elements and features that are compatible with the editor. For instance, if an AI Assistant response contains <b>Bold text</b>, your editor needs the Bold plugin to be loaded to preserve it.
See the overview of the plugins’ HTML output to learn which features you need. You can also use the General HTML Support feature to insert custom HTML into the content.
# Query history
The AI Assistant’s custom query field has a dedicated history button 
that gives you access to your previous queries. It displays the last 20 queries and makes it possible to reuse and improve recent queries. The history is stored in the browser’s session storage. The session storage is separate for each browser tab and the browser clears it when you close the tab.
A user can also manually clear the query history by clicking the “Clear” button in the history dropdown.
# Known issues and caveats
Integration with some features
The AI Assistant feature will be inactive if the current selection contains one of the following elements: media embed, HTML embed, or table of contents.
You can overwrite the list of features where the AI Assistant is inactive by changing the config.aiAssistant.disabledElements configuration property.
Comments and suggestions
When the AI model processes the selected content, it removes all markers. That means that all comments and suggestions will be removed in the AI response.
Broken images in the responses
The AI model, if asked directly, may return image elements linking to non-existing images, which will appear broken in the response and in the editor content after being inserted.
Integration with custom features
Due to the nature of the technology behind this feature, you may get unexpected results when processing content that includes custom features that you have developed.
The AI model will try to process the HTML data according to how it was trained. However, if your feature creates a complex HTML structure or custom HTML tags, there is a higher chance that these will not be processed correctly.
If you experience problems with your custom features, you might turn off AI Assistant when they are selected by changing the config.aiAssistant.disabledElements configuration property.
# Related features
Here are some more CKEditor 5 features that can help you boost productivity:
- Automatic text transformations – Automatically change predefined text fragments into their improved forms.
# Common API
The AIAssistantUI plugin registers:
- The
'aiCommands'UI dropdown component. - The
'aiAssistant'UI button component. - The
'showAIAssistant'command.
You can execute the command to display the AI Assistant:
editor.execute( 'showAIAssistant' );
You can also display the AI Assistant and automatically submit the query to the AI service:
editor.execute( 'showAIAssistant', 'The query sent to the AI service', 'Label to display in the query field' );
# Future ideas - share your feedback!
AI Assistant is just the first step in enhancing CKEditor 5 with AI capabilities. We are committed to bringing you “the rich-text editor of tomorrow,” and below are some of our ideas on how AI can improve the content creation process:
-
Generate images based on custom prompts or the content in your document.
-
Chat with AI about the document, using a convenient UI.
-
Analyze your document with AI and get results as in-content comments.
-
Generate content using templates – customizable UI dedicated to content generation.
-
Check content quality with AI to get a summary of the quality of your writing.
If any of the potential features listed here sound interesting to you, or you have a different idea of how the AI could enhance the editing experience, let us know!
We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.
With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.