June Special:  New customers get 40% off all Froala licenses
Days
Hours
Minutes
Seconds
x
Skip to content
Froala Documentation

Use AI Assist with a Standard Endpoint (Custom Request & Response Format)

AI Assist

This example shows how to connect AI Assist plugin to an API using Froala’s built-in configuration options, allowing you can define request and response formats without writing a full custom request handler.

It’s a structured approach that keeps your integration clean, flexible, and easy to maintain.

If you prefer writing a custom request handler, look at the following examples:

In This Example

Integrate Froala AI Assist with backends that already have their own request/response structures:

  • Uses built-in Froala options instead of writing a full request handler.
  • Custom data key mapping (aiAssistDataKeys) ensures the editor sends parameters in the format the API expects.
  • Additional fields appended automatically (model_version, language, etc.)
  • aiAssistResponseParserPath tells Froala where to extract the result text in a nested JSON response.

Key Points:

✔ Minimal custom code
 ✔ Flexible mapping for any backend format
 ✔ Automatic parsing of the AI-generated content

HTML

<div id="editor"></div>

JAVASCRIPT

<script>
new FroalaEditor('#editor', {
  toolbarButtons: ['aiAssist'],
  
  aiAssistEndpoint: 'https://api.example.com/v1/generate',
  
  aiAssistHeaders: {
    'X-API-Key': 'your-api-key',
    'Content-Type': 'application/json'
  },
  
  aiAssistDataKeys: {
    question: 'input_text',
    sessionId: 'thread_id',
    sessionIdValue: generateSessionId(),
    questionOrderNumber: 'turn_number'
  },
  
  aiAssistAdditionalData: {
    model_version: 'v2',
    output_format: 'html',
    language: 'en'
  },
  
  // Response format: { status: 'success', result: { output: { text: '...' } } }
  aiAssistResponseParserPath: 'result.output.text'
});
</script>

Try it yourself:

Try AI Assist in our overview demo.

Back to Examples