Création d’un générateur de billets de blog alimenté par MCP avec Nextra et LLMs

Name

Elwynn AI

Updated on 14/04/2025

Dans ce tutoriel, nous allons concevoir une solution technique qui vous permet de converser avec un grand modèle de langage (LLM) et lui demander de générer du contenu pour votre blog basé sur Nextra. Le contenu sera écrit en MDX et automatiquement enregistré dans le dépôt GitHub de votre blog sous forme de nouvelles publications. Nous explorerons deux implémentations de cette intégration Model Context Protocol (MCP) :

1. Sans serveur via GitHub Actions : Utiliser un workflow GitHub Actions pour gérer tout le processus – invoquer le LLM et valider la nouvelle publication.
2. Hébergé via API Next.js : Mettre en place un serveur MCP simple comme un endpoint API Next.js (en utilisant par exemple jojocys/nextra-agent-blog comme plateforme de blog) qui agit en tant que client MCP. Cet endpoint appellera le LLM et poussera les nouveaux articles vers GitHub en temps réel.

Le MCP est une norme ouverte pour connecter des assistants IA à des outils et sources de données externes. Il fournit une interface universelle permettant aux modèles IA d’interagir avec des systèmes comme des services cloud, des bases de données – voire des plateformes telles que GitHub ou Slack – sans nécessiter d’intégration customisée pour chaque outil (MCP - Explication du Model Context Protocol (opens in a new tab)). En d’autres termes, MCP permet à des agents IA d’utiliser des “outils” pour effectuer des actions au-delà de leur connaissance de base. Par exemple, un assistant AI pourrait utiliser MCP pour réaliser des tâches comme envoyer des emails, déployer du code ou publier des articles de blog (Construire et déployer des serveurs MCP sur Cloudflare (opens in a new tab)). Ici, notre “outil” sera la capacité de créer un nouveau fichier MDX et de le valider dans un dépôt Git (le blog).

Au terme de ce guide, vous disposerez d’un système fonctionnel où vous (en tant qu’unique utilisateur) pourrez demander à une IA de rédiger un article de blog qui apparaîtra automatiquement sur votre site. Nous nous concentrerons sur la façon dont les composants se connectent (client MCP↔︎LLM et LLM↔︎GitHub) en considérant un cas d’utilisation à utilisateur unique, sans authentification supplémentaire.

Vue d’ensemble de la solution

Avant de plonger dans le code, voici l’architecture et le flux de travail :

• Plateforme de Blog : Nous utilisons un site Next.js avec le thème “blog” de Nextra (par exemple dans le dépôt jojocys/nextra-agent-blog) pour héberger notre contenu. Les articles sont stockés en fichiers MDX (Markdown avec JSX) dans le dépôt (par exemple dans pages/posts). Nextra affichera chaque fichier MDX de ce dossier comme un article de blog, en utilisant ses métadonnées (frontmatter : titre, date, etc.) et son contenu.

• LLM (Assistant IA) : Nous utiliserons un modèle IA (par exemple GPT d’OpenAI ou Claude d’Anthropic) pour générer le contenu des billets. L’IA recevra un prompt (pouvant être via un interface de chat ou un appel API) décrivant le type d’article à rédiger, et produira en réponse un article MDX.

• Client & Serveur MCP : En termes MCP, le LLM agit comme un hôte pouvant appeler des outils externes via une interface client-serveur. Nous mettrons en œuvre une configuration MCP minimaliste :

  • Dans le cas sans serveur (GitHub Actions), le workflow joue le rôle de client MCP. Il initie la conversation avec l’IA (hôte) puis exécute l’“outil d’écriture” en validant le contenu dans le dépôt.
  • Dans le cas hébergé par Next.js API, on créera une route API qui sera à la fois un client MCP (en appuyant l’appel à l’IA) et un serveur MCP (fournissant l’outil de commit dans GitHub). C’est une passerelle entre l’IA et GitHub.

