Blocs IA pour WordPress avec WP Suite AI-Kit

AI‑Kit expose l'interface front-end principalement via le bloc Gutenberg AI‑Kit Feature (Pro).

  • Si vous avez besoin de la même interface en dehors de Gutenberg (Classic Editor, Elementor, modèles de thème), voir Shortcode.
  • Le chatbot du site entier se configure depuis l'interface d'administration, voir Chatbot.

Bloc AI‑Kit Feature (Pro)

Le bloc AI‑Kit Feature rend une interface configurable qui permet aux visiteurs d'exécuter des actions d'IA ponctuelles telles que :

  • Rédiger
  • Réécrire
  • Relire
  • Résumer
  • Traduire

Sous le capot, le bloc utilise les mêmes API d'exécution documentées dans API JavaScript.

Fonctionnalité Pro

Le bloc Feature fait partie de la surface de fonctionnalités front-end Pro. Si Pro n'est pas actif, le bloc peut ne pas s'afficher côté front-end.


Référence de configuration

L'interface d'inspection Gutenberg n'expose pas forcément toutes les options dans chaque build, mais les concepts correspondent aux mêmes props sous-jacentes utilisées par le shortcode et l'API JavaScript.

Comportement de base

  • mode — ce que fait l'interface : write | rewrite | proofread | summarize | translate.
  • variation — mise en page de l'interface : default (inline/panel) ou modal.
  • title — titre facultatif affiché dans l'en-tête du panneau/de la fenêtre modale.
  • autoRun — si true, s'exécute immédiatement à l'ouverture (courant pour « Résumer cette page »).
  • editable — si true, permet aux visiteurs de modifier la sortie générée (avec un aperçu en direct) avant le déclenchement de onAccept.
  • acceptButtonTitle — libellé personnalisé pour le bouton « Appliquer/Insérer/Accepter » (lorsqu'un flux d'acceptation est activé).
  • onDeviceTimeout — remplace le délai d'attente par défaut sur l'appareil (5 s pour Translate, 45 s pour les autres modes). N'a d'effet que lorsque l'IA sur l'appareil est disponible (API Settings ≠ « Backend only »).

Entrée et options par défaut

Vous pouvez préremplir l'outil avec une charge utile default :

  • default.text — texte initial.
  • default.instructions — consignes supplémentaires pour le modèle.
  • default.outputLanguage — code de langue ou auto.
  • default.tone — ton du rédacteur/réécrivain.
  • default.length — longueur du rédacteur/réécrivain/résumeur.
  • default.type — type du résumeur.
  • default.outputFormatplain-text | markdown | html.

Autoriser les remplacements par le visiteur

allowOverride contrôle ce que le visiteur a le droit de modifier dans l'interface :

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

Disposition des options et sélecteurs

  • optionsDisplay — ajuste le rendu de l'accordéon des options.
  • inputSelector — sélecteur CSS pour lire le texte d'entrée depuis la page.
  • outputSelector — sélecteur CSS où les résultats doivent être synchronisés (si le mode choisi le prend en charge).

Langue et direction

  • language — langue de l'interface pour les libellés (indépendante de default.outputLanguage).
  • directionltr | rtl | auto.

Thème et apparence

Ces options correspondent aux paramètres de thème Mantine :

  • colorModelight | dark | auto.
  • primaryColor — nom d'une couleur Mantine (ou clé de couleur personnalisée).
  • primaryShade — nombre (0–9) ou { light, dark }.
  • colors — couleurs nommées personnalisées facultatives.
  • themeOverrides — chaîne CSS fusionnée avec le thème du composant

Pour une personnalisation basée sur des jetons CSS (lanceur/chat/espacement, etc.), voir Thème (variables CSS).

Bouton d'ouverture (variation modale)

Lorsque variation="modal", vous pouvez personnaliser le bouton d'ouverture :

  • openButtonTitle — libellé du bouton.
  • openButtonIcon — Data URL base64 (par exemple data:image/svg+xml;base64,...).
  • showOpenButtonTitle / showOpenButtonIcon — afficher/masquer indépendamment le titre et l'icône.
  • showRegenerateOnBackendButton — active ou désactive l'action secondaire de régénération dans le pied de page de la fenêtre modale.

Bloc AI‑Kit Doc Search (Pro)

Le bloc AI‑Kit Doc Search rend une interface de recherche légère qui interroge votre base de connaissances et renvoie :

  • une courte réponse / synthèse, et
  • des cartes source facultatives (documents + extraits)

C'est utile pour les pages de « centre d'aide », la documentation produit, les portails internes, ou partout où vous voulez que les visiteurs recherchent dans vos documents sans utiliser un chatbot complet.

Fonctionnalité Pro

Le bloc Doc Search fait partie de la surface de fonctionnalités front-end Pro. Si Pro n'est pas actif, le bloc peut ne pas s'afficher côté front-end.

Sous le capot, Doc Search utilise les mêmes API d'exécution documentées dans API JavaScript (notamment sendSearchMessage() et renderSearchComponent()).


Comportement de base

  • variation — mise en page de l'interface.
  • autoRun — si true, s'exécute immédiatement (utile lorsque la requête est récupérée depuis une entrée existante via inputSelector).
  • title — titre facultatif affiché au-dessus du champ de recherche.

Source d'entrée

  • inputSelector — sélecteur CSS pour un champ de saisie/textarea existant sur la page. Si fourni, le bloc lit la requête à partir de cet élément au lieu de son propre champ de saisie, ou en complément de celui-ci.

Bouton de recherche

  • searchButtonIcon — Data URL base64 pour une icône (SVG/PNG).
  • showSearchButtonTitle / showSearchButtonIcon — afficher/masquer indépendamment le libellé et l'icône du bouton.

Résultats

  • topK — nombre maximal de résultats à renvoyer (par défaut : 10).
  • snippetMaxChars — nombre maximal de caractères affichés par extrait (par défaut : 160).
  • aiDisclosure — texte facultatif de disclosure IA affiché avec la synthèse générée, rappelant aux visiteurs de vérifier les affirmations importantes. Laissez vide pour utiliser la valeur par défaut de la langue d'interface sélectionnée.

Langue, direction, thème

  • language — langue de l'interface (system, en, de, hu, etc.).
  • directionltr | rtl | auto.
  • colorModelight | dark | auto.
  • primaryColor — clé/nom de la couleur principale du thème.
  • themeOverrides — chaîne CSS fusionnée avec le thème du composant.