Utiliser Discourse MCP pour créer rapidement un thème

,

Souvent, le plus grand obstacle à la création d’une communauté est de « faire de cet espace le vôtre ».

Vous souhaitez que la typographie et le style correspondent à votre marque.

Dans ce billet, je souhaite montrer ce qui peut être réalisé de manière assez simple à l’aide de :

J’ai choisi Codex ici, car le récemment sorti GPT-6 Astra est un artiste visuel incroyablement talentueux. Kimi K3 et Fable sont également très performants dans ce domaine, mais pour cette démonstration, j’utilise Astra.

Étape 1 - Générer une clé API

Accédez à : your.site/admin/api/keys/new

Générez une clé API globale.

Note de sécurité : conservez cette clé en lieu sûr, envisagez de la révoquer une fois le travail terminé, car elle fournit un accès illimité au site.

Étape 2 - Ajouter Discourse MCP

Dans ce tutoriel, j’utilise codex :

modification : ~/.codex/config.toml

[mcp_servers.discourse]
command = "npx"
args = [
  "-y",
  "@discourse/mcp@latest",
  "--toolsets",
  "all",
  "--allow-writes",
  "--site",
  "https://figment123.discourse.group",
  "--auth_pairs",
  '[{"site":"YOUR_SITE","api_key":"YOUR_API_KEY","api_username":"system"}]',
]

(remarque : Codex ne vous permet pas de choisir quels MCP sont activés ou désactivés, tout ce qui se trouve dans la configuration sera activé. Vous pouvez placer enabled = false pour désactiver temporairement un MCP)

:writing_hand: Une note sur les outils : le Discourse MCP prend en charge plus de 140 outils, cette configuration les rend tous disponibles. Les harnais modernes tels que Claude et Codex peuvent gérer cela sans problème, cependant, de nombreux harnais peuvent avoir du mal avec un nombre d’outils aussi élevé - par exemple, Grok build nécessitera un filtrage.

Une fois que vous avez ajouté Discourse MCP, assurez-vous de confirmer que votre agent peut y accéder :

Étape 3 - Fournir à votre agent les outils dont il a besoin pour faire le travail

Un agent fonctionnera de manière nettement meilleure s’il dispose de :

  1. Des yeux, la capacité de voir son travail. (playwright MCP, computer use, etc.)
  2. Du contexte, le Discourse MCP aide, mais le code source de Discourse aussi.
  3. La génération d’images - au cas où vous auriez besoin d’actifs, etc.

L’application ChatGPT dispose d’un navigateur intégré, assurez-vous qu’il l’utilise. Assurez-vous de cloner le code source discourse/discourse et de démarrer votre agent à partir du répertoire Discourse.

Aucun de ces éléments n’est obligatoire, mais en disposer entraînera des résultats nettement meilleurs.

Étape 4 - Donner à votre agent de l’intelligence et un brief clair

Dans ce cas, comme je voulais obtenir de très bons résultats, j’ai opté pour GPT-6 Astra XHIGH.

Ensuite, j’ai écrit un petit brief avec mon IA sur ce que je voulais (un thème de communauté inspiré de The New Yorker)

Brief rédigé par IA

