Integrating CKEditor AI with your application

// Simplified integration of the Users plugin needed for TrackChanges integration.
class UsersIntegration extends Plugin {
    static get requires() {
        return [ 'Users' ];
    }

    init() {
        const users = this.editor.plugins.get( 'Users' );

        // Just add a minimal dummy user
        users.addUser( { id: 'user-1', name: 'John Doe' } );
        users.defineMe( 'user-1' );
    }
}

ClassicEditor
    .create( editorElement, {
        licenseKey: '<YOUR_LICENSE_KEY>',

        plugins: [ AIChat, AIQuickActions, AIReviewMode, TrackChanges, UsersIntegration, /* ... */ ],

        // Extend the main editor toolbar configuration with additional buttons:
        // - 'aiQuickActions': opens the AI Quick Actions menu,
        // - 'ask-ai': moves the user focus to the AI Chat,
        // - 'improve-writing': executes the "Improve Writing" quick action.
        //
        // You can add more AI Quick actions to the toolbar configuration if needed.
        toolbar: [ 'aiQuickActions', 'ask-ai', 'improve-writing', /* ... */ ],

        // You can use the same AI feature buttons in the balloon toolbar configuration for contextual convenience.
        balloonToolbar: {
            items: [
                /* ... */

                'aiQuickActions', 'ask-ai', 'improve-writing', /* ... */
            ]
        },

        // Configure the document identifier for AI chat history and context preservation.
        // This should be a unique identifier for the document/article being edited.
        collaboration: {
            channelId: 'channelId' // Replace with your actual document ID
        },

        // Main configuration of AI feature.
        ai: {
            // ⚠️ Mandatory UI configuration.
            // Display the AI user interface in a dedicated DOM element. The interface can be also displayed
            // in an overlay or in a custom way, learn more in the next chapters of this guide.
            container: {
                type: 'sidebar',
                element: document.querySelector( '.ai-sidebar' )
            },

            // (Optional) Configure the AI Chat feature by configuring available context resources.
            chat: {
                context: {
                    // Configuration of the built-in context options.
                    document: {
                        enabled: true
                    },
                    urls: {
                        enabled: false
                    },
                    files: {
                        enabled: true
                    },

                    // (Optional) Additional sources for the AI Chat context.
                    sources: [
                        {
                            id: 'my-docs',
                            label: 'My Documents',
                            getResources: ( query?: string ) => fetchMyDocuments( query ),
                            getData: ( id ) => fetchDocumentContent( id )
                        },
                        models: {
                            defaultModelId: OpenAI,
                            modelSelectorAlwaysVisible: true,
                            displayedModels: OpenAI, Anthropic, Gemini
                        }
                    ]
                }
            },

            // (Optional) Configure the AI Quick Actions feature by adding a new command.
            quickActions: {
                extraCommands: [
                    // An action that opens the AI Chat interface for interactive conversations.
                    {
                        id: 'explain-like-i-am-five',
                        displayedPrompt: 'Explain like I am five',
                        prompt: 'Explain the following text like I am five years old.',
                        type: 'CHAT'
                    },

                    // ... More custom actions ...
                ],
            },
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        /* ... */

        collaboration: {
            channelId: 'DOCUMENT_ID'
        },

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

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ... Other configuration options ...

        ai: {
            container: {
                type: 'sidebar',

                // Existing DOM element to use as the container for the AI user interface.
                element: document.querySelector( '#ai-sidebar-container' )

                // (Optional) The preferred side for positioning the tab buttons.
                side: 'right'
            },
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ... Other configuration options ...

        ai: {
            container: {
                type: 'overlay',
                side: 'right'
            },
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ... Other configuration options ...

        ai: {
            container: {
                type: 'custom'
            },
        }
    } )
    // A custom integration of the AI user interface placing the tab buttons and panels separately in custom containers.
    .then( editor => {
        const tabsPlugin = editor.plugins.get( 'AITabs' );

        for ( const id of tabsPlugin.view.getTabIds() ) {
            const tab = tabsPlugin.view.getTab( id );

            // Display tab button and panel in a custom container.
            myButtonsContainer.appendChild( tab.button.element );
            myPanelContainer.appendChild( tab.panel.element );
        }
    } )
    .catch( /* ... */ );

import { ClassicEditor } from 'ckeditor5';
import { /* ... */, AIEditorIntegration } from 'ckeditor5-premium-features';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        licenseKey: '<YOUR_LICENSE_KEY>',
        plugins: [ AIEditorIntegration, /* ... */ ],

        // Enable the `'toggleAi'` button in the main editor toolbar.
        toolbar: [ 'toggleAi', /* ... */ ],

        ai: {
            container: {
                // ...
            },

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