Comment signaler un contenu assisté par IA dans un blog Docusaurus

À l'heure des assistants IA puissants comme Google Gemini, il devient de plus en plus courant de les utiliser pour créer du contenu, brainstormer ou même coder. En tant que créateur de contenu, je crois à la transparence envers mon audience. Si une IA a contribué de manière significative à un contenu, le lecteur doit le savoir.

Deux cas concrets où je m'appuie sur une IA et où je lève donc ce drapeau : Automatiser les résumés TL;DR avec Gemini AI et AI-Powered Code Tooltips in Docusaurus.

Cet article est un guide pas à pas de la façon dont j'ai implémenté un indicateur « AI Assisted » dans mon blog Docusaurus. Quand j'ajoute ai_assisted: true au front matter YAML d'un article, deux choses se produisent automatiquement :

1. Une petite icône « AI Assisted » apparaît à côté de la date et du temps de lecture de l'article.
2. « Google Gemini » est ajouté comme co-auteur.

Voici comment faire la même chose sur votre propre blog.

Le résultat​

Voici ce que produit un simple flag ai_assisted: true, rendu sur un vrai article de ce blog :

L'icône se place juste à côté de la date et du temps de lecture, et l'IA apparaît comme un véritable co-auteur aux côtés de l'auteur humain — rien de caché, rien à cliquer pour le découvrir.

Pourquoi faire ça​

En tant que créateur de contenu, je crois à la transparence envers mon audience. Si une IA a contribué de manière significative à un contenu, le lecteur doit le savoir — pas enterré dans un pied de page, pas omis, mais là, dans l'en-tête, où la date et le temps de lecture se trouvent déjà. Un seul flag dans le front matter pilote à la fois l'icône et le co-auteur : pas d'étape séparée à oublier.

Étape 1 : le front matter ai_assisted​

Tout le processus est piloté par un seul flag dans le front matter de vos articles. C'est la partie la plus simple : ajoutez juste ai_assisted: true à chaque article pour lequel une IA vous a aidé.

---
slug: my-awesome-post?
title: My Awesome Post
authors: [christophe]?
ai_assisted: true?
---

... content ...

Ce flag sera le déclencheur de toute la logique que nous allons construire ensuite.

Étape 2 : créer le composant AIIcon​

Commençons par créer le composant visuel de notre indicateur. C'est un simple composant React qui affiche une icône et le texte « AI Assisted ».

Étape 3 : afficher l'icône grâce au swizzling​

Il faut maintenant faire apparaître ce composant dans l'en-tête de nos articles. Pour cela, nous devons modifier certains composants du thème de base de Docusaurus. C'est là que le swizzling entre en jeu. Le swizzling est une fonctionnalité de Docusaurus qui permet de remplacer un composant du thème par votre propre version personnalisée.

Dans cette implémentation, la logique est répartie entre trois composants : BlogPostItem, son Header, et la section Info à l'intérieur de l'en-tête. Nous devrons swizzler les trois.

Lancez les commandes suivantes dans votre terminal :

$ yarn run swizzle @docusaurus/theme-classic BlogPostItem

$ yarn run swizzle @docusaurus/theme-classic BlogPostItem/Header

$ yarn run swizzle @docusaurus/theme-classic BlogPostItem/Header/Info
▋

Cela va copier les fichiers originaux du thème dans votre répertoire src/theme, prêts à être édités.

3.1. Modifier src/theme/BlogPostItem/index.js​

Ici, nous allons importer notre nouveau AIIcon et décider s'il doit être affiché en fonction du front matter.

import AIIcon from "@site/src/components/Blog/AIIcon";
import { useBlogPost } from "@docusaurus/plugin-content-blog/client";
import BlogPostItemContainer from "@theme/BlogPostItem/Container";
import BlogPostItemContent from "@theme/BlogPostItem/Content";
import BlogPostItemFooter from "@theme/BlogPostItem/Footer";
import BlogPostItemHeader from "@theme/BlogPostItem/Header";

export default function BlogPostItem({ children, className }) {
  const { metadata, isBlogPostPage } = useBlogPost();
  const { frontMatter } = metadata;
  const containerClassName = useContainerClassName();
  const aiIcon = frontMatter.ai_assisted && isBlogPostPage ? <AIIcon /> : null;

  return (
    <BlogPostItemContainer className={clsx(containerClassName, className)}>
      <BlogPostItemHeader aiIcon={aiIcon} />
      <BlogPostItemContent>{children}</BlogPostItemContent>
      <BlogPostItemFooter />
    </BlogPostItemContainer>
  );
}

