AI Quick Actions

AI Quick Actions streamline routine content transformations by offering one-click AI-powered suggestions directly within the editor. You can also ask questions about your selected text in the Chat to get instant AI insights and analysis. This feature enhances speed, relevance, and usability, particularly for repeatable or simple tasks. The feature comes with an easy-to-use window interface but can also act as a conversation starter with the Chat.

To start using the Quick actions feature, first load the AIQuickActions plugin in your editor configuration. Learn more about installing and enabling AI features.

Then, you can add the menu that opens the list of Quick actions ('aiQuickActions') to your main toolbar and/or balloon toolbar configurations. To learn more about toolbar configuration, refer to the toolbar configuration guide.

Finally, you can also add individual Quick actions to the toolbar as shortcuts for even easier access. For example, you can add the 'ask-ai' button, or the 'improve-writing' button (find it in the demo above). You can add whole categories to the toolbar, too. Learn more about available actions.

The final example configuration looks as follows:

ClassicEditor
    .create( editorElement, {
        /* ... */

        plugins: [ AIQuickActions, /* ... */ ],

        ai: {
            /* ... */
        },

        // Adding Quick action to the main editor toolbar.
        toolbar: [
            // The main Quick actions button
            'aiQuickActions',

            // Two individual actions
            'ask-ai',
            'improve-writing',

            // Whole action category
            'translate',

            /* ... */
        ],

        // Adding Quick Actions to the balloon toolbar. Since some of the actions are selection-sensitive,
        // accessing them might be easier for users using this kind of toolbar.
        balloonToolbar: {
            items: [
                // The main Quick actions button
                'aiQuickActions',

                // Two individual actions
                'ask-ai',
                'improve-writing',

                // Whole action category
                'translate',

                /* ... */
            ],
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

There are two types of actions available in the Quick actions feature:

• Some actions, for instance, “Ask AI” or “Summarize”, lead to the Chat interface with selected text added as context. The former will just open the Chat and allow you to start typing your message. The latter, however, will not only open the Chat but also start the conversation for your current editor selection right away, and expect a summary of that selection from the AI.

• Executing other actions like “Continue writing” or “Make shorter” will open the window interface conveniently right next to your selection and present the answers from the AI for you to accept or reject them.

You can define the behavior of each action when you create custom ones.

By default, the Quick actions feature includes several built-in actions that speed up the content editing process. All Quick actions can be accessed through the menu button ('aiQuickActions') but also individually when handpicked by the integrator in the editor toolbar configuration. You can add the whole action categories to the toolbar too.

Keep in mind that you can add custom actions to the list and remove defaults.

Here’s the full list of available actions:

• 'ask-ai',
• “Chat commands” category ('chat-commands')
  • 'explain',
  • 'summarize',
  • 'highlight-key-points',
• 'improve-writing',
• 'continue',
• 'fix-grammar',
• “Adjust length” category ('adjust-length')
  • 'make-shorter',
  • 'make-longer',
• “Change tone” category ('change-tone')
  • 'make-tone-casual',
  • 'make-tone-direct',
  • 'make-tone-friendly',
  • 'make-tone-confident',
  • 'make-tone-professional',
• “Translate” category ('translate')
  • 'translate-to-english',
  • 'translate-to-chinese',
  • 'translate-to-french',
  • 'translate-to-german',
  • 'translate-to-italian',
  • 'translate-to-portuguese',
  • 'translate-to-russian'

The config.ai.quickActions.extraCommands property allows you to add new commands to the AI Quick Actions feature. Below, you will find an example of three extra actions added to the user interface: two of them open the quick actions window, but the last one interacts with the Chat. Learn more about types of actions.

ClassicEditor
    .create( editorElement, {
        /* ... */

        plugins: [ AIQuickActions, /* ... */ ],

        ai: {
            quickActions: {
                extraCommands: [
                    {
                        id: 'add-quote-from-famous-person',
                        displayedPrompt: 'Add a quote from a famous person',
                        prompt: 'Add a quote from a known person, which would make sense in the context of the selected text.',
                        type: AIQuickActionType.ACTION,
                        model: 'claude-4-sonnet'
                    },
                    {
                        id: 'summarize-in-bullet-points',
                        displayedPrompt: 'Summarize in 5 bullet points',
                        prompt: 'Summarize the selected text in 5 bullet points.',
                        type: AIQuickActionType.CHAT
                    },
                    {
                        id: 'include-more-sarcasm',
                        displayedPrompt: 'Rewrite adding more sarcasm',
                        prompt: 'Rewrite using a sarcastic tone.',
                        type: AIQuickActionType.ACTION,
                        model: 'claude-4-sonnet'
                    }

                    // ... More commands ...
                ],
            },

            /* ... */
        }
    } )
    .then( ... )
    .catch( ... );

The config.ai.quickActions.removeCommands property allows you to remove existing commands from the AI Quick Actions feature. Here’s an example that removes two actions (”Explain” and “Summarize”):

ClassicEditor
    .create( editorElement, {
        /* ... */

        plugins: [ AIQuickActions, /* ... */ ],

        ai: {
            quickActions: {
                removeCommands: [
                    'explain',
                    'summarize',

                    // ... More commands to remove ...
                ]
            },

            /* ... */
        }
    } )
    .then( ... )
    .catch( ... );