使用 Discourse MCP 快速构建主题

,

通常,建立社区时最大的障碍在于“如何让它具有自己的特色”。

你希望字体、风格都能与你的品牌相匹配。

在这篇文章中,我想介绍如何通过以下方式相当直接地实现这一目标:

我选择 Codex,是因为最近发布的 GPT-6 Astra 是一位才华横溢的视觉艺术家。Kimi K3Fable 在这方面也很强,但在这个演示中,我使用的是 Astra。

步骤 1 - 生成 API 密钥

前往:your.site/admin/api/keys/new

生成一个全局 API 密钥。

安全提示:请妥善保管此密钥,考虑在工作完成后将其撤销,因为它提供了对站点的无限制访问权限。

步骤 2 - 添加 Discourse MCP

在本教程中,我使用的是 Codex:

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

(注意:Codex 不允许你选择启用或禁用哪些 MCP,配置中的所有 MCP 都会被启用。你可以添加 enabled = false 来临时禁用某个 MCP)

:writing_hand: 关于工具的一点说明:Discourse MCP 支持 140 多种工具,此配置使它们全部可用。像 Claude 和 Codex 这样的现代框架可以很好地处理这种情况,但许多框架可能会难以应对如此高的工具数量——例如,Grok build 将需要过滤)

添加 Discourse MCP 后,请确保你的智能体可以访问它:

步骤 3 - 为你的智能体提供完成工作所需的工具

如果智能体拥有以下工具,其表现会显著提升:

  1. 眼睛,即看到其工作成果的能力。(playwright MCP、计算机使用等)
  2. 上下文,Discourse MCP 有帮助,Discourse 源代码也有帮助
  3. 图像生成——如果你需要素材等。

ChatGPT 应用内置了浏览器,请确保它使用了该功能。请确保克隆 discourse/discourse 代码库,并从 Discourse 目录启动你的智能体。

这些都不是必需的,但拥有它们会带来显著更好的结果。

步骤 4 - 赋予你的智能体智能和清晰的简报

在这种情况下,鉴于我希望看到非常好的结果,我选择了 GPT-6 Astra XHIGH。

接下来,我用 AI 编写了一个小简报,说明我想要什么(一个《纽约客》风格的社区主题)

AI 编写的简报

