Usando o Discourse MCP para criar um tema rapidamente

,

Muitas vezes, o maior obstáculo para começar uma comunidade é “torná-la sua”.

Você quer que sua fonte, seu estilo e sua identidade estejam alinhados à sua marca.

Neste post, gostaria de abordar o que pode ser alcançado de forma bastante direta com:

Escolhi o Codex aqui, pois o recém-lançado GPT-6 Astra é um artista visual incrivelmente talentoso. O Kimi K3 e o Fable também são bastante fortes nesse departamento, mas para esta demonstração estou usando o Astra.

Passo 1 - Gerar chave de API

Acesse: your.site/admin/api/keys/new

Gere uma chave de API global.

Nota de segurança: mantenha esta chave em local seguro e considere revogá-la quando o trabalho estiver concluído, pois ela fornece acesso irrestrito ao site.

Passo 2 - Adicionar o Discourse MCP

Neste tutorial, estou usando o codex:

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

(observação: o Codex não permite escolher quais MCPs estão habilitados ou desabilitados; tudo o que estiver na configuração será habilitado. Você pode adicionar enabled = false para desabilitar um MCP temporariamente)

:writing_hand: Uma nota sobre ferramentas: O Discourse MCP suporta mais de 140 ferramentas, e esta configuração as torna todas disponíveis. Ambientes modernos, como Claude e Codex, lidam com isso sem problemas. No entanto, muitos ambientes podem ter dificuldade com uma contagem de ferramentas tão alta — por exemplo, o Grok build exigirá filtragem.

Depois de adicionar o Discourse MCP, certifique-se de confirmar que seu agente pode acessá-lo:

Passo 3 - Fornecer ao seu agente as ferramentas de que ele precisa para fazer o trabalho

Um agente terá um desempenho significativamente melhor se tiver:

  1. Olhos, a capacidade de ver seu trabalho. (playwright MCP, computer use, etc.)
  2. Contexto, o Discourse MCP ajuda, mas o código-fonte do Discourse também.
  3. Geração de imagens - caso você precise de recursos visuais, etc.

O aplicativo ChatGPT possui um navegador integrado; certifique-se de que ele o utilize. Certifique-se de clonar o repositório discourse/discourse e iniciar seu agente a partir do diretório do Discourse.

Nada disso é obrigatório, mas ter isso resultará em resultados significativamente melhores.

Passo 4 - Dar ao seu agente inteligência e um briefing claro

Neste caso, como quero ver resultados muito bons, optei pelo GPT-6 Astra XHIGH.

Em seguida, escrevi um pequeno briefing com minha IA sobre o que eu queria (um tema de comunidade inspirado no The New Yorker)

Briefing criado por IA

