Report an issue

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

This is a premium feature and you need a license for it on top of your CKEditor 5 commercial license. Contact us to receive an offer tailored to your needs.

You can also sign up for the CKEditor Premium Features 30-day free trial to test the feature.

# Demo

  • Select some content and press the “AI Commands” button AI Commands in the toolbar to get access to the most common tasks such as “Improve writing” or “Summarize.”

  • Press the “AI Assistant” button AI Assistant 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

A lone wanderer looking at Mount Bromo volcano in Indonesia.
Leaving your comfort zone might lead you to such beautiful sceneries like this one.

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


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

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:

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.
    Generate images using AI concept mockup

  • Chat with AI about the document, using a convenient UI.
    Chat with AI concept mockup

  • Analyze your document with AI and get results as in-content comments.
    AI content analyze using comments concept mockup

  • Generate content using templates – customizable UI dedicated to content generation.
    AI content generation concept mockup

  • Check content quality with AI to get a summary of the quality of your writing.
    AI content quality check concept mockup

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.