• Intégration GitHub : Dans les deux cas, on utilisera l’API GitHub pour ajouter le nouvel article dans le dépôt. Cela pourra se faire via des opérations Git directes ou via l’API HTTP de GitHub. (On verra des exemples pour chaque méthode.) (Notons que l’écosystème MCP d’Anthropic intègre déjà un connecteur GitHub prêt à l’emploi pour la gestion de dépôt (GitHub - modelcontextprotocol/servers (opens in a new tab)), mais ici, nous apprendrons à le faire nous-mêmes.)

Avec ce contexte, commençons avec la méthode serverless basée sur GitHub Actions.

Approche 1 : Génération de blog sans serveur avec GitHub Actions

Dans cette approche, nous utilisons un workflow GitHub Actions pour générer et publier des articles à la demande. Pas besoin de serveur dédié : GitHub créera un runner pour exécuter les étapes à chaque déclenchement. Le workflow effectuera :

1. Déclencheur : Vous, utilisateur, lancez manuellement ou via un événement repository_dispatch le workflow, en fournissant un prompt ou sujet pour l’article.
2. Appel LLM : Le workflow appelle l’API de LLM (OpenAI ou Claude) avec un prompt pour demander un article MDX sur le sujet.
3. Création du fichier : Il capture la réponse du LLM (le contenu MDX) et le sauvegarde sous forme d’un nouveau fichier .mdx dans le dépôt, intégrant un frontmatter YAML (titre, date, etc.).
4. Validation dans GitHub : Ce nouveau fichier est commis et poussé dans la branche principale, rendant l’article visible.

Créons le fichier workflow. Dans votre dépôt Nextra, ajoutez .github/workflows/llm-agent.yml :

name: Générateur d’articles avec LLM
 
# Déclenchement manuel avec entrée
on:
  workflow_dispatch:
    inputs:
      prompt:
        description: "Thème ou prompt pour l’article de blog"
        required: true
        type: string
 
permissions:
  contents: write  # pour pousser dans le dépôt
 
jobs:
  generate_post:
    runs-on: ubuntu-latest
    steps:
      - name: Vérification du dépôt
        uses: actions/checkout@v3
 
      - name: Installer jq
        run: sudo apt-get -y install jq
 
      - name: Générer le contenu avec OpenAI
        env:
          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
        run: |
          echo "Prompt: ${{ github.event.inputs.prompt }}"
          REQUEST_DATA=$(jq -n --arg prompt "${{ github.event.inputs.prompt }}" '{
              "model": "gpt-3.5-turbo",
              "messages": [
                {"role": "system", "content": "Vous êtes un assistant de blog technique. Rédigez un article MDX avec un frontmatter YAML (titre, date, description, type: posts) sur le sujet donné."},
                {"role": "user", "content": $prompt}
              ]
            }')
          RESPONSE=$(curl -sS -H "Content-Type: application/json" \
                          -H "Authorization: Bearer $OPENAI_API_KEY" \
                          -d "$REQUEST_DATA" \
                          https://api.openai.com/v1/chat/completions)
          POST_CONTENT=$(echo "$RESPONSE" | jq -r '.choices[0].message.content')
          TIMESTAMP=$(date +"%Y-%m-%d-%H%M")
          FILENAME="posts/llm-post-$TIMESTAMP.mdx"
          echo "Création du fichier : $FILENAME"
          echo "$POST_CONTENT" > $FILENAME
 
      - name: Commit et push
        run: |
          git config user.name "github-actions"
          git config user.email "github-actions@users.noreply.github.com"
          git add posts/*.mdx
          git commit -m "Ajout d'un nouvel article généré par LLM"
          git push

Explications :
Ce workflow, lancé manuellement, vous permet de spécifier un sujet. Il consulte l’API OpenAI, récupère le contenu MDX, le sauvegarde, puis le pousse dans le dépôt. La publication sera effective dès que la branche principale sera mise à jour, déclenchant potentiellement une rebuild du site.

Vous pouvez le déclencher dans l’onglet Actions, entrer un prompt, et observer le processus. La nouvelle publication apparaîtra dans votre blog après déploiement. Si vous souhaitez utiliser Claude, ajustez l’appel API en conséquence.