Skip to content
Froala Documentation

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.

    1. 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
      • “Apply to document” shows a diff of what will change before it commits
    2. 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.

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

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

    5. One-click tone & translate

      Select text and instantly change its tone (Professional, Casual, Friendly…) or translate it, with no prompt writing.

 

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.

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.

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, now also accepting the optional webSearchEnabled, model, reasoningEnabled, files, and referenceUrls 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.
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 width in pixels.

aiAssist.chatBeforeApply (content)

Fires before a chat response is inserted into the document; returning false cancels the insert.

● content: The text about to be inserted.

aiAssist.chatAfterApplyFires after a chat response has been inserted into the document.
aiAssist.improveWritingStartedFires 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 changeId and the action taken.

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 range the change applies to and the hunk describing it.

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: aiAssist

If you’re not using the pkgd bundle, include these two files individually:

Keyboard Shortcuts

Open AI Assist popup: Ctrl+Shift+I (Windows/Linux) or Cmd+Shift+I (Mac)

Toolbar Buttons

Open AI Assist popup: [“aiAssist”] Open AI dropdown: [“aiShortCuts”]
Back to Plugins