构建 The Salon,一个精致的 Discourse 主题,展示客户如何彻底改变 Discourse 的身份。创意参考是*《纽约客》*:一个读者参与对话的编辑机构。创建一个原创的身份,而不是复制品——不要使用借用的标志或未经授权的专有字体。使用温暖的象牙色(#F7F4ED)、近黑色墨水(#20201E)、克制的编辑红色(#B52B32)、细线条、慷慨的留白、表现力强的衬线标题、易读的衬线正文文本和紧凑的无衬线元数据。单色插图应增添机智和个性。你拥有创作自由,可以获取、下载或生成演示所需的任何素材——字体、插图、摄影、头像和图标——使用适当许可的材料,并在需要时保留归属信息。避免通用的 SaaS 卡片、仿羊皮纸和装饰性杂乱。目标是创建一个拥有内部活跃社区的当代文学杂志,而不是一个颜色不同的库存论坛。

你被明确授权为演示实例设置类别、主题、回复、虚构的贡献者个人资料和支持内容,以使体验具有吸引力。 保留现有的真实内容,并保持虚构活动明显可识别为演示数据。创建五个编辑部门——The Commons, Arts & Letters, City Life, Science & Ideas, Table Talk——具有独特的描述和插图。构建一个强大的 THE SALON 报头、精选的领先讨论、次要标题和最新对话部分。播种深思熟虑、多样化的讨论,如“什么时候每个爱好都变成了副业?”和“什么才能真正改变你的想法?”,具有令人信服的开场帖、实质性的分歧、简短的回复、引用和精心选择的图片。填充足够的内容以展示密度、滚动和导航;不要使用重复的填充内容或让重要屏幕留空。每个标题都必须打开一个真实的话题,并且活动、回复计数和未读状态必须保持可见。将身份贯穿类别列表、主题页面、搜索和编辑器:开场帖应感觉像排版精美的文章,而回复保持紧凑、可用的对话。移动端应成为平静的单列体验,深色模式也应感觉同样刻意。

在选择实现细节之前,检查目标 Discourse 版本和支持的主题 API。优先选择可维护的主题和集中的主题组件;避免核心补丁、不必要的插件、脆弱的 DOM 操作和发明的功能。使编辑策展明确且可配置。自主处理可逆的设计、素材和设置决策,而不是在每个细节上寻求批准;用具有代表性的主页和填充的主题页面建立视觉语言,然后完成支持表面。交付可安装的主题、所需的组件、可重现的演示内容设置、素材来源和简明的安装说明。在真实的 Discourse 实例中验证结果,包括桌面和移动端的键盘导航、对比度、未读状态、搜索、引用和编写。捕获应用主题前后的相同阶段社区,以便转换不可否认。标准是客户就绪的演示——不是模型,不仅仅是漂亮的主页,而是一个连贯、工作的社区,具有完全不同的场所感。

  • 根据需要查阅 Discourse 源代码
  • https://figment123.discourse.group/ 是一个演示站点,你可以随意处理它,一边查看结果一边启用主题
  • 根据需要创建主题

步骤 5 - 看起来很棒!

一小时零十分钟后,Astra Xhigh 完成了。

一个受 New Yorker 启发的精美主题。

这个主题并不完美,它有一些边缘情况,我建议进行步骤 6 优化,在那里你可以粘贴设计出现偏差的区域,让智能体进行修复。但作为一个起点,我们今天能做的就是绝对惊人的。一年前这是不可能的。

实时优化示例:

24 个赞

除非我漏掉了什么,看起来你搭建了一个**自定义 AI 智能体框架(harness)**来实现这一点。 :high_five: :+1:

由于AI 智能体框架是一个比AI 编码框架更广泛的概念——例如 Claude CodeOpenAI CodexOpenCode——我寻找了一份不错的入门参考资料,供刚接触这些术语并希望理清思路的新手参考:

如果你只记住一句话:

模型负责思考,智能体负责行动,而框架则防止智能体做出愚蠢的举动。


就我个人而言,我认为我们可能正到达这样一个节点:智能体本身正在变得不再那么新奇,而专为特定目的构建的 AI 框架正成为故事中更有趣的部分

与其简单地问“你在用哪个智能体?”,更有用的问题可能越来越是“你在它周围构建了什么样的框架?”

2 个赞

不,我确实构建了一个自定义测试框架,但这里展示的全是 Linux 上原生版的 ChatGPT 应用、Discourse MCP 以及一个 Discourse 试用版。

在 Mac 上,ChatGPT 的功能更加丰富,它可以控制任意应用。因此,例如在构建过程中,它可以在 Firefox 和 Chrome 中进行测试,甚至可以使用 iPhone 模拟器。

我的自定义测试框架也能达到类似的效果,我会发布另一个示例。https://chatgpt.com/download/

6 个赞

顺便分享一个我觉得挺有意思的新版本,适合想对比和评估美国模型之外替代方案的朋友:

1 个赞

我肯定可以稍后用它做个快速演示,不过我觉得它跟 Astra 还差得远呢。

3 个赞

太棒了!我特别能引起共鸣的是那篇头条文章!:sweat_smile:

当时我非常持怀疑态度,但 DeepSeek 在其 V4 版本中向我证明了它是值得的。GPT-6 Astra 是一个前沿模型,但对于这类任务,DS 4.1 很有可能是一个非常出色的替代方案。

没错,为了公平测试,我得在自己的测试框架上重新做一遍 Astra 的工作,然后再换掉 LLM,所以会花点时间。

这也适用于自托管用户。


此外,这里是我的尝试。坦白说,对于我目前正在处理的具体项目/社区,我并不是特别喜欢这个效果,但不管怎样,它做得还不错。


4 个赞

太棒了!我也很喜欢你在描述与 AI 互动时的那种真实感(“哥们儿……”哈哈):laughing:

1 个赞

我在 DeepSeek 4.1 flash max 上运行了一次测试。

完整记录在这里:https://gisthost.github.io/?28dedf77da999ccca5b5b4feb1d58fc9/index.html

这次测试受到了一些污染,因为我在 dv 容器上运行了测试,而且在某个时刻,智能体(agent)决定使用 Docker 来更高效地进行更改,而不是依赖我们的 MCP。

图像生成方面,我使用了 Qwen 3 Image。

为了查看效果,我给了智能体 chrome-devtools-mcp。这很容易配置为在 Linux 上使用 chromium,这通常是我的选择:

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

整个运行过程在驱动智能体(driver)和子智能体(sub agents)方面都依赖 DeepSeek 4.1 flash。

我使用 term-llm.com 以 TUI 模式驱动它:

结果:

观察

简报(brief)至关重要。如果你有一份出色的简报,结果就会很棒;如果简报质量差,你就只能听天由命,看 LLM 的表现了。一份优秀的简报会讨论结构、颜色,并提供示例等等。


DeepSeek 4.1 flash 在这次测试中表现出色,而且非常便宜。在 99% 的缓存读取率和仅 2.8M 读取令牌的情况下,这将在非高峰时段花费约 1.52 美元,或在高峰定价下花费 3.04 美元。Astra 的令牌效率要高得多,所以这样比较并不公平,但作为参考,Astra 处理类似数量令牌的费用将是 325 美元

保守估计,即使考虑到令牌效率,我也认为你可能能在 Astra 上以 50-100 美元的价格完成这样的设计,以 1 美元 50 分的价格完成这在当前的 API 成本下是不可能的。

我在我的 OpenCode go 计划上运行了此测试,甚至感觉不到我每月 10 美元计划受到丝毫影响:

这次运行中有几件事让我印象深刻,它能够无人值守地运行数小时。它一丝不苟、小心翼翼地按照原帖中完全相同的简报进行操作。它试图解决简报中的每一个要点,并细致地测试了所有内容。

它做对了很多事情,设计也很扎实。

话虽如此,这还不是 GPT 6 Astra,设计感觉更像是一个 LLM 的设计。间距、字体和对细节的关注程度与 Astra 不同。也很明显,它在视觉保真度方面没有 Astra 那么高,在第 1 次迭代后存在许多明显的视觉故障,好在当被提示时,它能够纠正其中大部分。

不知为何,它拒绝修复这一个:

但其他怪癖它都处理得很好。

构建过程中最令人印象深刻的部分是它坚持保持整洁

  • 它创建了一个用于证据的文件夹
  • 它试图干净地设计主题,将其拆分为许多文件,甚至对其进行测试

总的来说,不要指望一个便宜 50/100 倍的模型能达到 Astra 的水平,但作为一个工具,它肯定能以几分之一的成本产生非常有趣的结果。

回过头来看,我建议直接在 dv 容器中构建主题,然后上传,因为你可以安全地在 YOLO 模式下运行它,而且设置非常简单。


下周我会尝试围绕这个主题进行更多实验,并发布一些更多示例。如果你有一份精彩的简报,请告诉我。

通常我会使用来自多个供应商的多个 LLM 来构建东西,所以一个更“我通常如何工作”类型的示例可能会很有趣。

8 个赞

我也很想看到类似的内容 :eyes:

2 个赞

我试了一下,似乎只有 Astra 能够完全按照展示的效果呈现,而其他模型在视觉一致性方面表现不佳。对于创建自定义 UI 元素,你有什么额外的建议吗?

对于自定义 UI 元素,我强烈建议在 dv 容器中进行开发,这样更容易在代码中找到相关示例。

1 个赞