Usare Discourse MCP per creare rapidamente un tema

,

Spesso, l’ostacolo più grande per avviare una community è “renderla tua”.

Vuoi che il tuo font, il tuo stile corrispondano al tuo brand.

In questo post vorrei illustrare cosa si può ottenere in modo piuttosto semplice utilizzando:

Ho scelto Codex perché il recentemente rilasciato GPT-6 Astra è un artista visivo incredibilmente talentuoso. Kimi K3 e Fable sono anch’essi piuttosto forti in questo ambito, ma per questa demo sto usando Astra.

Passo 1 - Genera la chiave API

Vai a: your.site/admin/api/keys/new

Genera una chiave API globale.

Nota sulla sicurezza: conserva questa chiave in un luogo sicuro e valuta la possibilità di revocarla una volta completato il lavoro, poiché fornisce un accesso illimitato al sito.

Passo 2 - Aggiungi Discourse MCP

In questo tutorial sto usando codex:

modifica: ~/.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"}]',
]

(nota: Codex non ti consente di scegliere quali MCP abilitare o disabilitare; tutto ciò che è presente nella configurazione verrà abilitato. Puoi impostare enabled = false per disabilitare temporaneamente un MCP)

:writing_hand: Una nota sugli strumenti: il Discourse MCP supporta oltre 140 strumenti e questa configurazione li rende tutti disponibili. I moderni ambienti di esecuzione come Claude e Codex gestiscono senza problemi questa quantità, tuttavia molti ambienti potrebbero avere difficoltà con un numero di strumenti così elevato — ad esempio, Grok build richiederà un filtraggio.

Una volta aggiunto il Discourse MCP, assicurati di verificare che il tuo agente possa accedervi:

Passo 3 - Fornisci al tuo agente gli strumenti di cui ha bisogno per svolgere il lavoro

Un agente avrà prestazioni significativamente migliori se dispone di:

  1. Occhi, la capacità di vedere il proprio lavoro. (playwright MCP, computer use, ecc.)
  2. Contesto, il Discourse MCP aiuta, ma lo fa anche il codice sorgente di Discourse
  3. Generazione di immagini - nel caso in cui servano asset, ecc.

L’app ChatGPT ha un browser integrato, assicurati che lo utilizzi. Assicurati di clonare il codice base discourse/discourse e di avviare il tuo agente dalla directory di Discourse.

Nessuno di questi elementi è obbligatorio, ma averli porterà a risultati significativamente migliori.

Passo 4 - Fornisci al tuo agente intelligenza e un brief chiaro

In questo caso, dato che desidero vedere risultati molto buoni, ho optato per GPT-6 Astra XHIGH.

Successivamente ho scritto un breve brief con la mia IA su cosa desiderassi (un tema per una community in stile New Yorker)

Brief scritto dall'IA