Construa The Salon, um tema polido para o Discourse que demonstre como um cliente pode transformar radicalmente a identidade do Discourse. A referência criativa é The New Yorker: uma instituição editorial cujos leitores participam da conversa. Crie uma identidade original, não uma réplica — sem logotipos emprestados ou tipografias proprietárias sem licença. Use marfim quente (#F7F4ED), tinta quase preta (#20201E), vermelho editorial contido (#B52B32), linhas finas, espaços em branco generosos, manchetes serifadas expressivas, texto de corpo serifado legível e metadados sans-serif compactos. Ilustrações em monocromia devem adicionar humor e personalidade. Você tem liberdade criativa para buscar, baixar ou gerar quaisquer recursos necessários para a demonstração — fontes, ilustrações, fotografia, avatares e ícones — usando material com licença apropriada e mantendo a atribuição onde necessário. Evite cartões SaaS genéricos, pergaminho falso e bagunça decorativa. O objetivo é uma revista literária contemporânea com uma comunidade viva dentro dela, não um fórum padrão com cores diferentes.

Você está explicitamente autorizado a configurar a instância de demonstração com as categorias, tópicos, respostas, perfis de contribuidores fictícios e conteúdo de apoio necessários para tornar a experiência convincente. Preserve o conteúdo real existente e mantenha a atividade fictícia claramente identificável como dados de demonstração. Crie cinco departamentos editoriais — The Commons, Arts & Letters, City Life, Science & Ideas, Table Talk — com descrições e ilustrações distintas. Construa uma forte cabeçalho THE SALON, uma discussão principal curada, manchetes secundárias e uma seção de conversas mais recentes. Popule com discussões pensadas e variadas, como “Quando é que todo hobby se tornou um bico?” e “O que realmente mudaria sua opinião?”, com posts de abertura convincentes, discordâncias substanciais, respostas curtas, citações e imagens bem escolhidas. Popule com conteúdo suficiente para demonstrar densidade, rolagem e navegação; não use preenchimento repetitivo nem deixe telas importantes vazias. Cada manchete deve abrir um tópico real, e a atividade, contagens de respostas e estados não lidos devem permanecer visíveis. Carregue a identidade através das listas de categorias, páginas de tópicos, busca e compositor: os posts de abertura devem parecer ensaios lindamente diagramados, enquanto as respostas permanecem conversas compactas e utilizáveis. O modo móvel deve se tornar uma experiência calma de coluna única, e o modo escuro deve parecer igualmente intencional.

Inspecione a versão do Discourse de destino e as APIs de tema suportadas antes de escolher os detalhes de implementação. Prefira um tema mantível e componentes de tema focados; evite patches no núcleo, plugins desnecessários, manipulação frágil de DOM e funcionalidades inventadas. Torne a curadoria editorial explícita e configurável. Trabalhe de forma autônoma em decisões de design, recursos e configuração reversíveis, em vez de pedir aprovação para cada detalhe; estabeleça a linguagem visual com uma página inicial representativa e uma página de tópico populada, e depois finalize as superfícies de apoio. Entregue um tema instalável, os componentes necessários, uma configuração reproduzível do conteúdo de demonstração, a procedência dos recursos e instruções de instalação concisas. Verifique o resultado em uma instância real do Discourse em desktop e móvel, incluindo navegação por teclado, contraste, estados não lidos, busca, citação e composição. Capture a mesma comunidade configurada antes e depois de aplicar o tema para que a transformação seja inegável. O padrão é uma demonstração pronta para o cliente — não um mockup, não apenas uma página inicial bonita, mas uma comunidade coerente e funcional com uma sensação de lugar completamente diferente.

  • consulte o código-fonte do Discourse conforme necessário
  • https://figment123.discourse.group/ é um site de demonstração, você pode fazer o que quiser com ele, veja os resultados ao longo do caminho, habilite o tema
  • crie tópicos conforme necessário

Passo 5 - Ficou ótimo!

Uma hora e dez minutos depois, o Astra Xhigh terminou.

Um tema inspirado no New Yorker encantador.

O tema não é perfeito, tem casos extremos, eu recomendaria um Passo 6 de refinamento, onde você cola as áreas em que o design está desalinhado e o agente corrige. Mas como ponto de partida, é absolutamente incrível que possamos fazer isso hoje. Não era possível há um ano.

Exemplo de refinamento em tempo real:

24 curtidas

A menos que eu esteja perdendo algum detalhe, parece que você criou um harness de agente de IA personalizado para fazer isso. :high_five: :+1:

Como um harness de agente de IA é um conceito mais amplo do que um harness de codificação de IA — como o Claude Code, o OpenAI Codex ou o OpenCode —, fui em busca de uma boa referência introdutória para quem está começando com a terminologia e quer dissipar um pouco da confusão:

Se você só for lembrar de uma frase:

Um modelo pensa. Um agente age. Um harness impede que o agente aja como um idiota.


Pessoalmente, acho que estamos chegando ao ponto em que os próprios agentes estão se tornando menos inovadores, enquanto os harnesses de IA projetados para um propósito específico estão se tornando a parte mais interessante da história.

Em vez de simplesmente perguntar: “Qual agente você está usando?”, a pergunta mais útil pode cada vez mais ser: “Qual harness você construiu ao redor dele?”

2 curtidas

Não, eu realmente criei um harness personalizado, mas tudo isso é o app vanilla do ChatGPT no Linux, o Discourse MCP e uma trial do Discourse.

No Mac, o ChatGPT é ainda mais completo: ele pode controlar qualquer aplicativo, então, por exemplo, poderia testar no Firefox e no Chrome durante o processo de construção ou até mesmo no simulador do iPhone.

Meu harness personalizado poderia alcançar resultados semelhantes; vou postar um exemplo diferente. https://chatgpt.com/download/

6 curtidas

Só estou adicionando um novo lançamento que achei interessante para quem quiser comparar e avaliar uma alternativa fora dos modelos dos EUA:

1 curtida

Com certeza posso fazer uma demonstração rápida com ele mais tarde, mas duvido que esteja em algum lugar perto do Astra.

3 curtidas

Legal! Eu me identifiquei muito com a matéria principal! :sweat_smile:

Na época, eu era bastante cético, e o DeepSeek me provou que valia a pena em sua versão V4. O GPT-6 Astra é um modelo de fronteira, mas é muito provável que o DS 4.1, para tarefas como essa, possa ser uma alternativa muito boa.

Pra testar de forma justa, preciso refazer o trabalho do Astra no meu próprio harness e depois trocar o LLM, então vai levar um tempo.

isso também funciona para quem faz self-hosting


além disso, aqui está a minha tentativa. Vou dizer que não me agrada muito para o projeto/comunidade exata em que estou trabalhando, mas, ainda assim, fez um bom trabalho.


4 curtidas

Isso é incrível! Também admiro o realismo na sua experiência com a IA (“cara…” kkk) :laughing:

1 curtida

Rodei um teste com o DeepSeek 4.1 flash max.

O transcript completo está aqui: https://gisthost.github.io/?28dedf78da999ccca5b5b4feb1d58fc9/index.html

Isso ficou um pouco contaminado, porque executei o teste em um contêiner dv e, em certo momento, o agente decidiu que seria mais eficiente usar o Docker para fazer as alterações em vez de depender do nosso MCP.

Para a geração de imagens, usei o Qwen 3 Image.

Para a visão, dei ao agente o chrome-devtools-mcp. Isso pode ser facilmente configurado para usar o Chromium no Linux, que tende a ser minha escolha:

   "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"
      ]
    },

