Notion does it. Linear does it. GitHub does it. Users now expect to type / and get an instant menu of content options. If you are integrating Froala V5 into your app, you can build the same experience from scratch using Froala’s keyup event, its html.insert() method, and a custom-rendered dropdown. No third-party library required.

In this tutorial, you’ll learn how to add a fully functional slash command menu to Froala Editor. We’ll build it from scratch, explaining every decision so you understand not just what the code does, but why.

By the end, you’ll have a clean, keyboard-friendly command menu that works reliably with Froala’s contenteditable surface.

Key Takeaways

• Froala V5 does not ship a native slash command menu, but its event and methods API gives you everything you need to build one.
• You intercept the / keystroke using the keyup event, then render and position a custom dropdown relative to the cursor.
• Each menu item calls editor.html.insert() or a native Froala command to inject content at the correct position.
• Proper cleanup (removing the / trigger character, dismissing the menu on Escape or blur) is critical for a polished UX.

Prerequisites

To follow along, you need:

• Basic knowledge of HTML, CSS, and JavaScript
• Familiarity with Froala Editor (initialization and events)
• A Froala license key (or use the trial)

We’ll use the official CDN for simplicity.

The Complete Approach

The implementation has three main responsibilities:

1. Detect when the user types / at the start of a line
2. Render a filtered, keyboard-navigable menu
3. Execute the chosen action and clean up the trigger character

See the full, working implementation on JSFiddle. You can read the complete code with inline comments explaining every non-obvious decision, and test it live in your browser by typing / in the editor.

Let’s break down the code section by section.

1. HTML Structure

<div id="editor-container">
<div id="froala-editor">    <p>Type <strong>/</strong> at the start of a new line to open the command menu.</p>  </div>
</div>
<div id="slash-menu"></div>

The editor lives in its own container for easy styling. The #slash-menu element is placed outside the editor so it can be positioned absolutely relative to the viewport.

2. Styling the Menu

The CSS creates a clean, Notion-style dropdown:

• Fixed width (260px) with max-height and scrolling
• Category headers in uppercase
• Icon + title + description layout
• Hover and .is-active states for keyboard navigation
• Subtle shadows and borders for depth

These styles are intentionally decoupled from Froala’s theme so you can easily adapt them.

/* ─── Slash Command Menu Styles ─────────────────────────────── */
    #slash-menu {
      position: absolute;
      z-index: 9999;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      width: 260px;
      max-height: 320px;
      overflow-y: auto;
      display: none; /* Hidden by default */
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    #slash-menu .slash-menu-header {
      padding: 8px 12px 4px;
      font-size: 11px;
      font-weight: 600;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    #slash-menu .slash-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      cursor: pointer;
      transition: background 0.1s ease;
    }

    #slash-menu .slash-menu-item:hover,
    #slash-menu .slash-menu-item.is-active {
      background: #f1f5f9;
    }

    #slash-menu .slash-menu-item .item-icon {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }

    #slash-menu .slash-menu-item .item-text .item-title {
      font-size: 13px;
      font-weight: 500;
      color: #1e293b;
      line-height: 1.3;
    }

    #slash-menu .slash-menu-item .item-text .item-description {
      font-size: 11px;
      color: #94a3b8;
      line-height: 1.3;
    }

    /* Editor wrapper */
    #editor-container {
      max-width: 800px;
      margin: 40px auto;
      padding: 0 20px;
    }

3. Defining the Command Data

const SLASH_COMMANDS = [
  {
    category: 'Text',
    items: [
      { id: 'paragraph', title: 'Text', description: 'Plain paragraph', icon: '¶', action: ... },
      ...
    ]
  },
  ...
];

This data structure is the heart of the feature. Each item contains:

• id: Used for potential future features (like analytics)
• title and description: Displayed in the UI
• icon: Simple visual indicator
• action: A function that receives the editor instance

Why separate actions from the UI? It keeps the data declarative. You can later load commands from an API or allow users to customize them without touching the rendering logic.

4. State Management

let menuVisible = false;
let activeIndex = 0;
let flatItems = [];
let editorInstance = null;

We maintain minimal state:

• menuVisible controls visibility logic
• activeIndex tracks which item is highlighted for keyboard navigation
• flatItems holds the currently visible (filtered) items with their DOM references
• editorInstance gives us access to Froala methods inside event handlers

5. Building the Menu DOM (buildMenu)

This function is called every time the user types after a /.

function buildMenu(filter) {
  menuEl.innerHTML = '';
  flatItems = [];

  const term = (filter || '').toLowerCase();

  SLASH_COMMANDS.forEach(function(group) {
    const filtered = group.items.filter(item =>
      item.title.toLowerCase().includes(term) ||
      item.description.toLowerCase().includes(term)
    );

    if (filtered.length === 0) return;

    // Create category header
    // Create item rows with click handlers
    // Push to flatItems
  });
}

Key details explained:

• We flatten the data while respecting categories
• Filtering happens on both title and description
• We use mousedown instead of click on menu items. This is critical because click fires after blur, which would close the menu before the selection logic runs.

6. Positioning the Menu

function positionMenu() {
  const range = window.getSelection().getRangeAt(0).cloneRange();
  range.collapse(true);
  const rect = range.getBoundingClientRect();
  // Calculate top and left using scroll offsets
}

We use getBoundingClientRect() on a collapsed range to get the cursor’s exact position. This is more reliable than trying to measure the editor’s internal elements.

We also add a small horizontal boundary check so the menu doesn’t overflow the viewport.

7. Detecting the Slash Trigger (getSlashTriggerText)

This is the most important logic function:

function getSlashTriggerText() {
  const text = node.textContent.slice(0, range.startOffset);
  const slashIndex = text.lastIndexOf('/');
  
  if (slashIndex === -1) return null;
  
  const beforeSlash = text.slice(0, slashIndex).trim();
  if (beforeSlash.length > 0) return null;
  
  return text.slice(slashIndex + 1);
}

Why this logic matters:

• We only trigger when / is the first non-whitespace character on the current line
• We extract everything after / as the filter term
• This prevents the menu from appearing when someone types “hello/world”

8. Cleaning Up the Trigger Character (selectItem)

When the user selects a command, we must remove the / (and any filter text) before inserting the new content:

const text = node.textContent;
const slashIndex = text.lastIndexOf('/');
node.textContent = text.slice(0, slashIndex) + text.slice(range.startOffset);

We then recreate the range and place the cursor back where the / was. This is delicate work because we’re manually editing a text node inside a contenteditable area.

After cleanup, we call the item’s action function and restore focus to the editor.

9. Froala Event Integration

The real power comes from hooking into Froala’s events:

events: {
  'keyup': function(e) { ... },
  'keydown': function(e) { ... },
  'blur': function() { ... }
}

keyup handler responsibilities:

• Ignore modifier keys
• Handle Escape to close the menu
• Manage arrow keys and Enter when the menu is visible
• Check for the slash trigger on every keystroke

keydown handler:

• Prevents default behavior for Enter and arrow keys when the menu is open
• This stops Froala from inserting a new paragraph when the user is just navigating the menu

blur handler:

• Uses a small setTimeout (150ms) so that mousedown events on menu items have time to fire first

10. Keyboard Navigation

We maintain a flat list of visible items. Arrow keys simply increment/decrement activeIndex and call highlightItem().

highlightItem does two things:

1. Toggles the is-active class
2. Calls scrollIntoView({ block: 'nearest' }) so long menus scroll automatically

This creates a smooth experience similar to native dropdowns.

Full Flow Summary