3.2. Modifier src/theme/BlogPostItem/Header/index.js​

Ce composant a juste besoin d'accepter la prop aiIcon et de la transmettre à son enfant.

import React from 'react';
import BlogPostItemHeaderTitle from '@theme/BlogPostItem/Header/Title';
import BlogPostItemHeaderInfo from '@theme/BlogPostItem/Header/Info';
import BlogPostItemHeaderAuthors from '@theme/BlogPostItem/Header/Authors';

// Add aiIcon to the function signature
export default function BlogPostItemHeader({aiIcon}) {
  return (
    <header>
      <BlogPostItemHeaderTitle />
      <BlogPostItemHeaderInfo aiIcon={aiIcon} />
      <BlogPostItemHeaderAuthors />
    </header>
  );
}

3.3. Modifier src/theme/BlogPostItem/Header/Info/index.js​

Enfin, ce composant reçoit la prop et l'affiche.

import React from "react";
import clsx from "clsx";
import { translate } from "@docusaurus/Translate";
// ... other imports

function Spacer() {
  return <>{" · "}</>;
}

export default function BlogPostItemHeaderInfo({ className, aiIcon }) {
  const { metadata } = useBlogPost();
  const { date, readingTime } = metadata;
  // ... other code

  return (
    <div className={clsx(styles.container, "margin-vert--md", className)}>
      <DateTime date={date} formattedDate={formatDate(date)} />
      {typeof readingTime !== "undefined" && (
        <>
          <Spacer />
          <ReadingTime readingTime={readingTime} />
        </>
      )}
      {aiIcon && <Spacer />}
      {aiIcon}
    </div>
  );
}

Avec ces modifications, l'icône « AI Assisted » apparaîtra désormais sur tout article de blog dont le front matter est correct.

Étape 4 : ajouter « Google Gemini » comme auteur​

Comme pour l'icône, nous pouvons ajouter automatiquement un auteur.

4.1. Définir l'auteur IA​

D'abord, définissez votre auteur IA dans blog/authors.yml.

gemini:
  name: Google Gemini
  title: AI Assistant
  url: https://gemini.google.com/
  image_url: /img/gemini-logo.webp

4.2. Swizzler le composant Authors​

Nous devons swizzler un composant de plus pour injecter la logique d'auteur.

$ yarn run swizzle @docusaurus/theme-classic BlogPostItem/Header/Authors▋

4.3. Modifier src/theme/BlogPostItem/Header/Authors/index.js​

Éditez maintenant le fichier fraîchement créé pour y ajouter la logique. Nous lisons le flag ai_assisted depuis le front matter et, s'il est à true, nous ajoutons notre objet auteur « Gemini » à la liste des auteurs.

import React from "react";
import clsx from "clsx";
import { useBlogPost } from "@docusaurus/plugin-content-blog/client";
import BlogAuthor from "@theme/Blog/Components/Author";
import styles from "./styles.module.css";

export default function BlogPostItemHeaderAuthors({ className }) {
  const {
    metadata: { authors },
    frontMatter,
    assets,
  } = useBlogPost();

  const allAuthors = [...authors];

  if (frontMatter.ai_assisted) {
    const geminiAuthor = {
      name: "Google Gemini",
      title: "AI Assistant",
      url: "https://gemini.google.com/",
      imageURL: "/img/gemini-logo.webp",
    };
    if (!allAuthors.find((a) => a.name === geminiAuthor.name)) {
      allAuthors.push(geminiAuthor);
    }
  }

  const authorsCount = allAuthors.length;
  // ... rest of the component

Conclusion​

Voilà, c'est tout ! Avec quelques personnalisations de composants, vous disposez maintenant d'un système solide pour signaler de façon transparente l'assistance d'une IA dans votre blog. Cette approche garde vos fichiers Markdown propres (un seul flag à ajouter) et centralise la logique dans votre thème Docusaurus, ce qui la rend facile à maintenir et à faire évoluer. En étant ouvert sur votre processus, vous gagnez la confiance de votre audience.

Ce flag ai_assisted, vous le verrez sur d'autres articles où l'IA a joué un vrai rôle, comme Comment j'ai utilisé Google Gemini Nano Banana sur mon blog (la génération de toutes mes images de bannière) ou Lovable.dev (un constructeur d'applications piloté par IA) — l'article même dont la capture d'écran ci-dessus est tirée.