Toda a execução dependeu do DeepSeek 4.1 flash tanto para o agente principal quanto para os subagentes.

Usei o term-llm.com para operá-lo em modo TUI:

Resultados:

Observações

O briefing é crítico. Se você tiver um ótimo briefing, os resultados serão ótimos; se tiver um briefing ruim, estará à mercê do LLM. Um ótimo briefing fala sobre a estrutura, as cores, dá exemplos, e assim por diante.


O DeepSeek 4.1 flash foi muito capaz neste teste e muito barato. Com 99% de leitura de cache e apenas 2,8M de tokens lidos, isso teria custado cerca de US$ 1,52 fora do horário de pico ou US$ 3,04 no preço de pico. O Astra é significativamente mais eficiente em tokens, então isso não é justo, mas, para contextualizar, o preço do Astra para um número semelhante de tokens seria US$ 325.

De forma conservadora, mesmo levando em conta a eficiência de tokens, eu apostaria que você poderia conseguir um design como este no Astra por 50 a 100 dólares. Conseguí-lo por 1 dólar e 50 é impossível com os custos atuais da API.

Executei isso no meu plano OpenCode go e nem senti uma pequena dentada no meu plano de US$ 10 por mês:

Algumas coisas me impressionaram nesta execução: ela foi capaz de rodar desatendida por horas. Ela agiu com base no EXATO mesmo briefing de o post original diligentemente e com cuidado. Tentou abordar cada ponto do briefing e testou meticulosamente tudo.

Acertou muita coisa e o design é sólido.

Dito isso, isso não é o GPT 6 Astra; o design me parece mais um design de LLM. O espaçamento, as fontes e a atenção aos detalhes não eram os mesmos do Astra. Também está muito claro que ele não tem a mesma fidelidade em visão que o Astra; houve muitos glitches visuais óbvios após a iteração 1. No lado positivo, ele foi capaz de corrigir a maioria deles quando solicitado.

Ele se recusou a corrigir este por algum motivo:

Mas o restante das peculiaridades foi tratado sem problemas.

A parte mais impressionante da construção foi o quão organizado ele insistiu em ser:

  • Ele criou uma pasta para evidências
  • Ele tentou projetar o tema de forma limpa, dividi-lo em muitos arquivos e até testá-lo

No geral, não espere o nível do Astra de um modelo 50/100 vezes mais barato, mas, como ferramenta, ele certamente pode produzir resultados muito interessantes por uma fração do custo.

Em retrospecto, recomendaria construir o tema diretamente em um contêiner dv e depois fazer o upload, pois você pode executá-lo com segurança em modo YOLO e a configuração é muito fácil.


Vou tentar fazer mais alguns experimentos sobre isso na próxima semana e postar mais alguns exemplos.

8 curtidas

Eu adoraria ver algo assim também :eyes:

2 curtidas

Tentei isso e parece que apenas o Astra consegue captar o visual exatamente como apresentado, enquanto outros modelos falharam em ser visualmente tão consistentes. Vocês têm alguma sugestão adicional para criar elementos de interface personalizados?

Para elementos de interface personalizados, recomendo fortemente trabalhar em um contêiner dv, pois isso facilitará muito a busca por exemplos no código.

1 curtida