AI Assist - Custom Backend with Validation + Event Hooks

AI Assist

Use AI Assist with Your Own Backend (With Validation + Event Hooks)

Using the AI Assist plugin, you can generate content, adjust tone, and translate text in one click.

The AI Assist plugin is model-agnostic, offering the flexibility to integrate with any AI API and choose the provider that best fits your needs and budget.

Try it yourself:

Try AI Assist in our overview demo.

In This Example

This example shows how to route AI requests through your backend, validate responses, and control how content is inserted into the editor using event hooks.

Ideal for production setups where security, reliability, and observability matter.

In this setup, you’ll learn how to:

Send AI requests (the prompt and additional metadata (context, user ID)) through your backend instead of directly from the client
Use event hooks to control editor behavior
- aiAssist.beforeInsert — sanitize the AI content before insertion
- aiAssist.afterInsert — track AI usage or analytics
Handles HTTP errors and validates the returned response.

By the end, you’ll have a production-ready integration pattern.

HTML

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

JAVASCRIPT

<script>
new FroalaEditor('#editor', {
 toolbarButtons: ['aiAssist'],

 aiAssistRequest: async function(data, signal) {
   try {
     const response = await fetch('https://your-backend.com/api/ai', {
       method: 'POST',
       headers: {
         'Authorization': 'Bearer ' + getUserToken(),
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         prompt: data.prompt,
         context: data.context,
         user_id: getCurrentUserId()
       }),
       signal: signal
     });
    
     if (!response.ok) {
       throw new Error('AI request failed: ' + response.statusText);
     }
    
     const result = await response.json();
    
     // Validate response
     if (!result.success) {
       throw new Error(result.error || 'Unknown error');
     }
    
     return result.data.content;
    
   } catch (error) {
     console.error('AI request error:', error);
     throw error;
   }
 },

 events: {
   'aiAssist.beforeInsert': function(event, content) {
     // Sanitize content before insertion
     const sanitized = sanitizeHTML(content);
     return sanitized.length > 0;
   },
  
   'aiAssist.afterInsert': function() {
     // Track usage
     trackAIUsage('content_inserted');
   }
 }
});
</script>

Why Use a Custom Backend?

Calling AI APIs directly from the frontend can lead to:

Exposed API keys
Unvalidated or malformed responses
No visibility into usage or failures

Using a backend layer lets you:

Keep credentials secure
Enforce response validation
Log and monitor requests

This pattern is strongly recommended for real-world apps.

How It Works

The flow looks like this:

Editor triggers AI Assist
Request is sent to your backend
Backend calls the AI provider
Response is validated and cleaned
Content is inserted via event hooks

This gives you full control over the AI lifecycle.

When to Use This Pattern

Use this approach if you’re building:

SaaS editors with AI features
Internal tools with sensitive data
Apps that require logging or moderation
Any production system using AI-generated content

If you’re just prototyping, a direct API call might work.
For anything beyond that—use this setup.