Costruisci The Salon, un tema Discourse raffinato che dimostri quanto radicalmente un cliente possa trasformare l’identità di Discourse. Il riferimento creativo è The New Yorker: un’istituzione editoriale i cui lettori partecipano alla conversazione. Crea un’identità originale, non una replica: nessun logo preso in prestito o caratteri tipografici proprietari non autorizzati. Usa avorio caldo (#F7F4ED), inchiostro quasi nero (#20201E), un rosso editoriale sobrio (#B52B32), linee sottili, ampi spazi bianchi, titoli serif espressivi, testo del corpo serif leggibile e metadati sans-serif compatti. Le illustrazioni monocromatiche dovrebbero aggiungere spirito e carattere. Hai la libertà creativa di reperire, scaricare o generare qualsiasi asset necessario per la demo — font, illustrazioni, fotografia, avatar e icone — utilizzando materiale con licenza appropriata e mantenendo l’attribuzione dove richiesto. Evita card SaaS generiche, pergamene finte e disordine decorativo. Punta a una rivista letteraria contemporanea con una community vivace al suo interno, non a un forum standard con colori diversi.

Sei esplicitamente autorizzato a preparare l’istanza demo con le categorie, gli argomenti, le risposte, i profili di contributori fittizi e i contenuti di supporto necessari per rendere l’esperienza coinvolgente. Preserva i contenuti reali esistenti e mantieni l’attività fittizia chiaramente identificabile come dati di demo. Crea cinque redazioni —The Commons, Arts & Letters, City Life, Science & Ideas, Table Talk—con descrizioni e illustrazioni distintive. Costruisci un forte intestazione THE SALON, una discussione principale curata, titoli secondari e una sezione delle conversazioni più recenti. Inserisci discussioni thoughtful e varie come “Quando è diventato un side hustle ogni hobby?” e “Cosa cambierebbe davvero la tua opinione?”, con post di apertura convincenti, disaccordi sostanziali, risposte brevi, citazioni e immagini ben scelte. Popola abbastanza contenuti da dimostrare densità, scorrimento e navigazione; non usare riempitivi ripetitivi o lasciare schermate importanti vuote. Ogni titolo deve aprire un argomento reale e gli stati di attività, conteggio delle risposte e non letti devono rimanere visibili. Porta l’identità attraverso elenchi di categorie, pagine degli argomenti, ricerca e compositore: i post di apertura dovrebbero sembrare saggi bellissimi impaginati, mentre le risposte devono rimanere conversazioni compatte e utilizzabili. La versione mobile dovrebbe diventare un’esperienza a colonna singola tranquilla e la modalità oscura dovrebbe sembrare altrettanto intenzionale.

Ispeziona la versione di Discourse di destinazione e le API dei temi supportate prima di scegliere i dettagli di implementazione. Preferisci un tema manutenibile e componenti del tema focalizzati; evita patch al core, plugin non necessari, manipolazioni DOM fragili e funzionalità inventate. Rendi la curatela editoriale esplicita e configurabile. Lavora in autonomia su decisioni di design, asset e staging reversibili invece di chiedere approvazione per ogni dettaglio; stabilisci il linguaggio visivo con una homepage rappresentativa e una pagina degli argomenti popolata, poi completa le superfici di supporto. Consegna un tema installabile, i componenti richiesti, una configurazione dei contenuti demo riproducibile, la provenienza degli asset e istruzioni di installazione concise. Verifica il risultato in un’istanza Discourse reale su desktop e mobile, inclusa la navigazione da tastiera, il contrasto, gli stati non letti, la ricerca, la citazione e la composizione. Cattura la stessa community preparata prima e dopo l’applicazione del tema in modo che la trasformazione sia inconfutabile. Lo standard è una dimostrazione pronta per il cliente — non un mockup, non solo una bella homepage, ma una community coerente e funzionante con un senso del luogo completamente diverso.

  • consulta il codice sorgente di Discourse se necessario
  • https://figment123.discourse.group/ è un sito demo, puoi farci quello che vuoi, guarda i risultati man mano che procedi, abilita il tema
  • crea argomenti se necessario

Passo 5 - Un aspetto fantastico!

Un’ora e dieci minuti dopo, Astra Xhigh ha finito.

Un tema ispirato a New Yorker delizioso.

Il tema non è perfetto, ha casi limite; consiglierei un Passo 6 di affinamento, in cui incolli le aree in cui il design è fuori posto e l’agente le corregge. Ma come punto di partenza è assolutamente incredibile che possiamo farlo oggi. Non era possibile un anno fa.

Esempio di affinamento in tempo reale:

24 Mi Piace

A meno che non stia perdendo qualcosa, sembra che tu abbia creato un harness di agenti AI personalizzato per fare questo. :high_five: :+1:

Dato che un harness di agenti AI è un concetto più ampio rispetto a un harness di coding AI — come Claude Code, OpenAI Codex o OpenCode — ho cercato un buon riferimento introduttivo per chiunque sia nuovo alla terminologia e voglia fare chiarezza su questo argomento:

Se dovessi ricordare solo una riga:

Un modello pensa. Un agente agisce. Un harness impedisce all’agente di agire da idiota.


Personalmente, credo che stiamo raggiungendo il punto in cui gli agenti stessi stanno diventando meno innovativi, mentre gli harness AI su misura stanno diventando la parte più interessante della storia.

Invece di chiedere semplicemente: «Quale agente stai usando?», la domanda più utile potrebbe essere sempre più: «Quale harness hai costruito intorno?"

2 Mi Piace

No, ho effettivamente creato un harness personalizzato, ma questo è tutto basato sull’app ChatGPT standard su Linux, Discourse MCP e una prova di Discourse.

Su Mac, ChatGPT è ancora più ricco di funzionalità: può controllare qualsiasi app, quindi, ad esempio, potrebbe effettuare test in Firefox e Chrome durante il processo di sviluppo o persino nell’emulatore di iPhone.

Il mio harness personalizzato potrebbe ottenere risultati simili, pubblicherò un altro esempio. https://chatgpt.com/download/

6 Mi Piace

Sto solo aggiungendo un nuovo rilascio che ho trovato interessante per chi desidera confrontare e valutare un’alternativa ai modelli statunitensi:

1 Mi Piace

Posso senz’altro fare una demo veloce più tardi, ma dubito che si avvicini minimamente ad Astra.

3 Mi Piace

Ottimo! Mi rispecchia in particolare l’articolo principale! :sweat_smile:

All’epoca ero molto scettico, e DeepSeek mi ha dimostrato con la sua versione V4 che ne valeva la pena. GPT-6 Astra è un modello di frontiera, ma è molto probabile che DS 4.1, per compiti come questo, possa essere un’alternativa davvero valida.

Sì, per fare un test equo devo rifare il lavoro su Astra con il mio harness e poi cambiare il modello LLM, quindi ci vorrà un po’.

Questo funziona anche per chi auto-ospita.


Inoltre, ecco il mio tentativo. Devo ammettere che non mi piace molto per il progetto/comunità su cui sto lavorando, ma comunque ha fatto un buon lavoro.


4 Mi Piace

È fantastico! Apprezzo anche il realismo nel tuo racconto dell’esperienza con l’IA (“dude…” lol) :laughing:

1 Mi Piace

Ho eseguito una prova su DeepSeek 4.1 flash max.

Il transcript completo è qui: https://gisthost.github.io/?28dedf78da999ccca5b5b4feb1d58fc9/index.html

Questo test è stato un po’ contaminato, perché l’ho eseguito su un container dv e a un certo punto l’agente ha deciso che sarebbe stato più efficiente usare Docker per apportare le modifiche piuttosto che affidarsi al nostro MCP.

Per la generazione delle immagini ho usato Qwen 3 Image.

Per la visione, ho fornito all’agente chrome-devtools-mcp. Questo può essere facilmente configurato per utilizzare Chromium su Linux, che tende a essere la mia scelta preferita:

   "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’intera esecuzione si è basata su DeepSeek 4.1 flash sia per l’agente principale sia per i sub-agenti.

Ho usato term-llm.com per guidarlo in modalità TUI:

Risultati:

Osservazioni

Il brief è fondamentale: se hai un ottimo brief, i risultati saranno ottimi; se hai un brief scadente, sei alla mercé dell’LLM. Un ottimo brief parla della struttura e dei colori, fornisce esempi e così via.


DeepSeek 4.1 flash si è rivelato molto capace in questo test e molto economico. Con il 99% di lettura dalla cache e solo 2,8 milioni di token letti, questo sarebbe costato circa 1,52 dollari fuori picco o 3,04 dollari al prezzo di picco. Astra è significativamente più efficiente in termini di token, quindi non è un confronto equo, ma per contestualizzare, il prezzo di Astra per un numero simile di token sarebbe stato 325 dollari.

In modo conservativo, tenendo conto dell’efficienza dei token, stimo che si potrebbe realizzare un design come questo con Astra per 50-100 dollari; ottenerlo per 1,50 dollari è impossibile con i costi attuali delle API.

Ho eseguito questo test sul mio piano OpenCode go e non ho nemmeno sentito un piccolo intaglio sul mio piano da 10 dollari al mese:

Alcune cose mi hanno impressionato in questa esecuzione: è stato in grado di funzionare in autonomia per ore. Ha agito sulla base esatta dello stesso brief del post originale con diligenza e cura. Ha cercato di affrontare ogni punto del brief e ha testato meticolosamente tutto.

Ha fatto molte cose bene e il design è solido.

Detto questo, non è GPT 6 Astra: il design mi sembra più un design generato da un LLM. Lo spazio, i font e l’attenzione ai dettagli non erano gli stessi di Astra. È anche molto chiaro che non ha la stessa fedeltà visiva di Astra: dopo la prima iterazione c’erano molti glitch visivi evidenti, ma dal lato positivo è stato in grado di correggerne la maggior parte quando sollecitato.

Per qualche motivo si è rifiutato di correggere questo:

Ma le altre stranezze sono state gestite senza problemi.

La parte più impressionante della costruzione è stata quanto fosse ordinato.

  • Ha creato una cartella per le prove
  • Ha tentato di ingegnerizzare il tema in modo pulito, suddividendolo in molti file e persino testandolo

Nel complesso, non aspettatevi Astra da un modello 50/100 volte più economico, ma come strumento può certamente produrre risultati molto interessanti per una frazione del costo.

A posteriori, consiglierei di costruire il tema direttamente in un container dv e poi di caricarlo, perché si può eseguirlo in sicurezza in modalità YOLO e la configurazione è molto semplice.


Proverò a fare altri esperimenti in merito la prossima settimana e pubblicherò qualche esempio in più.

8 Mi Piace

Mi piacerebbe molto vedere qualcosa del genere :eyes:

2 Mi Piace

Ho provato e sembra che solo Astra riesca a ottenere l’aspetto esattamente come presentato, mentre gli altri modelli non sono riusciti a essere visivamente coerenti. Hai qualche suggerimento aggiuntivo per creare elementi di interfaccia utente personalizzati?

Per gli elementi di interfaccia personalizzati, consiglio vivamente di lavorare in un contenitore dv: sarà molto più facile trovare esempi nel codice.

1 Mi Piace