AI Toolkit

Resumen

El AI Toolkit añade al editor tres interfaces relacionadas:

• Ask AI: un cuadro de diálogo que se abre desde la barra de herramientas, con siete modos de un clic (revisar, reescribir, acortar, ampliar, resumir, traducir, justificar), un selector de alcance entre selección y documento, y una vista previa en línea antes de aplicar.
• AI Chat: un panel lateral acoplado para solicitudes de varios turnos. Tiene en cuenta el alcance, con prompts rápidos y acciones de copiar, aplicar, insertar y reemplazar en cada respuesta de la IA.
• AI Review: una cola persistente de sugerencias pendientes, aceptadas y rechazadas. Sincronización opcional con un registro en el servidor para revisar entre sesiones.

Las tres comparten el mismo hook aiToolkitResolver y el mismo contrato de operaciones, así que una sugerencia que se previsualiza en una interfaz se puede aceptar, rechazar o escalar en otra.

Modo de demostración. Sin ningún resolver configurado, el plugin incluye un defaultResolveAction determinista para que puedas ejecutar Ask AI, Chat y Review en local sin clave de API, sin llamadas de red y con una salida predecible.

Instalación

Carga la hoja de estilos y el script del AI Toolkit después del bundle principal del editor. De forma predeterminada, el plugin inyecta automáticamente al cargarse un botón Ask AI en los presets de barra de herramientas estándar default, basic, full y mobile.

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

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

Configuración. El rte.js que descargaste tiene al principio un bloque RTE_DefaultConfig editable en texto plano: ábrelo y cambia los valores predeterminados de la IA (clave de persistencia, etiqueta, endpoint del resolver, etc.) junto con el resto de los ajustes del editor. No hace falta cargar ningún archivo de configuración aparte. aitoolkit.css debe estar presente siempre que se pueda mostrar el botón de IA (incluso con la barra de herramientas predeterminada), o el menú desplegable de IA tendrá un tamaño incorrecto. Para mantener la IA activada pero detener la inyección automática del botón, establece aiToolkitAutoToolbarButtons: false y luego añade aiassist solo a las barras de herramientas donde lo quieras.

var editor = new RichTextEditor("#editor", {
  toolbar: "default",
  aiToolkitAutoToolbarButtons: false
});

Tres interfaces

Modos integrados

Cada modo es una entrada { id, title, description } de config.aiToolkitDialogModes. Aparecen en la lista desplegable Action del cuadro de diálogo Ask AI y se pueden llamar con runQuickAction(id).

Son implementaciones simuladas y deterministas del resolver de demostración. En cuanto conectes aiToolkitResolver, tu función decide cómo se gestiona cada modo. También puedes registrar modos nuevos; consulta Acciones personalizadas.

El hook aiToolkitResolver

Este es el punto de extensión. El resolver recibe una solicitud estructurada y devuelve un resultado (o una Promise que se resuelve en uno). El editor se encarga de mostrarlo, previsualizarlo, revisarlo y aplicarlo.

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
      }]
    };
  }
});

Forma de la solicitud

Forma de la respuesta

Devuelve un objeto simple con cualquiera de los siguientes campos. Todos son opcionales; omite los que no necesites.

También puedes devolver una cadena o una Promise. Una cadena se convierte en { result: <that string> }; una Promise se espera.

Tipos de operación

Las operaciones son el plan estructurado que puede devolver tu resolver. El editor las ejecuta en orden (o una a una, según decida el usuario, desde el panel del plan).

Se pueden registrar tipos de operación personalizados con editor.aiToolkit.registerOperationHandler(type, handler).

editor.aiToolkit.registerOperationHandler("insert-callout", function (op, ctx) {
  // ctx = { snapshot, resolved, request, action, editor }
  ctx.editor.insertHTML(
    '<aside class="callout">' + ctx.editor.htmlEncode(op.text) + '</aside>'
  );
  return true; // mark the operation as handled
});

API para usar desde código

Todas las interfaces se pueden abrir y controlar desde código mediante 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();

Acciones y modos personalizados

Registra acciones específicas de tu dominio (p. ej., reescritura SEO, revisión de cláusulas legales, ajuste del tono). Se integran en la misma interfaz de diálogo, chat y revisión.

// 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 */ }
  /* ... */
};

Persistencia y registro remoto

Las sugerencias del panel AI Review se guardan en localStorage bajo una clave que tú controlas. Establece aiToolkitPersistenceKey para limitarlas a cada instancia del editor (p. ej., por documento).

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)
});

Cuando está definida la URL del registro, el plugin hace un GET al abrir y un POST al aceptar o rechazar, para que la cola de revisión sobreviva entre sesiones y se pueda compartir entre revisores.

BYOK (trae tu propia clave)

Importante: el editor no acepta ni guarda claves de API. Las claves van en el gestor de secretos de tu servidor.

El patrón BYOK recomendado:

1. Tu interfaz de administración permite a un inquilino elegir un proveedor y pegar una clave. El formulario hace un POST a tu backend.
2. Tu backend escribe la clave en tu gestor de secretos, limitada a ese inquilino.
3. El aiToolkitResolver del editor hace un POST a /api/ai con la cookie de sesión. Ninguna clave en el navegador.
4. Tu backend busca la clave del inquilino, llama al proveedor y devuelve una respuesta recortada.

Consulta la demo de BYOK para ver un formulario de administración que funciona, un resolver con enrutamiento y un esbozo de servidor al estilo de Express.

Referencia de configuración

Pruébalo

Todas las interfaces de arriba funcionan sin clave de API en las demos públicas:

• Demo del AI Toolkit: Ask AI, acciones rápidas, Chat y panel Review
• Demo de BYOK: formulario de ajustes de administración + resolver con enrutamiento + esbozo del lado del servidor
• Presentación del AI Toolkit: página de presentación con una maqueta del editor en vivo