# AI Assistant (legacy)

> **Important**
>
> AI Assistant is now a legacy feature: maintained for existing customers, but no longer actively developed.
>
> [CKEditor AI](../ckeditor-ai-overview.md) is a separate product with a much broader feature set, including a more advanced interface, dedicated interactions, [MCP support](../ckeditor-ai-mcp.md), [programmatic control](../ckeditor-ai-programmatic.md), and much more. It is available as a [Cloud (SaaS) or on-premises deployment](../ckeditor-ai-deployment.md).

AI Assistant provides a way to boost your editing efficiency and creativity through the use of AI (“artificial intelligence”) capabilities. 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 selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

<a id="demo">

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

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../../../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="ui-colors-color-coding">

## UI colors (color coding)

The distinctive violet tint used in the AI Assistant’s user interface sets it apart 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 can easily 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](ai-assistant-integration.md#removing-the-violet-tint-from-the-ui) or [customize](ai-assistant-integration.md#using-custom-colors-for-the-ui) the violet tint to meet the needs of your integration.

<a id="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 AI API providers: OpenAI and Azure OpenAI. You can also integrate it with custom models.

Read the AI Assistant [integration guide](ai-assistant-integration.md) to learn more.

<a id="customization">

## 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](ai-assistant-integration.md#configuration-and-styling) to learn more.

<a id="data-filtering-in-responses">

## 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`](../../../api/module_basic-styles_bold-Bold.md) plugin to be loaded to preserve it.

> **Note**
>
> See the overview of the [plugins’ HTML output](../../../framework/architecture/plugins.md#plugins-and-html-output) to learn which features you need. You can also use the [General HTML Support feature](../../html/general-html-support.md) to insert custom HTML into the content.

<a id="query-history">

## 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](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage). 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.

<a id="known-issues-and-caveats">

## 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.ai.assistant.disabledElements`](../../../api/module_ai_aiassistant_aiassistant-AIAssistantConfig.md#member-disabledElements) configuration property.

**Comments and suggestions**

When the AI model processes the selected content, it removes all markers. This means 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.ai.assistant.disabledElements`](../../../api/module_ai_aiassistant_aiassistant-AIAssistantConfig.md#member-disabledElements) configuration property.

<a id="related-features">

## Related features

Here are some more CKEditor 5 features that can help you boost productivity:

* [CKEditor AI](../ckeditor-ai-overview.md) – CKEditor AI provides a way to boost your editing efficiency and creativity through the use of AI.
* [Automatic text transformations](../../text-transformation.md) – Automatically change predefined text fragments into their improved forms.

<a id="common-api">

## Common API

The [`AIAssistantUI`](../../../api/module_ai_aiassistant_aiassistantui-AIAssistantUI.md) plugin registers:

* The `'aiCommands'` UI dropdown component.
* The `'aiAssistant'` UI button component.
* The [`'showAIAssistant'` command](../../../api/module_ai_aiassistant_ui_showaiassistantcommand-ShowAIAssistantCommand.md).

You can execute the command to display the AI Assistant:

```js
editor.execute( 'showAIAssistant' );
```

You can also display the AI Assistant and automatically submit the query to the AI service:

```js
editor.execute( 'showAIAssistant', 'The query sent to the AI service', 'Label to display in the query field' );
```

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../../../framework/development-tools/inspector.md) 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.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../../llms.txt)