Documentation

Install

Load the AI Toolkit stylesheet and script after the core editor bundle. The plugin auto-injects an Ask AI button into the default, basic, full, and mobile toolbar presets when it loads.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<link rel="stylesheet" href="/richtexteditor/plugins/aitoolkit.css" />

<script src="/richtexteditor/rte-config.js"></script>
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<!-- aitoolkit.js is bundled inside all_plugins.js.
     Include it separately only if you are loading plugins piecemeal. -->

<div id="editor"></div>
<script>
  var editor = new RichTextEditor("#editor", {
    toolbar: "full",
    aiToolkitPersistenceKey: "my-editor-ai"
  });
</script>

Order matters. rte-config.js must load before rte.js; aitoolkit.css must be present any time the AI button can render (even with the default toolbar) or the AI dropdown menu will size incorrectly.

Three surfaces

Built-in modes

Each mode is a { id, title, description } entry in config.aiToolkitDialogModes. They appear in the Ask AI dialog's Action dropdown and are callable through runQuickAction(id).

These are deterministic stubs for the demo resolver. Once you wire aiToolkitResolver, your function decides how each mode is handled. You can also register new modes - see Custom actions.

The aiToolkitResolver hook

This is the extension point. The resolver receives a structured request and returns a result (or a Promise that resolves to one). The editor handles rendering, preview, review, and apply.

var editor = new RichTextEditor("#editor", {
  toolbar: "full",
  aiToolkitResolver: async function (request) {
    var reply = await fetch("/api/ai", {
      method: "POST",
      body: JSON.stringify({
        mode: request.mode,
        text: request.source,
        language: request.language
      })
    }).then(function (r) { return r.json(); });

    return {
      result: reply.text,             // string: the AI output
      reason: reply.explanation,      // string: why this change
      operations: [{                  // structured plan (optional)
        type: "preview-suggestion",
        text: reply.text,
        reason: reply.explanation
      }]
    };
  }
});

Request shape

Response shape

Return a plain object with any of the following fields. All are optional; omit what you don't need.

You can also return a string or a Promise. A string becomes { result: }; a Promise is awaited.

Operation types

Operations are the structured plan your resolver can return. The editor executes them in order (or user-driven, one at a time, from the plan panel).

Custom operation types can be registered with editor.aiToolkit.registerOperationHandler(type, handler).

editor.aiToolkit.registerOperationHandler("insert-callout", function (op, ctx) {
  ctx.editor.pasteHTML(
    '<aside class="callout">' + ctx.escape(op.text) + '</aside>'
  );
});

Programmatic API

All surfaces can be opened and driven from code via editor.aiToolkit.

// Open the Ask AI dialog
editor.aiToolkit.openDialog({ presetMode: "rewrite", autoRun: false });

// Quick actions (no dialog) - target: selection if present, else whole document
editor.aiToolkit.runQuickAction("proofread");
editor.aiToolkit.runQuickAction("translate", { language: "spanish" });

// Panels
editor.aiToolkit.openChatPanel({ focusComposer: true });
editor.aiToolkit.openReviewPanel({ focusPanel: true });
editor.aiToolkit.closeChatPanel();
editor.aiToolkit.closeReviewPanel();
editor.aiToolkit.toggleChatPanel();
editor.aiToolkit.toggleReviewPanel();

// Resolve without rendering - useful for tests + headless flows
editor.aiToolkit.resolveAction("rewrite", { source: "hello world" })
  .then(function (resolved) { console.log(resolved.result); });

// Swap the resolver at runtime
editor.aiToolkit.setResolver(myResolver);

// Review queue
var pending = editor.aiToolkit.getSuggestions();
editor.aiToolkit.clearSuggestions();
editor.aiToolkit.saveSuggestionLedger();
editor.aiToolkit.loadSuggestionLedger();

Custom actions & modes

Register domain-specific actions (e.g. SEO rewrite, legal clause check, tone matcher). They plug into the same dialog, chat, and review UI.

// Add a new dialog mode (appears in the Action dropdown)
editor.aiToolkit.registerDialogMode({
  id: "seo",
  title: "SEO rewrite",
  description: "Rewrite for stronger keyword coverage while preserving meaning."
});

// Register the action with a target (where output goes by default)
editor.aiToolkit.registerAction({
  id: "seo",
  title: "SEO rewrite",
  target: "selection-preview",
  resolverMode: "seo"          // passed as request.mode to your resolver
});

// Your resolver handles it just like built-in modes
config.aiToolkitResolver = function (request) {
  if (request.mode === "seo") { /* call your SEO service */ }
  /* ... */
};

Persistence & remote ledger

Suggestions in the AI Review drawer persist to localStorage under a key you control. Set aiToolkitPersistenceKey to scope per editor instance (e.g. per document).

new RichTextEditor("#editor", {
  aiToolkitPersistenceKey: "doc-42-review",     // localStorage scope
  aiToolkitSuggestionLedgerUrl: "/api/ai/ledger", // optional GET/POST for cross-session sync
  aiToolkitReviewLogUrl: "/api/ai/review-log",    // optional activity feed endpoint
  aiToolkitReviewSyncInterval: 15000               // ms between sync polls (default 15s)
});

When the ledger URL is set, the plugin GETs on open and POSTs on accept/reject, letting the review queue survive across sessions and be shared between reviewers.

BYOK (bring your own key)

Important: the editor does not accept or store API keys. Keys belong in your server-side secrets manager.

The recommended BYOK pattern:

1. Your admin UI lets a tenant pick a provider and paste a key. The form POSTs to your backend.
2. Your backend writes the key into your secrets manager, scoped to the tenant.
3. The editor's aiToolkitResolver POSTs to /api/ai with the session cookie. No key in the browser.
4. Your backend looks up the tenant's key, calls the provider, and returns a trimmed response.

See the BYOK demo for a working admin form, a routed resolver, and an Express-style server sketch.

Config reference