New Froala Editor v5.5.0 is here – Learn More
Froala Documentation
- Froala Docs
- /
- Plugins
- /
- AI Assist Plugin
AI Assist Plugin
Plugins are fully functional during your trial once you've added your trial key to the setup.
Give your users AI writing and editing tools directly inside the Froala editor including a full chat panel, reviewable AI edits, dictation, and inline autocomplete.
Froala is provider-agnostic. We don’t ship an AI model, and we never see your content. You plug in your own provider (OpenAI, Groq, Google Gemini, Anthropic, or your own backend) with one function, and your content goes straight from the browser to the provider you chose.
To use AI features in Froala, you need to accept the AI Supplemental Terms by setting the aiSupplementalTermsAccepted option to true in your configuration.
The AI Assist plugin bundles five features. All of them share the same connection to your AI provider, so you set that up once.
-
- AI Chat Assistant A collapsible, resizable chat panel docked to the right of the editor. Users hold a real back-and-forth conversation with the AI: ask follow-up questions, summarise, brainstorm, then choose whether to put anything into the document.
- Streaming responses (the answer types itself out as it arrives)
- Context sources: the whole document, the current selection, uploaded files (PDF, DOCX, TXT, MD, images), or a reference URL.
- Web search and reasoning toggles, plus a model picker you supply. If the selected model does not support a toggle, it turns off automatically and a short notice explains why.
- “Apply to document” shows a diff of what will change before it commits
- AI Image Generation Users can describe their desired image in the AI Assist prompt, and your configured AI model returns image(s). Then users can:
- Preview the generated image in the AI Assist popup before inserting.
- Insert the image at the current cursor position.
- Regenerate to request a new variant from the same prompt.
- AI Improve Writing
Select any text and a small floating button appears. Click it, and the AI’s rewrite comes back as tracked changes. Users step through changes one at a time, or use Accept All / Reject All.
- Speech-to-Text prompting
A microphone button inside the AI prompt popup. Users dictate instead of typing; the transcript lands in the prompt box and stays editable before they send it.
- Inline suggestions (ghost text)
Gmail Smart Compose–style autocomplete. Pause at the end of a sentence and a greyed-out continuation appears at the caret. Tab accepts it, Esc dismisses it, and just carrying on typing ignores it. Nothing enters the document until Tab is pressed.
- One-click tone & translate
Select text and instantly change its tone (Professional, Casual, Friendly…) or translate it, with no prompt writing.
- AI Chat Assistant A collapsible, resizable chat panel docked to the right of the editor. Users hold a real back-and-forth conversation with the AI: ask follow-up questions, summarise, brainstorm, then choose whether to put anything into the document.
Try again button resends the user’s original question and context, flagged with
regenerate: true. This works for any backend, including ones that return images instead of text. With aiAssistEndpoint, the flag is sent in the request body as regenerate, and you can rename it through aiAssistDataKeys. Plugin options:
| aiSupplementalTermsAccepted Boolean | To use AI features in Froala, you need to accept the AI Supplemental Terms by setting this option to true in your configuration. Default: false |
| aiAssistEndpoint String | null | The API endpoint URL for AI requests. Required if not using a custom request handler. Default: null |
| aiAssistHeaders Object | Additional HTTP headers to include with AI requests (e.g., authentication tokens). Default: {} |
| aiAssistDataKeys Object | null | Custom mapping for request data keys. Use this to match your API’s expected field names. Default: null |
| aiAssistAdditionalData Object | null | Additional custom data fields to include in the request payload. Default: null |
| aiAssistResponseParserPath String | null | Path to extract the AI response from the API response object. Supports dot notation and array indexing. Default: null |
| aiAssistToneOptions Array | Defines the available tone adjustment options in the AI Shortcuts dropdown |
| aiAssistTranslateOptions Array | Defines the available translation languages in the AI Shortcuts dropdown. |
| aiAssistPromptTemplate String | The base template/instructions prepended to all AI requests. |
| aiChatWebSearchEnabled Boolean | Sets whether the web-search toggle in the AI Chat panel starts on or off. If the selected model in Default: false |
| aiChatModels Array | Defines the list of selectable AI models shown in the chat panel’s model dropdown. Default: [] |
| aiChatDefaultModel String | null | Sets which model from aiChatModels is preselected when the panel opens. Default: null |
| aiChatReasoningEnabled Boolean | Sets whether the reasoning toggle in the AI Chat panel starts on or off. If the selected model declares Default: false |
| aiChatStreamResponse Boolean | Determines whether AI Chat answers stream in gradually or appear all at once. Default: true |
| aiChatSupportedFileTypes Array | Lists the file extensions users can attach as AI Chat context. Default: [‘pdf’, ‘docx’, ‘txt’, ‘md’, ‘jpg’, ‘jpeg’, ‘png’, ‘gif’, ‘webp’] |
| aiChatMaxFileSizeMB Number | Sets the maximum size, in MB, allowed for a single attached file. Default: 20 |
| aiChatMaxFiles Number | Caps how many files can be attached to one AI Chat conversation. Default: 10 |
| aiChatRequestTimeoutMs Number | Sets how long, in milliseconds, to wait for an AI Chat response before timing out. Default: 60000 |
| aiChatIncludeReferenceUrlsInContext Boolean | Controls whether “Reference URL” context sources are also folded into the outgoing prompt text. Default: true |
| aiChatPanelWidth Number | null | Sets the initial width, in pixels, of the AI Chat panel. Default: null |
| aiChatPanelMaxWidth Number | null | Sets the maximum width, in pixels, the AI Chat panel can be resized to. Default: null (640px) |
| aiChatWelcomeMessage String | null | Overrides the intro text shown in the AI Chat panel’s empty-state welcome message. Default: null |
| aiImproveWritingPrompt String | The instruction sent to the AI backend whenever Improve Writing runs. Default: ‘Rewrite the following content to fix spelling and grammar mistakes and improve clarity, using clear and professional language, while preserving the original meaning. Return only the rewritten plain text with no HTML tags, no markdown, and no extra commentary.’ |
| selectionActionButtons Array | Lists the command buttons shown in the popup that appears when text is selected. Default: [‘aiImproveWriting’, ‘collabAddComment’] |
| inlineSuggestions Boolean | Enables Gmail-style inline “ghost text” continuation suggestions while typing. Default: true |
| inlineSuggestionsDelay Number | Sets the debounce delay, in milliseconds, before an inline suggestion is requested. Default: 120 |
| inlineSuggestionsPromptTemplate String | The prompt template sent to the AI model to generate an inline continuation suggestion. Default: ‘The text below is unfinished and the writer is about to keep typing. Continue it with a short natural phrase (a few words) made of whole, complete words. Ignore whether the last word already looks finished or not – never continue by adding more letters onto the end of it; always continue with a new, separate, complete word instead. Do not end with a period, question mark, or exclamation mark unless the sentence is clearly complete. Output only the continuation – no repetition, quotes, or markdown. If nothing fits, output nothing.’ |
| aiSpeechToText Boolean | Shows a microphone button letting users dictate their AI prompt instead of typing it. Default: true |
| aiSpeechToTextWaveform Boolean | Shows an animated “Listening…” waveform in place of the prompt input while recording. Default: true |
| aiSpeechToTextListeningText String | The label shown next to the recording waveform. Default: ‘Listening’ |
| aiSpeechToTextMaxDuration Number | Sets the maximum recording duration, in seconds, before transcription is triggered automatically. Default: 120 |
| aiAssistRequest Function | null | Custom function to handle AI requests, now able to stream via a third onChunk argument and report webSearchUsed on return. Default: null |
Plugin methods:
| aiAssist.showPromptPopup () | Opens the AI Assist prompt popup, allowing users to enter custom prompts for AI content generation. |
| aiChatAssistant.togglePanel () returns: void | Opens the AI Chat panel if it is closed, or closes it if it is open. |
| aiChatAssistant.isPanelOpen () returns: Boolean | Returns whether the AI Chat panel is currently open. |
| aiChatAssistant.sendMessage (text) returns: void | Sends a free-form prompt using the currently active context sources and the current web-search/model/reasoning state. text: The message to send. Type: String |
| aiChatAssistant.addContextSource (source) returns: Object | Promise<Object> | Adds a context source to the active conversation and returns its resolved descriptor. source: A descriptor of the shape { type: 'document' | 'file' | 'url', file?: File, url?: string }. Type: Object |
| aiChatAssistant.removeContextSource (id) returns: void | Removes a previously added context source. id: The id of the context source to remove. Type: String |
| aiChatAssistant.hasActiveConversation () returns: Boolean | Returns whether the AI Chat panel currently has an active conversation. |
| aiChatAssistant.applyToEditor (messageId) returns: void | Applies a given chat response’s text back into the document. messageId: The id of the chat message whose content should be applied. Type: String |
| aiChatAssistant.getChatHistory () returns: Array | Returns the complete AI Chat conversation so far, oldest turn first, as plain serializable records. |
| aiImproveWriting.applyExternalRewriteDirect (range, originalText, answer) returns: Boolean | Applies an externally-generated rewrite using the same word-diff/review logic as Improve Writing itself, returning false if the editor is busy or the range has gone stale. range: A live DOM Range pointing at the region of content that answer replaces, captured before the request was sent. Type: Range originalText: The plain text that range contained when the request was sent, used to detect stale content and as the diff’s before side. Type: String answer: The rewritten text returned by the AI backend, forming the diff’s after side. Type: String |
| aiAssist.requestAnswer (params, signal) returns: Promise<Object> | Sends a single buffered request to the AI backend and resolves with { answer, session_id?, webSearchUsed? }. params: The request payload, also accepting the optional webSearchEnabled, model, reasoningEnabled, files, referenceUrls, and regenerate fields. Type: Object signal: Used to cancel an in-flight request. Type: AbortSignal |
| aiAssist.requestAnswerStream (params, onChunk, signal) returns: Promise<Object> | Streaming sibling of requestAnswer, delivering raw text deltas through onChunk and resolving with { answer, session_id?, webSearchUsed? }. params: Same shape as requestAnswer‘s params. webSearchEnabled and reasoningEnabled are removed for a model that declares that capability false. Type: Object onChunk: Called with each decoded text chunk as it streams in. Type: Function signal: Used to cancel an in-flight request. Type: AbortSignal |
| aiImproveWriting.start () returns: void | Sends the current selection to the AI and opens the appropriate review UI. |
| aiImproveWriting.hasActiveSession () returns: Boolean | Returns whether a standalone (non-collaborative) review session is currently open. |
| aiImproveWriting.isInFlight () returns: Boolean | Returns whether an Improve Writing request is currently waiting for a response. |
| aiImproveWriting.hasActiveCollabReview () returns: Boolean | Returns whether the collaboration-aware review popup is currently open. |
| aiImproveWriting.acceptAllSession () returns: void | Accepts every pending change in the active standalone review session and ends it. |
| aiImproveWriting.rejectAllSession () returns: void | Rejects every pending change in the active standalone review session, restoring the original content, and ends it. |
| dockPanel.registerCoexistence (id, handlers) returns: void | Registers a panel for “only one right-docked panel open at a time” coordination with other registered panels. id: A unique id for the panel. Type: String handlers: { isOpen: () => boolean, hide: () => void }. Type: Object |
| dockPanel.unregisterCoexistence (id) returns: void | Unregisters a panel previously registered with registerCoexistence. id: The id passed to registerCoexistence. Type: String |
Plugin events:
| aiAssist.beforeInsert (event, responseContent) | Triggered before AI-generated content is inserted into the editor. ● event: The code content to be inserted. ● responseContent: The HTML content about to be inserted |
| aiAssist.afterInsert () | Triggered after AI-generated content has been successfully inserted into the editor. |
| aiAssist.chatPanelResized (payload) | Fires after the user finishes drag-resizing the AI Chat panel. ● payload: Object with the new panel |
| aiAssist.chatBeforeApply (content) | Fires before a chat response is inserted into the document; returning ● content: The text about to be inserted. |
| aiAssist.chatAfterApply | Fires after a chat response has been inserted into the document. |
| aiAssist.improveWritingStarted | Fires when an Improve Writing request is sent to the AI backend. |
| aiAssist.improveWritingResponse (answer) | Fires when the AI response for an Improve Writing request is received. ● answer: The raw rewritten text returned by the AI. |
| aiAssist.reviewStarted (sessionId) | Fires when a standalone review session opens for AI-suggested changes. ● sessionId: Identifier for the review session. |
| aiAssist.hunkResolved (payload) | Fires whenever a single change in the active review session is accepted or rejected. ● payload: Object with the resolved |
| aiAssist.reviewEnded (sessionId) | Fires when a review session ends because every change has been resolved. ● sessionId: Identifier for the review session. |
| aiAssist.beforeHunkInsert (payload) | Fires once per AI-proposed change during a collaborative Suggesting-mode review. ● payload: Object with the |
| dockPanel.opening (id) | Fires when a registered dock panel is about to become visible. ● id: The id of the panel that is opening. |
Dependencies:
The AI Assist plugin has no required dependencies. One feature has an optional one.
- Mammoth.js: only for DOCX file context
<script src=”https://cdn.jsdelivr.net/npm/mammoth@1.11.0/mammoth.browser.js”></script>
If your users will attach .docx files as AI Chat context, load Mammoth.js. It converts Word documents into HTML in the browser. (It’s the same library the Import from Word plugin uses, so if you already have that, you’re covered.)
Add Plugin to your code:
Plugin name: aiAssistIf you’re not using the pkgd bundle, include these two files individually:
- Plugin JS Script: ../js/plugins/ai_assist.min.js Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/ai_assist.min.js
- Plugin CSS link: ../css/plugins/ai_assist.min.css
Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/ai_assist.min.css