Использование Discourse MCP для быстрой разработки темы

,

Часто самым большим препятствием при создании сообщества является «сделать его своим».

Вы хотите, чтобы ваш шрифт и стиль соответствовали вашему бренду.

В этом посте я хотел бы рассказать о том, что можно сделать довольно простым способом с помощью:

Я выбрал Codex, потому что недавно выпущенный GPT-6 Astra — это невероятно талантливый визуальный художник. Kimi K3 и Fable также довольно сильны в этом плане, но для этой демонстрации я использую 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 включены или отключены, все, что указано в конфигурации, будет включено. Вы можете добавить enabled = false, чтобы временно отключить MCP)

:writing_hand: Примечание о инструментах: Discourse MCP поддерживает более 140 инструментов, эта конфигурация делает их все доступными. Современные системы, такие как Claude и Codex, справляются с этим без проблем, однако многие системы могут испытывать трудности с таким большим количеством инструментов — например, Grok build потребует фильтрации.

После добавления Discourse MCP убедитесь, что ваш агент может получить к нему доступ:

Шаг 3 - Предоставьте вашему агенту инструменты, необходимые для выполнения работы

Агент будет работать значительно лучше, если у него есть:

  1. Глаза, способность видеть свою работу. (playwright MCP, computer use и т. д.)
  2. Контекст, Discourse MCP помогает, но также помогает и исходный код Discourse
  3. Генерация изображений — на случай, если вам нужны ресурсы и т. д.

В приложении ChatGPT есть встроенный браузер, убедитесь, что он им пользуется. Не забудьте клонировать кодовую базу discourse/discourse и запустить вашего агента из директории Discourse.

Ничто из этого не является обязательным, но наличие этих элементов приведет к значительно лучшим результатам.

Шаг 4 - Предоставьте вашему агенту интеллект и четкое техническое задание

В данном случае, учитывая, что я хотел увидеть очень хорошие результаты, я выбрал GPT-6 Astra XHIGH.

Далее я написал небольшое техническое задание с помощью ИИ о том, что я хотел (тема сообщества в стиле The New Yorker)

ТЗ, составленное ИИ

