Bloques de IA para WordPress con WP Suite AI-Kit

AI‑Kit ofrece su interfaz de frontend principalmente mediante el bloque de Gutenberg AI‑Kit Feature (Pro).

  • Si necesita la misma interfaz fuera de Gutenberg (Editor clásico, Elementor o plantillas de temas), consulte Shortcode.
  • El chatbot para todo el sitio se configura desde la interfaz de administración; consulte Chatbot.

Bloque AI‑Kit Feature (Pro)

El bloque AI‑Kit Feature representa una interfaz configurable que permite a los visitantes ejecutar acciones puntuales de IA, como:

  • Escribir
  • Reescribir
  • Corregir
  • Resumir
  • Traducir

Internamente, el bloque usa las mismas API de tiempo de ejecución documentadas en API de JavaScript.

Función Pro

El bloque Feature forma parte de las funciones Pro para el frontend. Si Pro no está activo, es posible que el bloque no se represente en el frontend.


Referencia de configuración

Es posible que la interfaz del inspector de Gutenberg no muestre todas las opciones en todas las compilaciones, pero los conceptos corresponden a las mismas propiedades subyacentes que usan el shortcode y la API de JavaScript.

Comportamiento principal

  • mode — acción que realiza la interfaz: write | rewrite | proofread | summarize | translate.
  • variation — diseño de la interfaz: default (integrada/panel) o modal.
  • title — título opcional que aparece en la cabecera del panel o cuadro de diálogo.
  • autoRun — si es true, se ejecuta inmediatamente al abrirse (habitual para «Resumir esta página»).
  • editable — si es true, permite a los visitantes editar el resultado generado (con una vista previa en directo) antes de que se active onAccept.
  • acceptButtonTitle — etiqueta personalizada del botón «Aplicar/Insertar/Aceptar» (cuando está activado un flujo de aceptación).
  • onDeviceTimeout — sustituye el tiempo límite predeterminado en el dispositivo (5 s para Translate y 45 s para los demás modos). Solo tiene efecto cuando la IA en el dispositivo está disponible (Ajustes de API ≠ «Solo backend»).

Entrada y opciones predeterminadas

Puede rellenar previamente la herramienta con una carga útil default:

  • default.text — texto inicial.
  • default.instructions — indicaciones adicionales para el modelo.
  • default.outputLanguage — código de idioma o auto.
  • default.tone — tono del redactor o reescritor.
  • default.length — longitud del redactor, reescritor o generador de resúmenes.
  • default.type — tipo de resumen.
  • default.outputFormatplain-text | markdown | html.

Permitir modificaciones al visitante

allowOverride controla qué puede cambiar el visitante en la interfaz:

  • allowOverride.text
  • allowOverride.instructions
  • allowOverride.tone
  • allowOverride.length
  • allowOverride.type
  • allowOverride.outputLanguage

Diseño de opciones y selectores

  • optionsDisplay — ajusta cómo se representa el acordeón de opciones.
  • inputSelector — selector CSS para leer el texto de entrada de la página.
  • outputSelector — selector CSS con el que deben sincronizarse los resultados (si el modo elegido lo admite).

Idioma y dirección

  • language — idioma de las etiquetas de la interfaz (independiente de default.outputLanguage).
  • directionltr | rtl | auto.

Tema y apariencia

Estas propiedades corresponden a opciones del tema de Mantine:

  • colorModelight | dark | auto.
  • primaryColor — nombre de un color de Mantine (o clave de un color personalizado).
  • primaryShade — número (0–9) o { light, dark }.
  • colors — colores con nombre personalizados opcionales.
  • themeOverrides — cadena CSS combinada con el tema del componente

Para personalizar mediante tokens CSS (iniciador, chat, espaciado, etc.), consulte Temas (variables CSS).

Botón de apertura (variante modal)

Cuando variation="modal", puede personalizar el botón de apertura:

  • openButtonTitle — etiqueta del botón.
  • openButtonIcon — URL de datos base64 (por ejemplo, data:image/svg+xml;base64,...).
  • showOpenButtonTitle / showOpenButtonIcon — muestra u oculta por separado el título y el icono.
  • showRegenerateOnBackendButton — activa o desactive la acción secundaria de regeneración en el pie del cuadro de diálogo.

Bloque AI‑Kit Doc Search (Pro)

El bloque AI‑Kit Doc Search representa una interfaz de búsqueda ligera que consulta su base de conocimientos y devuelve:

  • una respuesta o resumen breve, y
  • tarjetas de fuentes opcionales (documentos y fragmentos)

Resulta útil para páginas de centros de ayuda, documentación de productos, portales internos o cualquier lugar donde quiera que los visitantes busquen en sus documentos sin usar un chatbot completo.

Función Pro

El bloque Doc Search forma parte de las funciones Pro para el frontend. Si Pro no está activo, es posible que el bloque no se represente en el frontend.

Internamente, Doc Search usa las mismas API de tiempo de ejecución documentadas en API de JavaScript (en especial, sendSearchMessage() y renderSearchComponent()).


Comportamiento principal

  • variation — diseño de la interfaz.
  • autoRun — si es true, se ejecuta inmediatamente (útil cuando la consulta se obtiene de una entrada existente mediante inputSelector).
  • title — título opcional que aparece sobre la entrada de búsqueda.

Origen de la entrada

  • inputSelector — selector CSS de una entrada o área de texto existente en la página.
    Si se proporciona, el bloque lee la consulta de ese elemento en lugar de su propia entrada o además de ella.

Botón de búsqueda

  • searchButtonIcon — URL de datos base64 para un icono (SVG/PNG).
  • showSearchButtonTitle / showSearchButtonIcon — muestra u oculta por separado la etiqueta y el icono del botón.

Resultados

  • topK — número máximo de resultados que se devolverán (predeterminado: 10).
  • snippetMaxChars — número máximo de caracteres que se muestran por fragmento (predeterminado: 160).
  • aiDisclosure — texto opcional de aviso sobre IA que aparece con el resumen generado para recordar a los visitantes que deben verificar las afirmaciones importantes. Déjelo vacío para usar el valor predeterminado del idioma de la interfaz seleccionado.

Idioma, dirección y tema

  • language — idioma de la interfaz (system, en, de, hu, etc.).
  • directionltr | rtl | auto.
  • colorModelight | dark | auto.
  • primaryColor — nombre o clave del color principal del tema.
  • themeOverrides — cadena CSS combinada con el tema del componente.