Using Discourse MCP to quickly build a theme

,

Often, the largest barrier to starting a community is “making it your own”.

You want, your font, your style to match your brand.

In this post I would like to cover what can be achieved in a quite straightforward way with:

I chose Codex here, cause the recently released GPT-6 Astra is an incredibly talented visual artist. Kimi K3 and Fable are also quite strong in this department, but for this demo I am using Astra.

Step 1 - Generate API key

Head to: your.site/admin/api/keys/new

Generate a global API key.

Security note: keep this key safe, consider revoking it once work is done, it provides unrestricted access to site.

Step 2 - Add Discourse MCP

In this tutorial I am using codex:

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

(note: the Codex does not let you choose which MCPs are enabled or disabled, everything in the config will be enabled. You can place a enabled = false to disable an MCP temporarily)

:writing_hand: A noted about tools: The Discourse MCP supports 140+ tools, this config makes them all available. Modern harnesses such as Claude and Codex can handle this fine, that said many harnesses may struggle with a tool count this high - for example Grok build will require filtering)

Once you add Discourse MCP be sure to confirm that your agent can access it:

Step 3 - Give your Agent the tools it needs to do the job

An agent will perform significantly better, if it has:

  1. Eyes, the ability to see its work. (playwright MCP, computer use, etc)
  2. Context, the Discourse MCP helps, but so does the Discourse source code
  3. Image generation - in case you need assets etc.

The ChatGPT app has a built in browser, be sure it uses it. Be sure to clone the discourse/discourse codebase and start your agent from the Discourse directory.

None of this is required but having it will result in significantly better results.

Step 4 - Give your agent intelligence and a clear brief

In this case given I want to see the very good results so I opted for GPT-6 Astra XHIGH.

Next up I wrote a small brief with my AI about what I wanted (A New Yorker community theme)

AI authored brief

Build The Salon, a polished Discourse theme that demonstrates how radically a customer can transform Discourse’s identity. The creative reference is The New Yorker: an editorial institution whose readers participate in the conversation. Create an original identity, not a replica—no borrowed logos or unlicensed proprietary typefaces. Use warm ivory (#F7F4ED), near-black ink (#20201E), restrained editorial red (#B52B32), fine rules, generous whitespace, expressive serif headlines, readable serif body text and compact sans-serif metadata. Monochrome illustrations should add wit and character. You have creative latitude to source, download or generate whatever assets the demo needs—fonts, illustrations, photography, avatars and icons—using appropriately licensed material and retaining attribution where required. Avoid generic SaaS cards, faux parchment and decorative clutter. Aim for a contemporary literary magazine with a living community inside it, not a stock forum with different colours.

You are explicitly authorised to stage the demo instance with the categories, topics, replies, fictional contributor profiles and supporting content needed to make the experience compelling. Preserve existing real content and keep fictional activity clearly identifiable as demo data. Create five editorial departments—The Commons, Arts & Letters, City Life, Science & Ideas, Table Talk—with distinctive descriptions and illustrations. Build a strong THE SALON masthead, a curated lead discussion, secondary headlines and a latest-conversations section. Seed thoughtful, varied discussions such as “When did every hobby become a side hustle?” and “What would actually change your mind?”, with convincing opening posts, substantive disagreements, short replies, quotations and well-chosen images. Populate enough content to demonstrate density, scrolling and navigation; don’t use repetitive filler or leave important screens empty. Every headline must open a real topic, and activity, reply counts and unread states must remain visible. Carry the identity through category lists, topic pages, search and the composer: opening posts should feel like beautifully typeset essays, while replies remain compact, usable conversations. Mobile should become a calm single-column experience, and dark mode should feel equally deliberate.

Inspect the target Discourse version and supported theme APIs before choosing implementation details. Prefer a maintainable theme and focused theme components; avoid core patches, unnecessary plugins, brittle DOM manipulation and invented functionality. Make editorial curation explicit and configurable. Work autonomously on reversible design, asset and staging decisions rather than asking for approval on every detail; establish the visual language with a representative homepage and populated topic page, then finish the supporting surfaces. Deliver an installable theme, required components, reproducible demo-content setup, asset provenance and concise installation instructions. Verify the result in a real Discourse instance on desktop and mobile, including keyboard navigation, contrast, unread states, search, quoting and composing. Capture the same staged community before and after applying the theme so the transformation is undeniable. The standard is a customer-ready demonstration—not a mockup, not just a beautiful homepage, but a coherent, working community with an entirely different sense of place.

  • consult Discourse source as needed
  • https://figment123.discourse.group/ is a demo site, you can do whatever you want with it, look at results as you go, enable the theme
  • create topics as needed

Step 5 - Looking great !

One hour and 10 minutes later, Astra Xhigh is done.

A lovely New Yorker inspired theme.

The theme is not perfect, it has edge cases, I would recommend a Step 6 refine, where you paste in areas where the design is off and agent fixes. But as a starting point it is absolutely amazing we can do this today. It was not possible a year ago.

Example refinement in real time:

3 Likes