1. User types / at the start of a line
2. keyup detects the trigger via getSlashTriggerText()
3. showMenu() builds filtered DOM and positions it
4. User can type to filter, use arrows to navigate, or click
5. On selection, we remove the / text, execute the action, hide the menu, and refocus

Extending the Menu

Adding new content types requires only adding a new object to SLASH_COMMANDS. Here is a file upload entry as an example:

{
  id: 'file',
  title: 'File',
  description: 'Attach a file',
  icon: '📎',
  action: function (editor) {
    // Trigger Froala's native file upload dialog
  }
}

You can also add dynamic items, such as loading a list of page templates from your API and appending them into the menu on the fly inside buildMenu.

Important Gotchas and Solutions

Making It Production-Ready

Here are several improvements you can add:

1. Better table insertion: Use Froala’s insertTable command instead of raw HTML when possible
2. Command shortcuts: Add keyboard shortcuts (e.g., /h1)
3. Icons: Replace text icons with SVG or Font Awesome for polish
4. Async commands: Support commands that open modals (image upload, etc.)
5. Accessibility: Add role="listbox" and aria-activedescendant
6. Debouncing : The current implementation rebuilds on every key. For very large command sets, add light debouncing

Alternative Approaches

You could also implement this using:

• A separate library like Tippy.js for positioning
• MutationObserver instead of key events (more complex)

The manual approach shown here gives you maximum control and works without additional dependencies.

Conclusion

Building a slash command menu teaches you several valuable skills:

• Working with Selection and Range APIs
• Managing state between a rich text editor and custom UI
• Handling the timing quirks of contenteditable elements
• Creating accessible, keyboard-first interfaces

The code is deliberately kept simple and self-contained so you can understand every line. Once you’re comfortable with the core mechanics, you can extend it with custom commands, better styling, or integration with your own design system.

Try it now: Paste the vanilla JS example into a local HTML file, add your license key, and open it in a browser. Type / at the start of a blank line to see the menu in action.

FAQ

Does Froala V5 have a built-in slash command menu?

No. Froala’s Quick Insert plugin shows a + button on empty lines and is triggered by the cursor position, not by typing /. The slash command UX in this guide is a custom layer built on top of Froala’s public API.

Will this break Froala’s built-in Quick Insert plugin?

No. The two features are independent. You can run both simultaneously if you want. The quickInsertEnabled option controls the + button behavior and is unrelated to the keyup event handler you are adding.

Can I add custom icons using SVG instead of emoji?

Yes. Replace the icon string in any SLASH_COMMANDS item with an SVG string, and update the .item-icon container’s innerHTML assignment in buildMenu accordingly.

How do I filter commands server-side or asynchronously? Modify buildMenu to be async and replace the SLASH_COMMANDS.forEach block with an await fetch(...) call. Pass the filter string as a query parameter. Show a loading spinner in the menu while the request is in flight.

How do I handle the slash command in Angular?

The pattern is identical. Inject the Froala config object with the same events block into your @Input() editorConfig. Access the editor instance from the initialized callback and store it in a component property. All other logic (DOM manipulation for the dropdown, text node traversal) lives in separate service methods.

What happens if the user types “/” and then presses Backspace?

The keyup handler fires after the Backspace. getSlashTriggerText re-evaluates the current text node. If the “/” has been deleted, slashIndex will be -1 and the function returns null, which triggers hideMenu(). The menu disappears automatically.

In a previous article, we explored the flexibility and various setup approaches for the Froala AI Assist plugin across different frontend and backend configurations. This article provides a practical walkthrough for integrating Froala AI Assist in React and connecting it to Claude through an Express backend server.

Key Takeaways

• Froala AI Assist provides a pre-built chat interface for integrating AI into a rich text editor
• Routing AI requests through a backend server protects your API credentials from exposure
• This tutorial covers a complete React + Express + Claude integration with production-ready security
• The setup maintains full context across user sessions, enabling iterative refinement of generated content

How it Works

The Froala AI Assist plugin provides a pre-built interface for integrating your preferred AI model into a rich text editor. The editor includes a toolbar button that opens a chat popup where users can submit prompts. When a user submits a prompt, Froala sends it to an endpoint you configure via the aiAssistEndpoint option.

While you could configure this endpoint to point directly to Claude’s API, doing so would expose your API credentials in the frontend—a significant security risk.

For production environments, the recommended approach is to route requests through a backend server. This server acts as a middleware layer: it receives prompts from Froala, forwards them securely to Claude, and returns the response back to the editor for display.

In this tutorial, we’ll build this backend server using Node.js and Express, ensuring your API keys remain protected while maintaining full functionality.

Prerequisites and Setup

Before you begin, ensure your development environment is configured for a React and Express integration.

Frontend Requirements

• An existing React project
• Understanding of React components, hooks, and event handling
• Froala Editor installed and properly licensed

Backend Requirements

• Node.js and npm installed
• Familiarity with Express routing and middleware concepts

Setup Froala In React

Installation

Begin by installing the Froala React component in your project:

npm install react-froala-wysiwyg --save

Create the Editor Component

Create a new React component file for the Froala editor. Import the necessary CSS files and the Froala component:

import React from "react";
import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";
import 'froala-editor/js/plugins.pkgd.min.js';
import FroalaEditorComponent from "react-froala-wysiwyg";

function AIEditorComponent() {
    const config = {
        heightMin: 300,
        aiSupplementalTermsAccepted: true,
        aiAssistEndpoint: 'http://localhost:5000/ai-assist',
        aiAssistHeaders: {
            'Content-Type': 'application/json'
        },
        aiAssistAdditionalData: {
            model: 'claude-opus-4-7',
            token: 20000
        },
        aiAssistResponseParserPath: 'content',
    };

    return (
        <div className="editor">
            <h3>Froala's React WYSIWYG Editor</h3>
            <FroalaEditorComponent tag="textarea" config={config} />
        </div>
    );
}

export default AIEditorComponent;

Configuration Breakdown

The config object controls the editor’s behavior and AI integration:

• heightMin: Sets the minimum height of the editor to 300 pixels, ensuring adequate space for content creation.
• aiSupplementalTermsAccepted: Enables AI features by confirming acceptance of supplemental terms.
• aiAssistEndpoint: Points to your Express backend server at http://localhost:5000/ai-assist. Froala sends user prompts to this endpoint for processing.
• aiAssistHeaders: Specifies the request headers. The Content-Type: application/json header tells the server to expect JSON-formatted data.
• aiAssistAdditionalData: Passes metadata to your backend, including the Claude model identifier and token limit (20,000 tokens) for response generation.
• aiAssistResponseParserPath: Tells Froala where to find the AI response in the server’s JSON reply. The value 'content' means the response text is located at response.content.

Integrate Into Your Application

Import the component into your main App.js file and render it:

import './App.css';
import AIEditorComponent from "./components/AIEditorComponent";

function App() {
  return (
    <div className="App">
      <AIEditorComponent />
    </div>
  );
}

export default App;

Run Your Application

Start the development server with:

npm start

Your React application will launch locally with the Froala editor fully integrated and ready to communicate with your backend AI service.

Setup Node.js Server

This section walks you through creating a backend server that securely handles AI requests from Froala and communicates with Claude’s API.

Install Required Dependencies

Start by installing the necessary npm packages for your Express server:

npm install express cors dotenv @anthropic-ai/sdk

Here’s what each package does:

• express: Web framework for building the server and defining routes
• cors: Middleware to enable Cross-Origin Resource Sharing, allowing your React frontend to communicate with the backend
• dotenv: Loads environment variables from a .env file
• @anthropic-ai/sdk: Official SDK for interacting with Claude’s API

