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

AI Assist - Direct OpenAI API Integration

AI Assist

Use AI Assist with a Direct API Call (Fast Frontend Setup for Prototyping)

This example shows how to connect AI Assist plugin directly to an AI API from the frontend, without setting up a backend, so you can prototype in minutes.

In This Example

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.

In this example, you’ll learn how to setup AI Assist with OpenAI:
  • Uses aiAssistRequest to directly call the OpenAI Chat Completions API.
  • Sends user prompt + an initial system instruction.
  • Specifies model (gpt-4), max tokens, and temperature.
  • Returns the generated HTML content to be inserted into the editor.

Before You Start

This approach is designed for prototyping and experimentation.

Since API calls are made directly from the frontend:

  • Your API key is exposed in the client
  • Responses are not validated server-side
  • There’s limited control over usage and logging

For production apps, use a backend integration instead.

Key Points:

 ✔ Fully client-side
 ✔ Uses fetch to call OpenAI’s API
 ✔ Requires the developer to provide their own API key
 ✦ May expose API key if used in front-end code → should ideally be proxied via backend

HTML

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

JAVASCRIPT

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

 aiAssistRequest: async function(data, signal) {
   const response = await fetch('https://api.openai.com/v1/chat/completions', {
     method: 'POST',
     headers: {
       'Authorization': 'Bearer YOUR_OPENAI_API_KEY',
       'Content-Type': 'application/json'
     },
     body: JSON.stringify({
       model: 'gpt-4',
       messages: [
         {
           role: 'system',
           content: 'You are a helpful writing assistant. Always respond in valid HTML format.'
         },
         {
           role: 'user',
           content: data.prompt
         }
       ],
       max_tokens: 1000,
       temperature: 0.7
     }),
     signal: signal
   });
  
   const result = await response.json();
   return result.choices[0].message.content;
 }
});
</script>

How It Works

The flow is straightforward:

  1. User triggers AI Assist in the editor
  2. A request is sent directly to the AI API
  3. The response is returned to the browser
  4. Content is inserted into the editor

No backend required, just a direct connection.

When to Use This Approach

This setup is ideal if you’re:

  • Prototyping AI feature.
  • Testing prompts and UX flows
  • Building demos or proofs of concept
  • Exploring how AI Assist fits your product

If your goal is speed over control, this is the right approach. For production apps, use a backend integration instead.

Try AI Assist feature yourself:

Try AI Assist in our overview demo.

Back to Examples