Créez The Salon, un thème Discourse soigné qui démontre à quel point un client peut transformer radicalement l’identité de Discourse. La référence créative est The New Yorker : une institution éditoriale dont les lecteurs participent à la conversation. Créez une identité originale, pas une réplique—pas de logos empruntés ou de polices propriétaires non licenciées. Utilisez un ivoire chaud (#F7F4ED), une encre quasi noire (#20201E), un rouge éditorial discret (#B52B32), de fines règles, une généreuse marge blanche, des titres serif expressifs, un texte de corps serif lisible et des métadonnées sans-serif compactes. Les illustrations monochromes doivent ajouter de l’esprit et du caractère. Vous avez la latitude créative de chercher, télécharger ou générer tous les actifs dont la démonstration a besoin—polices, illustrations, photographie, avatars et icônes—en utilisant des matériellement correctement licenciés et en conservant l’attribution là où c’est requis. Évitez les cartes SaaS génériques, le parchemin factice et le désordre décoratif. Visez un magazine littéraire contemporain avec une communauté vivante à l’intérieur, pas un forum standard avec des couleurs différentes.

Vous êtes explicitement autorisé à aménager l’instance de démonstration avec les catégories, les sujets, les réponses, les profils de contributeurs fictifs et le contenu de soutien nécessaires pour rendre l’expérience convaincante. Préservez le contenu réel existant et gardez l’activité fictive clairement identifiable comme des données de démonstration. Créez cinq départements éditoriaux—The Commons, Arts & Letters, City Life, Science & Ideas, Table Talk—avec des descriptions distinctes et des illustrations. Construisez un fort mât THE SALON, une discussion principale soigneusement sélectionnée, des titres secondaires et une section des dernières conversations. Insérez des discussions variées et réfléchies telles que « Quand est-ce que chaque passe-temps est devenu un side hustle ? » et « Qu’est-ce qui changerait réellement votre avis ? », avec des messages d’ouverture convaincants, des désaccords substantiels, de courtes réponses, des citations et des images bien choisies. Remplissez suffisamment de contenu pour démontrer la densité, le défilement et la navigation ; n’utilisez pas de remplissage répétitif ou ne laissez pas les écrans importants vides. Chaque titre doit ouvrir un sujet réel, et l’activité, les compteurs de réponses et les états non lus doivent rester visibles. Portez l’identité à travers les listes de catégories, les pages de sujets, la recherche et le composeur : les messages d’ouverture doivent ressembler à des essais magnifiquement composés, tandis que les réponses restent des conversations compactes et utilisables. Le mobile doit devenir une expérience calme en une seule colonne, et le mode sombre doit sembler tout aussi délibéré.

Inspectez la version cible de Discourse et les API de thème prises en charge avant de choisir les détails d’implémentation. Préférez un thème maintenable et des composants de thème ciblés ; évitez les correctifs du noyau, les plugins inutiles, la manipulation fragile du DOM et les fonctionnalités inventées. Rendez la curation éditoriale explicite et configurable. Travaillez de manière autonome sur les décisions de conception, d’actifs et d’aménagement réversibles plutôt que de demander l’approbation pour chaque détail ; établissez le langage visuel avec une page d’accueil représentative et une page de sujet remplie, puis terminez les surfaces de soutien. Livrez un thème installable, les composants requis, une configuration reproductible du contenu de démonstration, la provenance des actifs et des instructions d’installation concises. Vérifiez le résultat dans une instance Discourse réelle sur ordinateur de bureau et mobile, y compris la navigation au clavier, le contraste, les états non lus, la recherche, la citation et la composition. Capturez la même communauté aménagée avant et après l’application du thème pour que la transformation soit incontestable. La norme est une démonstration prête pour le client—pas un maquette, pas juste une belle page d’accueil, mais une communauté cohérente et fonctionnelle avec un sentiment de lieu entièrement différent.

  • consultez le source Discourse si nécessaire
  • https://figment123.discourse.group/ est un site de démonstration, vous pouvez faire ce que vous voulez avec, regardez les résultats au fur et à mesure, activez le thème
  • créez des sujets si nécessaire

Étape 5 - Superbe !

Une heure et dix minutes plus tard, Astra Xhigh a terminé.

Un thème inspiré de New Yorker magnifique.

Le thème n’est pas parfait, il a des cas limites, je recommanderais une Étape 6 de raffinement, où vous collez les zones où la conception est incorrecte et l’agent corrige. Mais comme point de départ, c’est absolument incroyable que nous puissions faire cela aujourd’hui. Ce n’était pas possible il y a un an.

Exemple de raffinement en temps réel :

24 « J'aime »

À moins que je ne me trompe, il semble que vous ayez créé un harnais d’agent IA personnalisé pour faire cela. :high_five: :+1:

Puisqu’un harnais d’agent IA est un concept plus large qu’un harnais de codage IA — comme Claude Code, OpenAI Codex ou OpenCode —, je me suis mis en quête d’une bonne référence d’introduction pour quiconque est nouveau dans la terminologie et souhaite dissiper un peu de brouillard :

Si vous ne retenez qu’une seule ligne :

Un modèle pense. Un agent agit. Un harnais empêche l’agent d’agir comme un idiot.


Personnellement, je pense que nous atteignons peut-être le point où les agents eux-mêmes deviennent moins novateurs, tandis que les harnais IA conçus sur mesure deviennent la partie la plus intéressante de l’histoire.

Au lieu de simplement demander « Quel agent utilisez-vous ? », la question plus utile pourrait de plus en plus être « Quel harnais avez-vous construit autour de lui ? »

2 « J'aime »

Non, j’ai bien construit un harnais sur mesure, mais ici, il s’agit uniquement de l’application ChatGPT de base sur Linux, du MCP Discourse et d’un essai Discourse.

Sur Mac, ChatGPT est encore plus riche : il peut contrôler n’importe quelle application, par exemple tester dans Firefox et Chrome pendant le processus de construction, ou même utiliser le simulateur iPhone.

Mon harnais sur mesure pourrait obtenir des résultats similaires, je publierai un autre exemple. https://chatgpt.com/download/

6 « J'aime »

J’ajoute simplement une nouvelle version que j’ai trouvée intéressante pour ceux qui souhaitent comparer et évaluer une alternative aux modèles américains :

1 « J'aime »

Je pourrai certainement faire une démo rapide plus tard, mais je doute qu’il soit même à l’approche d’Astra.

3 « J'aime »

Génial ! Je me reconnais particulièrement dans l’article en une ! :sweat_smile:

J’étais très sceptique à l’époque, et DeepSeek m’a prouvé que ça valait le coup dans sa version V4. GPT-6 Astra est un modèle de pointe, mais il est très probable que DS 4.1 soit une excellente alternative pour ce type de tâches.

Oui, pour faire un test équitable, il faut que je refasse le travail sur Astra avec mon propre harnais, puis que je change de LLM, donc ça va prendre un peu de temps.

Cela fonctionne aussi pour les auto-hébergeurs.


De plus, voici ma tentative. Je dirais que je ne l’aime pas particulièrement pour le projet/la communauté sur laquelle je travaille, mais il a quand même fait un bon travail.


4 « J'aime »

C’est génial ! J’apprécie aussi le réalisme de ton expérience avec l’IA (« mec… » lol) :laughing:

1 « J'aime »

J’ai effectué un essai avec DeepSeek 4.1 flash max.

Le transcript complet est disponible ici : https://gisthost.github.io/?28dedf78da999ccca5b5b4feb1d58fc9/index.html

Cet essai a été légèrement contaminé, car je l’ai exécuté sur un conteneur dv et à un certain moment, l’agent a décidé qu’il serait plus efficace d’utiliser Docker pour effectuer les modifications plutôt que de s’appuyer sur notre MCP.

Pour la génération d’images, j’ai utilisé Qwen 3 Image.

Pour l’observation, j’ai fourni à l’agent le chrome-devtools-mcp. Il est facile de le configurer pour utiliser Chromium sur Linux, ce qui est généralement mon choix :

   "chromium-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--headless=true",
        "--executable-path=/usr/bin/chromium",
        "--chrome-arg=--no-sandbox",
        "--chrome-arg=--disable-dev-shm-usage"
      ]
    },