Configure Environment Variables

Create a .env file in your project root to securely store sensitive credentials:

ANTHROPIC_API_KEY=your_api_key_here

PORT=5000

Replace your_api_key_here with your actual Anthropic API key. The PORT variable specifies where your server will listen for incoming requests.

Important: Add .env to your .gitignore file to prevent accidentally committing API keys to version control.

Enable ES Module Support

Update your package.json to use ES modules (modern JavaScript import syntax):

{

  "type": "module"

}

This allows you to use import statements instead of older require() syntax throughout your server code.

Create the Express Server

Create a new file (e.g., server.js or index.js) with the following code:

import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
import Anthropic from '@anthropic-ai/sdk';

dotenv.config();

const app = express();

app.use(cors());
app.use(express.json());

const anthropic = new Anthropic({
    apiKey: process.env.ANTHROPIC_API_KEY,
});

app.post('/ai-assist', async (req, res) => {
    try {
        const { question, model, token } = req.body;

        const response = await anthropic.messages.create({
            model,
            max_tokens: token,
            messages: [
                {
                    role: 'user',
                    content: question,
                },
            ],
        });

        const result = response.content[0]?.text || '';

        res.json({
            content: result,
        });
    } catch (error) {
        console.error(error);

        res.status(500).json({
            error: 'AI request failed',
        });
    }
});

app.listen(process.env.PORT || 5000, () => {
    console.log(`Server running on port ${process.env.PORT || 5000}`);
});

Code Breakdown

Initialization

dotenv.config();

const app = express();

The dotenv.config() call loads your environment variables from the .env file. The express() function creates your Express application instance.

Middleware Configuration

app.use(cors());

app.use(express.json());

• cors(): Enables cross-origin requests, allowing your React frontend (running on a different port) to communicate with this backend server
• express.json(): Automatically parses incoming JSON request bodies, making form data accessible via req.body

Claude Client Initialization

const anthropic = new Anthropic({

    apiKey: process.env.ANTHROPIC_API_KEY,

});

This initializes the Anthropic SDK with your API key from the environment variables, creating a reusable client for all Claude API calls.

The /ai-assist Route