Создайте The Salon, отполированную тему Discourse, которая демонстрирует, насколько радикально клиент может трансформировать идентичность Discourse. Креативным ориентиром является The New Yorker: редакционное издание, чьи читатели участвуют в разговоре. Создайте оригинальную идентичность, а не реплику — без заимствованных логотипов или несанкционированных проприетарных шрифтов. Используйте теплый слоновая кость (#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 - Выглядит отлично!

Через час и 10 минут Astra Xhigh закончил работу.

Прекрасная тема, вдохновленная New Yorker.

Тема не идеальна, у нее есть крайние случаи, я бы рекомендовал Шаг 6 — доработку, где вы вставляете области, где дизайн не совсем верен, и агент их исправляет. Но как отправная точка это абсолютно удивительно, что мы можем делать это сегодня. Год назад это было невозможно.

Пример доработки в реальном времени:

24 лайка

Похоже, вы создали кастомный каркас (harness) для ИИ-агента, чтобы сделать это. :high_five: :+1:

Поскольку каркас ИИ-агента — понятие более широкое, чем каркас для ИИ-кодинга (например, Claude Code, OpenAI Codex или OpenCode), я пошёл искать хорошую вводную статью для тех, кто только знакомится с этой терминологией и хочет прояснить ситуацию:

Если запомнить только одну фразу:

Модель думает. Агент действует. Каркас не даёт агенту вести себя как идиот.


Лично я думаю, что мы приближаемся к моменту, когда сами агенты становятся менее новшеством, а специально разработанные ИИ-каркасы — более интересной частью истории.

Вместо простого вопроса «Какого агента вы используете?», всё более полезным может стать вопрос: «Какой каркас вы построили вокруг него?»

2 лайка

Нет, я действительно собрал собственный harness, но это всё чистое приложение ChatGPT на Linux, Discourse MCP и пробная версия Discourse.

На Mac ChatGPT даже богаче: он может управлять любым приложением, поэтому, например, может тестировать в Firefox и Chrome в процессе сборки или даже в симуляторе iPhone.

Мой собственный harness мог бы достичь похожих результатов, скоро выложу другой пример. https://chatgpt.com/download/

6 лайков

Просто добавляю новый релиз, который показался мне интересным для всех, кто хочет сравнить и оценить альтернативу американским моделям:

1 лайк

Я вполне могу позже сделать быструю демонстрацию, но сомневаюсь, что это хоть сколько-нибудь близко к Astra

3 лайка

Классно! Особенно откликается заголовочная статья! :sweat_smile:

В то время я был очень скептичен, и DeepSeek доказал мне, что это того стоит в версии V4. GPT-6 Astra — это передовая модель, но, скорее всего, DS 4.1 для подобных задач может стать действительно хорошей альтернативой.

Ну, чтобы провести тестирование объективно, мне нужно переделать работу с Astra на своей собственной тестовой среде, а потом подменить LLM, так что это займёт некоторое время.

это работает и для тех, кто хостит у себя


также, вот моя попытка. Скажу честно, мне это не очень нравится для того конкретного проекта/сообщества, над которым я работаю, но в целом получилось неплохо.


4 лайка

Это здорово! Мне также импонирует реализм в твоём опыте работы с ИИ («брат…» хех) :laughing:

1 лайк

Я провёл тестовый запуск на DeepSeek 4.1 flash max.

Полная запись здесь: https://gisthost.github.io/?28dedf77da999ccca5b5b4feb1d58fc9/index.html

Тест был немного «загрязнён», так как я запускал его в контейнере dv, и в какой-то момент агент решил, что эффективнее использовать Docker для внесения изменений, чем полагаться на наш MCP.

Для генерации изображений я использовал Qwen 3 Image.

Для «глаз» я дал агенту chrome-devtools-mcp. Его легко настроить для использования Chromium на Linux, что, как правило, является моим выбором:

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

Весь запуск опирался на DeepSeek 4.1 flash как для основного, так и для под-агентов.

Я использовал term-llm.com для управления в режиме TUI:

Результаты:

Наблюдения

ТЗ (бриф) критически важно. Если у вас отличное ТЗ, результаты будут отличными; если ТЗ плохое, вы полностью на милости LLM. Хорошее ТЗ описывает структуру, цвета, приводит примеры и так далее.


DeepSeek 4.1 flash оказался очень способным в этом тесте и очень дешёвым. При 99% чтений из кэша и лишь 2,8 млн прочитанных токенов это обошлось бы примерно в $1,52 в часы низкого спроса или $3,04 по пиковым ценам. Astra значительно эффективнее с точки зрения использования токенов, поэтому это нечестное сравнение, но для контекста: цена Astra за аналогичное количество токенов составила бы $325.

Даже с учётом эффективности использования токенов я бы предположил, что вы могли бы создать дизайн такого уровня в Astra за 50–100 долларов. Получить его за 1,50 доллара по текущим ценам API невозможно.

Я запускал это по своему тарифу OpenCode go, и даже не почувствовал заметного расхода в рамках плана на $10 в месяц:

Несколько вещей впечатлили меня в этом запуске: он смог работать без присмотра в течение часов. Он действовал по точно тому же ТЗ, что и в первом сообщении, старательно и аккуратно. Он пытался учесть каждый пункт ТЗ и скрупулёзно протестировал всё.

Он сделал многое правильно, и дизайн получился крепким.

Тем не менее, это не GPT 6 Astra; дизайн кажется мне более «LLM-подобным». Отступы, шрифты и внимание к деталям были не на том уровне, что у Astra. Также очень ясно, что у него нет той же точности в работе с визуальными данными, что у Astra: после первой итерации было много очевидных визуальных сбоев. С другой стороны, он смог исправить большинство из них, когда его об этом попросили.

По какой-то причине он отказался исправить вот этот один:

Но остальные мелкие странности он обработал без проблем.

Самым впечатляющим в сборке была его insistence на аккуратности.

  • Он создал папку для доказательств (evidence)
  • Он попытался чисто спроектировать тему, разбив её на множество файлов и даже протестировать её

В целом, не ждите уровня Astra от модели в 50/100 раз дешевле, но как инструмент он определённо может давать очень интересные результаты за малую долю стоимости.

В ретроспективе я бы рекомендовал создавать тему непосредственно в контейнере dv, а затем загружать её, так как это позволяет безопасно работать в режиме YOLO, а настройка очень проста.


На следующей неделе постараюсь провести ещё несколько экспериментов в этом направлении и опубликую ещё пару примеров.

8 лайков

Было бы здорово увидеть что-то подобное :eyes:

2 лайка

Я попробовал это, и похоже, что только Astra точно воспроизводит требуемый стиль, в то время как другие модели не смогли обеспечить такой же визуальной согласованности. Есть ли у вас дополнительные советы по созданию пользовательских элементов интерфейса?

Для создания пользовательских элементов интерфейса я настоятельно рекомендую работать в контейнере dv — это значительно упростит поиск примеров в коде.

1 лайк