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.

# 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.”

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

# 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.
• The productivity pack – A set of exclusive premium features for the CKEditor 5 WYSIWYG editor that make editing faster, easier, and more efficient.

# 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!