app.post('/ai-assist', async (req, res) => {

    const { question, model, token } = req.body;

This defines a POST endpoint that receives three parameters from Froala:

• question: The user’s prompt (or formatted question with context instructions)
• model: The Claude model identifier (e.g., claude-opus-4-7)
• token: The maximum number of tokens Claude should generate

Calling Claude’s API

const response = await anthropic.messages.create({
    model,
    max_tokens: token,
    messages: [
        {
            role: 'user',
            content: question,
        },
    ],
});

This sends the user’s question to Claude with the specified model and token limit. The messages array follows Claude’s expected format: an array of message objects with role (either user or assistant) and content (the message text).

Processing the Response

const result = response.content[0]?.text || '';

res.json({

    content: result,

});

Claude returns a response object with a content array. The optional chaining operator (?.) safely accesses the text from the first content item, defaulting to an empty string if unavailable. The response is then returned to Froala in the expected JSON format with a content key (as configured in your React component’s aiAssistResponseParserPath).

Error Handling

catch (error) {

    console.error(error);

    res.status(500).json({

        error: 'AI request failed',

    });

}

If any error occurs during the API call, the server logs it to the console and returns a 500 status code with an error message to the client.

Starting the Server

app.listen(process.env.PORT || 5000, () => {

    console.log(`Server running on port ${process.env.PORT || 5000}`);

});

This starts the Express server on the port specified in your .env file, or defaults to port 5000.

Run the Server

Execute the following command to start your backend:

node index.js

You should see the confirmation message:

Server running on port 5000

Your backend is now ready to receive requests from your React frontend and forward them securely to Claude.

Test the App

1. Open AI Assist: Click the AI Assist button in the Froala editor toolbar to open the chat interface.
2. Submit a Prompt: Enter a prompt such as “Write a professional email telling users about AI Assist feature” and submit it.
3. Observe the Request Flow: When you submit the prompt, Froala constructs a detailed request object that includes:
   • Your original prompt wrapped with system instructions for HTML formatting
   • Metadata fields: question_order_number, question_timestamp, and session_id for tracking
   • Model and token parameters: model: “claude-opus-4-7” and token: 20000

question:"n  Answer the question based on the context provided below. If the context is empty, answer the question based on your knowledge.n  Your response must be in valid HTML format only - do not include markdown code blocks or backticks.n  Preserve all HTML formatting, tags, links, styles, and structure from the context.n  If generating new content, use appropriate HTML tags for proper formatting.n  If the response includes code snippets inside <pre> or <code> tags, ensure the outer <pre> tag includes a data-code-snippet attribute whose value is the language name (for example: data-code-snippet="javascript"). Do not add any class to the tag — include only the data-code-snippet attribute.n  Do not add explanatory text outside the HTML response.n Question: """Write a professional email telling users about AI Assist feature""" n n Answer:"

question_order_number:1

question_timestamp: "2026-05-18T09:30:36.514Z"

session_id:"new_session"

token:20000

model:"claude-opus-4-7"

4. Backend Processing: Your Express server receives this request at the /ai-assist endpoint, extracts the necessary parameters, and forwards them to Claude’s API.
5. Receive the Response: Claude processes the request and returns a response in the configured JSON format:

{

  "content": "<!DOCTYPE html>n<html lang="en">...<p>Subject: <strong>Introducing AI Assist</strong></p>..."

}

The response is automatically inserted into the editor as formatted HTML.

6. Continue the Conversation: You can submit follow-up prompts or refine the generated content. The AI maintains context within the session, enabling iterative improvements. Once satisfied, insert the final result directly into your document.

Conclusion

Integrating Froala AI Assist with Claude through an Express backend gives you a powerful, production-ready WYSIWYG editor that harnesses advanced AI capabilities while keeping your API credentials secure. By routing requests through your own server, you maintain full control over your data pipeline and can easily customize the AI behavior to match your application’s needs.

The setup we’ve covered, from configuring the React component to building the backend middleware, provides a solid foundation for adding intelligent content generation to your platform. Whether you’re building a collaborative writing tool, a content management system, or an internal documentation platform, this architecture scales cleanly and keeps security at the forefront.

Ready to experience this workflow firsthand? Start your free Froala trial today and follow this tutorial to get AI React WYSIWYG editor up and running in minutes. You’ll see firsthand how seamlessly Claude integrates into your editing experience, enabling your users to draft, refine, and polish content with AI assistance built right into their workflow.

FAQ

Can I use a different AI model instead of Claude?

Yes. While this tutorial uses Claude, you can modify the backend to call any AI API. Update the /ai-assist route to use your preferred provider’s SDK and adjust the request/response formatting accordingly.

What if I want to customize the system prompt that Froala sends to Claude?

Froala constructs the system instructions automatically, but you can intercept and modify the question parameter in your Express server before sending it to Claude. This gives you full control over the prompt structure.

How do I handle rate limiting or API quota issues?

Implement rate limiting middleware in Express (e.g., express-rate-limit) and add error handling for Claude API rate limit responses. You can also track token usage per session and reject requests that exceed your quota.

Is it safe to store the API key in a .env file?

For local development, yes. For production, use a secrets management service like AWS Secrets Manager, HashiCorp Vault, or your hosting platform’s built-in secrets storage to avoid committing credentials to version control.

What’s the maximum token limit I should set?

It depends on your use case and Claude model. Larger limits allow longer responses but increase latency and cost. Start with 2,000–4,000 tokens for typical editing tasks, then adjust based on your needs.

Q: How do I debug if the AI response isn’t appearing in the editor?

Check three things:

(1) verify the backend is receiving requests by logging req.body.

(2) confirm Claude is returning a response by logging the API response.

(3) ensure the response JSON has a content key matching your aiAssistResponseParserPath configuration.

AI-assisted editing is quickly becoming a standard feature in modern applications. With Froala’s AI Assist plugin, you can bring content generation, rewriting, summarization, and more—directly into your editor.

The tricky part isn’t picking a provider. It’s picking an integration pattern that fits where you actually are in your project.

This guide walks through a realistic journey: how you’ll probably start, where you’ll feel the friction, and when (and why) you’ll want to switch.

Key Takeaways

• Three integration patterns available: direct API, custom backend, and endpoint configuration.
• Direct API is fastest to set up, but exposes API keys. Prototypes only.
• Custom backend keeps keys server-side and adds rate limiting, logging, and validation.
• Endpoint configuration lets Froala handle request wiring. Best when your API structure is stable.
• Need sanitization, A/B testing, or fallback logic? Use a custom backend, not configuration.
• AI Assist is provider-agnostic. Swap models or use self-hosted AI without touching your frontend.

The Journey Begins: “Just Get It Working”

You want to ship a prototype. Fast. You don’t need perfection—you need proof that AI in your editor actually improves the user experience.

Enter: Direct API Integration.

Direct API: The Seductive Fast Path

This is the path of least resistance. You write a custom request function that talks directly to your AI provider from the frontend:

aiAssistRequest: async function (prompt) {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer YOUR_API_KEY`
    },
    body: JSON.stringify({
      model: 'gpt-4',
      messages: [{ role: 'user', content: prompt }]
    })
  });

  const data = await response.json();
  return data.choices[0].message.content;
}

Why developers choose this:

• It works immediately
• Full control over the request
• Easy to debug
• Can swap AI providers with a few lines of code
• Perfect for testing different prompts and UX flows

And it is genuinely useful for this stage. You learn what AI editing feels like in your app. You test if users actually want this feature.

The First Problem Appears: API Keys in the Wild

A week in, you realize something uncomfortable.

Your API key is sitting in the front-end code. Anyone with browser DevTools can see it. Your quota is exposed to the world. If someone finds it, they’re using your API calls.

You brush this aside. “It’s just a prototype.” But then you show it to your team. They ask: “Wait, where’s your key?” You say “in the code.” They make a face.

This is the first friction point. 

The Second Problem Emerges: Loss of Control

A few days later, you notice something else.

Your API usage is spiking—way beyond what your users should generate. You dig in. Turns out someone is hammering your endpoint (maybe intentionally, maybe a bug in the frontend). You have no way to throttle it, log it, or stop it. You just watch the bill climb.

Worse: you have no visibility into what’s happening. Which prompts are users using? What’s working? What’s failing? With the frontend integration, you’re blind.

This is the second friction point. And it stings more than the first.

At this moment, most developers realize: “I need a backend.”

The Transition: When Direct API Breaks Down

Before you rewrite everything, understand what’s actually broken:

• Security: Your keys are exposed
• Control: You can’t throttle, log, or validate requests
• Observability: You don’t know what’s happening
• Scalability: You have no way to add business logic (rate limiting, moderation, user-specific rules)

The good news: you don’t have to change your architecture everywhere. You just need a middle layer.

The Backend Approach: Reclaiming Control

Here’s the pattern that fixes all of this:

Frontend talks to your backend, which talks to the AI provider.

Frontend code gets simpler:

aiAssistRequest: async function (prompt) {
  const response = await fetch('/api/ai-assist', {
    method: 'POST',
    body: JSON.stringify({ prompt })
  });
  const result = await response.json();
  return result.content;
}

Now your backend owns the integration:

app.post('/api/ai-assist', async (req, res) => {
  const { prompt } = req.body;
  
  // Validation
  if (!prompt || prompt.length < 3) {
    return res.status(400).json({ error: 'Invalid prompt' });
  }

  // Rate limiting (per user)
  const userQuota = await checkUserQuota(req.user.id);
  if (userQuota.exceeded) {
    return res.status(429).json({ error: 'Rate limit reached' });
  }

  // Call AI provider with your API key (safe on the backend)
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
    },
    body: JSON.stringify({
      model: 'gpt-4',
      messages: [{ role: 'user', content: prompt }]
    })
  });

  const data = await response.json();
  const content = data.choices[0].message.content;

  // Post-processing (sanitization, moderation, etc.)
  const safeContent = sanitize(content);

  // Logging and analytics
  await logAIUsage({
    userId: req.user.id,
    prompt,
    response: safeContent,
    model: 'gpt-4',
    timestamp: new Date()
  });

  res.json({ content: safeContent });
});

What you’ve gained:

• Security: API keys never leave your server
• Control: Rate limiting, user-level quotas, request validation
• Visibility: Every request is logged
• Flexibility: You can add business logic (moderation, filtering, user preferences)
• Scalability: You can swap providers, add fallbacks, implement caching—all without touching the frontend

The Hidden Cost: Complexity

But here’s what nobody tells you: this approach has a cost.

You’ve moved the problem. Now instead of managing API keys in the frontend, you’re managing:

• Backend deployment and scaling
• Error handling across two layers (frontend and backend)
• Latency (an extra network hop)
• Debugging (when something breaks, which layer?)
• Testing (you need to mock both the frontend and the AI provider)

This is why you shouldn’t do this for a prototype. The overhead isn’t worth it. But once you have users, traffic, and a billing problem? It becomes essential.

The Third Pattern: When Configuration Wins Over Custom Code

During code review, someone notices something. Your frontend has a custom request function that just wires data to an endpoint and parses the response back.

“Why are we maintaining this?” they ask. “Can’t Froala just handle it?”

They’re right. And that’s when you realize: Froala can generate the request function itself if you give it the structure.

Instead of writing custom code, you define the shape of your API via configuration:

aiAssistEndpoint, aiAssistHeaders, aiAssistDataKeys, aiAssistAdditionalData, and aiAssistResponseParserPath

Froala uses these to build the request. No custom function needed.

new FroalaEditor('#editor', {
  aiAssistEndpoint: '/api/ai-assist',  // your lightweight backend
  
  aiAssistHeaders: {
    'Content-Type': 'application/json'
  },

  aiAssistAdditionalData: {
    model: 'gpt-4'
  },

  aiAssistResponseParserPath: 'content'
});

Your frontend stays declarative. Configuration is reviewable by anyone—no hidden logic to decipher. It’s easier to hand off to a new teammate, easier to audit for security. You’re trading flexibility for predictability, and your team gets to spend time on things that actually matter

When This Works

This pattern is ideal when:

• You have a predictable, stable API structure
• Your team values readable configuration over custom functions in your frontend code
• You want a clean, maintainable frontend setup that doesn’t require imperative request logic

When This Breaks Down

But the moment you need actual logic, configuration becomes a cage.

Say you need to sanitize user input before sending it to the AI. Or log which user requested what. Or implement A/B testing with different prompts. Or add fallback logic if the primary model fails.

Now configuration isn’t enough. You’re forced to either:

1. Add the logic to your backend (which wasn’t supposed to have logic)
2. Go back to custom functions in the frontend (defeating the purpose)

The real tradeoff: Configuration gives you less control, but more clarity. Use it when your requirements are stable. The moment they shift, switch to custom functions. Don’t fight the framework.

How to Choose: A Framework

Here’s a practical decision tree:

Are you building a prototype or MVP?

 Start with Direct API. Accept the security tradeoffs. Move fast. Learn if users want this.

Do you have users and traffic?

 Move to Custom Backend. Your security concerns are real now. So is your need for control.

Is your API structure stable and your team values clarity over flexibility? 

Use Standard Endpoint Configuration. Let Froala handle the wiring. You’ll spend less time maintaining frontend boilerplate.

Do you need logic beyond passing data through? (sanitization, user-specific rules, A/B testing, fallback handling) 

Use Custom Backend. Configuration will constrain you. Write the function, own the behavior.

One More Thing: Froala Doesn’t Lock You In

Whatever you choose, remember this: Froala AI Assist isn’t tied to OpenAI, or any specific provider.

• You can swap providers by changing one API call
• You can add custom AI logic (call multiple models, chain requests, implement fallbacks)
• You can use self-hosted models or internal AI systems
• Each pattern supports all of this

The flexibility is the whole point. You’re not choosing a provider. You’re choosing how much control and complexity you want right now.

Conclusion

Froala doesn’t lock you into one way of integrating AI—it gives you multiple paths to the same outcome.

Use Direct OpenAI API integration to move fast. Use a custom backend integration to scale and control. Use standard endpoint configuration when simplicity is enough.

The real power of AI Assist is not just what it does but how flexibly you can integrate it into your system.

In today’s digital landscape, content creation has become increasingly sophisticated, and users expect intelligent, AI-powered tools to enhance their writing experience. Whether you’re building a Learning Management System (LMS), a content publishing platform, or any WordPress site that requires rich text editing, integrating a WordPress AI editor can dramatically improve user productivity and content quality. 

In this comprehensive tutorial, we’ll walk you through setting up the Froala WYSIWYG editor with AI assistance powered by DeepSeek on your WordPress frontend pages.

Key Takeaways

• Security First: By handling API calls server-side through WordPress’s REST API, you’ve protected your DeepSeek API key and prevented unauthorized usage.
• Flexibility: The modular architecture allows easy customization of AI commands, user permissions, and integration with other WordPress features.
• User Experience: Users get seamless AI assistance without leaving the editor, dramatically improving their content creation workflow.
• Scalability: The implementation can handle multiple users and can be extended with caching, rate limiting, and asynchronous processing as your needs grow.
• Cost Control: With proper monitoring, rate limiting, and caching, you can control API costs while providing valuable AI features.

Why Choose Froala with AI Assist for Your WordPress Site?

Before diving into the technical implementation, let’s understand why this integration is a game-changer for WordPress developers and site owners.

The Power of AI-Enhanced Content Creation

Froala Editor is already one of the most feature-rich WYSIWYG editors available, offering a clean interface, extensive formatting options, and excellent performance. 

It offers an affordable, enterprise-grade solution for rich-text editing, with plans that include unlimited editor loads and user seats, so costs don’t multiply with scale.

When you combine it with AI capabilities, you unlock a new dimension of content creation that includes:

• Intelligent Chat that can be used for
  • Intelligent content suggestions that help users overcome writer’s block
  • Grammar and style improvements that enhance content quality
  • Content expansion capabilities that can elaborate on brief ideas
  • Summarization features for condensing lengthy content
• Tone adjustment to match different audiences and contexts
• Translation assistance for multilingual sites

Froala’s AI Assist plugin is model-agnostic and works with any AI API. This tutorial uses DeepSeek as the AI provider—a cost-effective and capable choice for many use cases. However, you can substitute any other AI model (OpenAI’s GPT-4, Anthropic’s Claude, Llama, etc.) by adjusting the API endpoint, authentication method, and request/response formatting in the code. The integration steps and architecture remain largely the same regardless of which model you choose.

Benefits of This Integration

Implementing a WordPress AI editor using Froala and DeepSeek offers numerous advantages:

1. Enhanced User Experience: Students writing essays in an LMS, bloggers crafting articles, or team members collaborating on documentation all benefit from real-time AI assistance without leaving the editor interface.
2. Server-Side Security: By handling API calls on the WordPress backend, you keep your DeepSeek API keys secure and never expose them to client-side code. This architecture prevents unauthorized usage and protects your credentials.
3. Seamless WordPress Integration: The solution leverages WordPress’s native REST API infrastructure, ensuring compatibility with WordPress standards and making maintenance straightforward.
4. Customizable and Extensible: The implementation we’ll build can be easily modified to add custom prompts, implement rate limiting, add user-specific features, or integrate with other WordPress plugins.

Real-World Use Cases

Before we begin the implementation, let’s explore some practical scenarios where this WordPress AI editor integration shines:

Learning Management Systems (LMS)

Imagine students working on essays or research papers within your LMS. With AI assist, they can:

• Get suggestions for improving their thesis statements
• Expand on complex ideas with additional context
• Check their writing for clarity and coherence
• Generate outlines for structured essays
• Receive feedback on argument strength

Content Publishing Platforms

For blogs, news sites, or content marketing platforms:

• Writers can quickly generate article introductions
• Content teams can maintain consistent tone across multiple authors
• Editors can use AI to suggest improvements before publication
• SEO-focused content can be enhanced with keyword-rich suggestions
• Meta descriptions and summaries can be auto-generated

Corporate Intranets and Knowledge Bases

Organizations using WordPress for internal documentation benefit from:

• Standardized documentation formatting and style
• Quick generation of technical explanations
• Translation of content for global teams
• Summarization of lengthy reports
• Consistent terminology across departments

E-Learning and Course Creation

Course creators and instructional designers can:

• Generate quiz questions from course content
• Create engaging lesson descriptions
• Develop learning objectives with AI assistance
• Produce student-friendly explanations of complex topics
• Draft feedback templates for assignments

What You’ll Build

A WordPress page where users can write content with:

• A professional WYSIWYG editor (Froala)
• AI writing assist features (chat, tone, translation)
• DeepSeek as the backend AI model
• Server-side API handling for security

Prerequisites

Before starting this tutorial, ensure you have:

1. A WordPress installation (version 5.0 or higher recommended)
2. Administrative access to your WordPress site
3. FTP or file manager access to edit WordPress files
4. A DeepSeek API key (sign up at DeepSeek’s website)
5. Froala Editor license (or trial version)
6. Basic understanding of PHP, JavaScript, and WordPress development
7. A code editor for modifying WordPress files

Step 1: Securing Your DeepSeek API Key

The first and most critical step in building a secure WordPress AI editor is properly storing your API credentials. Never expose API keys in client-side JavaScript code, as this would allow anyone to use your API quota and potentially incur costs.

Adding the API Key to wp-config.php

Open your wp-config.php file, which is located in your WordPress root directory. This file contains your WordPress configuration settings and is the ideal place to store sensitive credentials.

Add the following line before the comment that says /* That's all, stop editing! Happy publishing. */:

define( 'DEEPSEEK_API_KEY', 'sk-****' );

Replace sk-**** with your actual DeepSeek API key. This approach keeps your key secure because:

• The wp-config.php file is never accessible via web browsers when properly configured
• The constant is available throughout your WordPress installation
• You can easily change the key without modifying multiple files
• It follows WordPress security best practices

Why this matters: Storing sensitive keys in wp-config keeps them out of the database and version control. WordPress loads this file before anything else, making it available everywhere you need it.

Security Tip: Ensure your wp-config.php file has appropriate permissions (typically 440 or 400) to prevent unauthorized access. You can set this via FTP or your hosting control panel.

Step 2: Creating the WordPress REST API Endpoint

WordPress’s REST API provides a standardized way to interact with your site programmatically. We’ll create a custom endpoint that acts as a secure proxy between the Froala editor and the DeepSeek API.

Understanding the Architecture

Here’s how the data flow works:

1. User types a prompt in the Froala editor and triggers AI assist
2. Froala sends a request to your WordPress REST API endpoint
3. WordPress receives the request, sanitizes the input, and validates it
4. WordPress makes a server-side request to DeepSeek’s API with your secure API key
5. DeepSeek processes the request and returns AI-generated content
6. WordPress formats the response and sends it back to Froala
7. Froala displays the AI-generated content to the user

This architecture ensures your API key never leaves the server and all requests are properly validated.

Implementing the REST API Endpoint

You have two options for adding this code:

Option A: Add to functions.php (simpler, good for single-site implementations)

Option B: Create a custom plugin (recommended for portability and cleaner code organization)

For this tutorial, we’ll show both approaches, but we recommend Option B for production environments.

Option A: Adding to functions.php

Open your theme’s functions.php file (located in wp-content/themes/your-theme/functions.php) and add:

/**
* Register custom REST API endpoint for DeepSeek AI integration
*/
add_action( 'rest_api_init', function () {
   register_rest_route( 'ai-assist', '/deepseek', array(
       'methods'  => 'POST',
       'callback' => 'handle_deepseek_request',
       'permission_callback' => '__return_true',
   ));
});

/**
* Handle DeepSeek API requests
* 
* @param WP_REST_Request $request The REST API request object
* @return array|WP_Error Response data or error
*/
function handle_deepseek_request( $request ) {
   // Extract and sanitize the user's prompt
   $params = $request->get_json_params();
   $user_prompt = sanitize_text_field( $params['prompt'] );

   // Validate that we have a prompt
   if ( empty( $user_prompt ) ) {
       return new WP_Error( 
           'missing_prompt', 
           'No prompt provided.', 
           array( 'status' => 400 ) 
       );
   }

   // Call DeepSeek API securely from the server
   $response = wp_remote_post( 'https://api.deepseek.com/v1/chat/completions', array(
       'headers' => array(
           'Authorization' => 'Bearer ' . DEEPSEEK_API_KEY,
           'Content-Type'  => 'application/json',
       ),
       'body' => json_encode( array(
           'model'    => 'deepseek-chat',
           'messages' => array(
               array( 'role' => 'user', 'content' => $user_prompt )
           ),
       )),
       'timeout' => 30,
   ));

   // Handle connection errors
   if ( is_wp_error( $response ) ) {
       return new WP_Error( 
           'api_error', 
           'DeepSeek API connection failed: ' . $response->get_error_message(), 
           array( 'status' => 500 ) 
       );
   }

   // Parse the API response
   $body = json_decode( wp_remote_retrieve_body( $response ), true );

   // Check if DeepSeek actually returned an answer
   if ( isset( $body['choices'][0]['message']['content'] ) ) {
       return array(
           'success' => true,
           'data'    => array(
               'content' => $body['choices'][0]['message']['content']
           )
       );
   }

   // Fallback for API errors (like quota exceeded)
   return array(
       'success' => false,
       'error'   => $body['error']['message'] ?? 'Unknown API error'
   );
}

Option B: Creating a Custom Plugin (Recommended)

Create a new directory in wp-content/plugins/ called froala-ai-assist. Inside this directory, create a file named froala-ai-assist.php:

/**
* Plugin Name: Froala AI Assist with DeepSeek
* Plugin URI: https://yoursite.com
* Description: Integrates Froala Editor with DeepSeek AI for intelligent content assistance
* Version: 1.0.0
* Author: Your Name
* Author URI: https://yoursite.com
* License: GPL v2 or later
* Text Domain: froala-ai-assist
*/

// Prevent direct access
if ( ! defined( 'ABSPATH' ) ) {
   exit;
}

/**
* Main plugin class
*/
class Froala_AI_Assist {

   /**
    * Constructor
    */
   public function __construct() {
       add_action( 'rest_api_init', array( $this, 'register_rest_routes' ) );
   }

   /**
    * Register REST API routes
    */
   public function register_rest_routes() {
       register_rest_route( 'ai-assist', '/deepseek', array(
           'methods'  => 'POST',
           'callback' => array( $this, 'handle_deepseek_request' ),
           'permission_callback' => array( $this, 'check_permissions' ),
       ));
   }

   /**
    * Check if user has permission to use AI assist
    * 
    * @return bool
    */
   public function check_permissions() {
       // For now, allow all authenticated users
       // You can customize this based on your requirements
       return true; // is_user_logged_in();
   }

   /**
    * Handle DeepSeek API requests
    * 
    * @param WP_REST_Request $request
    * @return array|WP_Error
    */
   public function handle_deepseek_request( $request ) {
       $params = $request->get_json_params();
       $user_prompt = sanitize_text_field( $params['prompt'] ?? '' );

       if ( empty( $user_prompt ) ) {
           return new WP_Error( 
               'missing_prompt', 
               __( 'No prompt provided.', 'froala-ai-assist' ), 
               array( 'status' => 400 ) 
           );
       }

       // Check if API key is configured
       if ( ! defined( 'DEEPSEEK_API_KEY' ) || empty( DEEPSEEK_API_KEY ) ) {
           return new WP_Error( 
               'missing_api_key', 
               __( 'DeepSeek API key not configured.', 'froala-ai-assist' ), 
               array( 'status' => 500 ) 
           );
       }

       // Call DeepSeek API
       $response = wp_remote_post( 'https://api.deepseek.com/v1/chat/completions', array(
           'headers' => array(
               'Authorization' => 'Bearer ' . DEEPSEEK_API_KEY,
               'Content-Type'  => 'application/json',
           ),
           'body' => json_encode( array(
               'model'    => 'deepseek-chat',
               'messages' => array(
                   array( 'role' => 'user', 'content' => $user_prompt )
               ),
               'temperature' => 0.7,
               'max_tokens' => 2000,
           )),
           'timeout' => 30,
       ));

       if ( is_wp_error( $response ) ) {
           return new WP_Error( 
               'api_error', 
               sprintf( 
                   __( 'DeepSeek API connection failed: %s', 'froala-ai-assist' ),
                   $response->get_error_message()
               ), 
               array( 'status' => 500 ) 
           );
       }

       $body = json_decode( wp_remote_retrieve_body( $response ), true );

       if ( isset( $body['choices'][0]['message']['content'] ) ) {
           return array(
               'success' => true,
               'data'    => array(
                   'content' => $body['choices'][0]['message']['content']
               )
           );
       }

       return array(
           'success' => false,
           'error'   => $body['error']['message'] ?? __( 'Unknown API error', 'froala-ai-assist' )
       );
   }
}

// Initialize the plugin
new Froala_AI_Assist();

After creating this file, activate the plugin from your WordPress admin panel under Plugins > Installed Plugins.

Understanding the Code

Let’s break down the key components of this implementation:

1. REST Route Registration: The register_rest_route() function creates a new API endpoint at /wp-json/ai-assist/deepseek. This endpoint accepts POST requests and routes them to our handler function.
2. Input Sanitization: We use sanitize_text_field() to clean the user’s prompt, preventing potential security issues like XSS attacks.
3. API Request: The wp_remote_post() function is WordPress’s built-in method for making HTTP requests. It’s more secure and reliable than using PHP’s cURL directly.
4. Error Handling: We check for both connection errors and API-level errors, providing meaningful feedback to users.
5. Response Formatting: The function returns a standardized response format that Froala can easily parse and display.

Step 3: Creating a WordPress Page with Froala Editor

Now that our backend is ready, let’s create a frontend page where users can interact with the WordPress AI editor.

Creating the Page Template

Create a new page in WordPress (Pages > Add New) and give it a title like “AI-Powered Editor” or “Write with AI Assist”. You can use the default page template or create a custom one.

Adding the Froala Editor

You’ll need to enqueue Froala’s CSS and JavaScript files. Add this to your theme’s functions.php or your custom plugin:

/**
* Enqueue Froala Editor assets
*/
function enqueue_froala_editor_assets() {
   // Only load on specific pages
   if ( is_page( 'ai-powered-editor' ) ) { // Replace with your page slug

       // Froala CSS
       wp_enqueue_style( 
           'froala-editor', 
           'https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css',
           array(),
           '4.0.0'
       );

       wp_enqueue_style( 
           'froala-style', 
           'https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_style.min.css',
           array(),
           '4.0.0'
       );

       // Froala JavaScript
       wp_enqueue_script( 
           'froala-editor', 
           'https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js',
           array( 'jquery' ),
           '4.0.0',
           true
       );

      /*  Add scripts for other feature dependencies as needed.*/



       // Custom initialization script
       wp_enqueue_script( 
           'froala-init', 
           get_template_directory_uri() . '/js/froala-init.js',
           array( 'froala-editor' ),
           '1.0.0',
           true
       );

       // Pass WordPress REST API URL to JavaScript
       wp_localize_script( 'froala-init', 'wpApiSettings', array(
           'root' => esc_url_raw( rest_url() ),
           'nonce' => wp_create_nonce( 'wp_rest' )
       ));
   }
}
add_action( 'wp_enqueue_scripts', 'enqueue_froala_editor_assets' );

Creating the Page Content

In your page editor, switch to the HTML/Code view and add:

 <div id="froala-editor">
    <p>Start writing your content here. Use the AI assist button to get intelligent suggestions!</p>
</div>

<style>
    #froala-editor {
        margin: 20px 0;
        min-height: 400px;
    }
  
</style>

Step 4: Initializing Froala with AI Assist

Create a new JavaScript file in your theme directory at js/froala-init.js:

/**
* Initialize Froala Editor with DeepSeek AI Assist
*/
(function($) {
   'use strict';

   /**
    * Call DeepSeek API through WordPress REST endpoint
    * 
    * @param {Object} data- The user's prompt
    *
    */
    async function callDeepseek(data) {

       try {

           const response = await fetch(wpApiSettings.root + 'ai-assist/deepseek', {

               method: "POST",

               headers: {

                   "Content-Type": "application/json"

               },

               body: JSON.stringify({

                   prompt: data.prompt,

                   //context: data.context,

               }),

               //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;

       }

   }

   /**
    * Initialize Froala Editor when DOM is ready
    */
   $(document).ready(function() {

       // Check if Froala Editor is available
       if (typeof FroalaEditor === 'undefined') {

           console.error('Froala Editor not loaded');

           return;

       }



       // Initialize the editor

       new FroalaEditor('#froala-editor', {

           // Basic configuration

           heightMin: 400,

           heightMax: 800,



           // AI Assist configuration

           aiSupplementalTermsAccepted: true,

           aiAssistRequest: callDeepseek,





           // Event handlers

           events: {

               'initialized': function () {

                   console.log('Froala Editor initialized with AI Assist');

               },

               'aiAssist.afterInsert': function () {

                   console.error('AI response is ready.');

                   

               }

           }

       });
   });

})(jQuery);

Understanding the Froala Configuration

Let’s examine the key configuration options:

1. aiSupplementalTermsAccepted: This boolean flag indicates that you’ve accepted Froala’s terms for using AI features. Set this to true to enable AI functionality.
2. aiAssistRequest: This is the crucial connection point. We pass our callDeepseek function here, which Froala will call whenever a user requests AI assistance.
3. Event Handlers: We set up event listeners to track initialization and AI response insertion.

Step 5: Testing Your WordPress AI Editor

Now that everything is configured, let’s test the integration:

1. Navigate to Your Page: Visit the page where you added the Froala editor
2. Write Some Content: Type a paragraph or two of text
3. Select Text: Highlight some of your content
4. Click AI Assist: Look for the AI assist button in the Froala toolbar
5. Ask Anything: Try one of the AI commands like “Write about X” or “Expand Content” and watch the magic happen in real-time as DeepSeek processes your request.
6. Review Results: The AI-generated content should appear, which you can accept, modify, or reject

Troubleshooting Common Issues

Problem: AI Assist button doesn’t appear

• Solution: Verify that the AI Assist plugin JavaScript is loaded and activated and you are not customizing the toolbar editor buttons. Check your browser’s console for errors.

Problem: “API key not configured” error

• Solution: Double-check that you’ve added the DEEPSEEK_API_KEY constant to wp-config.php and that it’s spelled correctly.

Problem: “DeepSeek API connection failed”

• Solution: Verify your API key is valid and that your server can make outbound HTTPS requests. Some hosting providers block external API calls.

Problem: Slow response times

• Solution: DeepSeek’s response time depends on prompt complexity and server load. Consider implementing a loading indicator and setting appropriate timeout values.

Problem: CORS errors

• Solution: Since we’re using WordPress’s REST API as a proxy, CORS shouldn’t be an issue. If you see CORS errors, verify that your REST API is accessible and not blocked by security plugins.

Advanced Customization Options

While the basic integration provides powerful AI-assisted editing out of the box, you may want to extend the functionality to meet specific business requirements. The following customizations demonstrate common enhancement patterns that can be adapted to your unique use cases.

Adding User-Specific Rate Limiting

To prevent abuse and control API costs, implement rate limiting:

function handle_deepseek_request( $request ) {
   $user_id = get_current_user_id();

   // Check rate limit (e.g., 10 requests per hour)
   $transient_key = 'ai_assist_limit_' . $user_id;
   $request_count = get_transient( $transient_key );

   if ( $request_count && $request_count >= 10 ) {
       return new WP_Error( 
           'rate_limit_exceeded', 
           'You have exceeded the AI assist rate limit. Please try again later.', 
           array( 'status' => 429 ) 
       );
   }

   // Increment counter
   set_transient( $transient_key, ( $request_count ? $request_count + 1 : 1 ), HOUR_IN_SECONDS );

   // Continue with normal processing...
}

Implementing Usage Logging

Track AI usage for analytics and billing:

function log_ai_usage( $user_id, $prompt, $response, $tokens_used ) {
   global $wpdb;

   $wpdb->insert(
       $wpdb->prefix . 'ai_usage_log',
       array(
           'user_id' => $user_id,
           'prompt' => $prompt,
           'response_length' => strlen( $response ),
           'tokens_used' => $tokens_used,
           'timestamp' => current_time( 'mysql' )
       ),
       array( '%d', '%s', '%d', '%d', '%s' )
   );
}

Security Best Practices

Integrating AI capabilities into your WordPress site introduces new security considerations. Since your REST API endpoint handles user input and communicates with external services, it’s essential to implement robust validation, sanitization, and permission checks.

Input Validation and Sanitization

Always validate and sanitize user input:

function handle_deepseek_request( $request ) {
   $params = $request->get_json_params();

   // Validate prompt exists
   if ( ! isset( $params['prompt'] ) ) {
       return new WP_Error( 'missing_prompt', 'Prompt is required' );
   }

   // Sanitize and validate length
   $user_prompt = sanitize_textarea_field( $params['prompt'] );

   if ( strlen( $user_prompt ) > 5000 ) {
       return new WP_Error( 'prompt_too_long', 'Prompt exceeds maximum length' );
   }

   if ( strlen( $user_prompt ) < 10 ) {
       return new WP_Error( 'prompt_too_short', 'Prompt is too short' );
   }

   // Continue processing...
}

Permission Checks

Implement proper permission checking:

function check_ai_assist_permissions() {
   // Only allow logged-in users
   if ( ! is_user_logged_in() ) {
       return false;
   }

   // Check if user has specific capability
   if ( ! current_user_can( 'edit_posts' ) ) {
       return false;
   }

   // Check if user's account is in good standing
   $user_id = get_current_user_id();
   $is_suspended = get_user_meta( $user_id, 'ai_assist_suspended', true );

   if ( $is_suspended ) {
       return false;
   }

   return true;
}

Conclusion

Congratulations! You’ve successfully implemented a powerful WordPress AI editor by integrating Froala WYSIWYG editor with DeepSeek AI assistance. This implementation provides your users with intelligent content creation tools while maintaining security, performance, and cost-effectiveness.

Next Steps

Consider these enhancements for your WordPress AI editor:

• Implement user-specific AI command customization.
• Add support for multiple AI models (OpenAI, Anthropic, etc.).
• Integrate Froala as a WordPress’s block editor.

Resources

• Froala Editor Documentation
• DeepSeek API Documentation
• WordPress REST API Handbook
• WordPress Plugin Development Best Practices

By following this tutorial, you’ve created a production-ready WordPress AI editor that can transform how users create content on your site. Whether you’re building an LMS, a content publishing platform, or any WordPress application that requires rich text editing, this integration provides the intelligent assistance modern users expect.

The combination of Froala’s robust editing capabilities and DeepSeek’s powerful AI creates an exceptional content creation experience that will delight your users and set your WordPress site apart from the competition. Try AI assist feature in action now.

Modern web editors aren’t just UI components—they’re entry points for user-generated content, which means they’re also entry points for abuse.

Platforms like Wikipedia don’t just let users edit content freely—they track, analyze, and moderate every submission. One of the key signals they rely on is IP-based metadata.

In this guide, you’ll learn how to build a simple, production-style moderation layer using:

• Editor: Froala Editor
• Geo API: IPstack
• Backend: Node.js + Express

We’ll keep it beginner-friendly, but grounded in real-world architecture.

Key Takeaways

• User-generated content requires backend moderation.
• IP-based metadata is a simple, high-impact signal for detecting abuse patterns
• Rate limiting and geo-tracking are table stakes for any platform accepting submissions
• Privacy matters: store only what you need, hash sensitive data, set retention limits

What You’re Building

By the end, your app will:

• Accept content from a WYSIWYG editor
• Capture the user’s IP and location securely, on the backend, using IPstack
• Store metadata with each post
• Apply basic moderation rules (rate limiting / blocking)

Why This Matters

If your app allows users to submit content (posts, comments, HTML):

You are exposed to:

• Spam bots
• Fake accounts
• Malicious content
• Coordinated attacks

The editor is not the problem. Uncontrolled submissions are.

Architecture Overview

Here’s the flow we’ll implement:

User → Froala Editor → Submit Content

        ↓

Frontend sends content

        ↓

Backend (Express):

  - Call IPstack

  - Store metadata

  - Run moderation checks

        ↓

Save or block

Step 1: Project Setup

mkdir froala-moderation

cd froala-moderation

npm init -y

npm install express cors

Step 2: Add Froala Editor (Frontend)

Create a simple index.html:

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet">
</head>
<body>

  <textarea id="editor"></textarea>
  <button onclick="submitContent()">Submit</button>

  <script src="https://cdn.jsdelivr.net/npm/froala-editor/js/froala_editor.pkgd.min.js"></script>

  <script>
    const editor = new FroalaEditor('#editor');

    async function submitContent() {
      const content = editor.html.get();

      const res = await fetch('http://localhost:3000/api/post', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content })
      });

      const data = await res.json();
      alert(data.message);
    }
  </script>

</body>
</html>

This is your content entry point.

Step 3: Create Express Backend

Create server.js:

const express = require('express');
const cors = require('cors');
const path = require('path');

const app = express();
app.use(cors());
app.use(express.json());

app.use(express.static(path.join(__dirname, 'public')));

const PORT = 3000;

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Step 4: Capture User IP and Location (IPstack)

Sign up at IPstack and get your API key.

Add this function:

async function getGeoData() {
  const API_KEY = 'YOUR_IPSTACK_KEY';
  
  const res = await fetch(`http://api.ipstack.com/check?access_key=${API_KEY}`);
  const data = await res.json();

  return {
      ip: data.ip,
      country: data.country_name,
      city: data.city
  };
}

Step 6: Add Moderation Logic

We’ll start simple.

Example rule:

• Block if too many requests from same IP

Add a basic in-memory tracker:

const requestLog = {};

function isSuspicious(ip) {
  const now = Date.now();

  if (!requestLog[ip]) {
    requestLog[ip] = [];
  }

  requestLog[ip].push(now);

  // keep last 1 minute
  requestLog[ip] = requestLog[ip].filter(t => now - t < 60000);

  return requestLog[ip].length > 5; // more than 5 posts/min
}

Step 7: Handle Content Submission

Now combine everything:

app.post('/api/post', async (req, res) => {
  const { content } = req.body;

  // get geo data
  const geo = await getGeoData();

  // moderation check
  if (isSuspicious(ip)) {
    return res.status(429).json({
      message: 'Too many requests. Try again later.'
    });
  }

  const post = {
    content,
    ip,
    country: geo.country,
    city: geo.city,
    createdAt: new Date()
  };

  console.log('Saved post:', post);

  res.json({ message: 'Post saved successfully!' });
});

Step 8: Privacy Best Practices

This is not optional.

✔ Do:

• Store country, not precise location
• Set retention (e.g., delete IP after 30 days)
• Keep IP private (never expose in UI)

❌ Don’t:

• Collect GPS location
• Trust frontend IP
• Store data you don’t use

Step 9: Test Your App

1. Run backend:

node server.js

1. Open index.html
2. Submit content multiple times

After ~5 rapid submissions:

• You should get a rate limit.

What You Just Built

You now have:

• A working WYSIWYG editor
• A backend moderation pipeline
• IP-based tracking
• Basic abuse prevention

This is a simplified version of what platforms like Wikipedia do.

Next Steps (Make It Production-Ready)

To level this up:

• Store data in a database (MongoDB/PostgreSQL)
• Hash IP addresses for privacy
• Add CAPTCHA for flagged users
• Integrate IP reputation services
• Build a moderation dashboard

Why This Works Well with Froala

Froala Editor fits naturally into this architecture:

• Clean API (editor.html.get())
• Easy integration with any backend
• No lock-in to specific frameworks
• Designed for real production use—not just demos

It becomes part of your system—not a limitation.

Final Thoughts

If you’re building any app that accepts user content, you’re building a content pipeline.

The difference between a thriving platform and a spam receptacle is whether you moderate at the backend. IP-based tracking is the simplest, highest-impact place to start.

Ready to move beyond this demo? The architecture you’ve built here scales. Add a database, hash those IPs, layer in reputation scoring—and you’ve got the foundation Wikipedia uses.

Start by downloading the editor. Build from there.