L’ensemble de l’exécution a reposé sur DeepSeek 4.1 flash, tant pour l’agent principal que pour les sous-agents.

J’ai utilisé term-llm.com pour le piloter en mode TUI :

Résultats :

Observations

Le brief est crucial. Si vous avez un excellent brief, les résultats seront excellents ; si vous avez un mauvais brief, vous êtes à la merci du LLM. Un excellent brief décrit la structure et les couleurs, donne des exemples, etc.


DeepSeek 4.1 flash s’est révélé très capable lors de cet essai et très économique. Avec 99 % de lecture en cache et seulement 2,8 millions de jetons lus, cela aurait coûté environ 1,52 en heures creuses ou **3,04 ** aux heures pleines. Astra est beaucoup plus efficace en termes de jetons, donc la comparaison n’est pas tout à fait équitable, mais pour donner un ordre de grandeur, le prix d’Astra pour un nombre de jetons similaire serait de 325 $.

Même en tenant compte de l’efficacité en jetons, je suppose prudemment que vous pourriez réaliser un design de ce type avec Astra pour 50 à 100 dollars. Obtenir ce résultat pour 1,50 $ est impossible avec les coûts actuels des API.

J’ai exécuté cela sur mon forfait OpenCode go, et je n’ai même pas senti de petite entaille dans mon forfait de 10 $ par mois :

Plusieurs choses m’ont impressionné lors de cette exécution : elle a pu se dérouler sans surveillance pendant des heures. Elle a agi sur le même brief exact que dans le premier message avec diligence et soin. Elle a essayé d’aborder chaque point du brief et a méticuleusement testé tout.

Elle a bien fait beaucoup de choses et le design est solide.

Cela dit, ce n’est pas GPT 6 Astra. Le design me semble plus être un design de LLM. L’espacement, les polices et l’attention aux détails n’étaient pas au même niveau qu’avec Astra. Il est également très clair qu’il n’a pas la même fidélité visuelle qu’Astra ; il y avait de nombreux bugs visuels évidents après l’itération 1, mais en contrepartie, il a été capable de corriger la plupart d’entre eux lorsqu’on lui a demandé.

Pour une raison inconnue, il a refusé de corriger celui-ci :

Mais le reste des particularités a été géré sans problème.

La partie la plus impressionnante de la construction était à quel point il insistait pour rester ordonné :

  • Il a créé un dossier pour les preuves
  • Il a tenté d’ingénierier proprement le thème, de le diviser en de nombreux fichiers et même de le tester

En résumé, ne vous attendez pas à obtenir Astra avec un modèle 50 à 100 fois moins cher, mais en tant qu’outil, il peut certainement produire des résultats très intéressants pour une fraction du coût.

En y repensant, je recommanderais de construire le thème directement dans un conteneur dv et de le téléverser ensuite, car vous pouvez l’exécuter en toute sécurité en mode YOLO et la configuration est très facile.


J’essaierai de faire d’autres expériences à ce sujet la semaine prochaine et posterai quelques exemples supplémentaires. Si vous avez un brief spectaculaire, faites-le-moi savoir.

En général, j’utilise plusieurs LLM de plusieurs fournisseurs pour construire des choses, donc un exemple de type « comment je travaille généralement » pourrait être intéressant.

8 « J'aime »

J’aimerais bien voir quelque chose comme ça aussi :eyes:

2 « J'aime »

J’ai essayé et il semble que seul Astra parvienne à reproduire exactement l’apparence présentée, tandis que les autres modèles ont échoué à être aussi visuellement cohérents. Avez-vous d’autres suggestions pour créer des éléments d’interface utilisateur personnalisés ?

Pour les éléments d’interface utilisateur personnalisés, je recommande vivement de travailler dans un conteneur dv, car cela facilitera grandement la recherche d’exemples dans le code.

1 « J'aime »