コミュニティを立ち上げる際の最大の障壁は、しばしば「自分だけのものにする」という点です。
フォントやスタイルを、自分のブランドに合わせることを望んでいるはずです。
この記事では、以下を用いて比較的簡単に行えることについて紹介します。
- Discourse MCP - GitHub - discourse/discourse-mcp: MCP client for Discourse sites · GitHub
- Discourse の Pro または Business トライアル
- Open AI Codex のサブスクリプション
ここでは 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 を選択することはできません。設定内のすべてが有効になります。MCP を一時的に無効にするには、enabled = false を設定できます)
ツールに関する注記: Discourse MCP は 140 以上のツールをサポートしており、この設定によりそれらすべてが利用可能になります。Claude や Codex などの最新のハーネスはこれを問題なく処理できますが、これほど多くのツールがある場合、多くのハーネスは苦戦する可能性があります。例えば、Grok build ではフィルタリングが必要になります。
Discourse MCP を追加した後、エージェントがそれへのアクセスを確認してください:
ステップ 3 - エージェントに仕事をするためのツールを与える
エージェントには以下があると、パフォーマンスが大幅に向上します。
- 目、つまり自分の作業を見る能力。(playwright MCP、computer use など)
- コンテキスト、Discourse MCP が役立ちますが、Discourse のソースコードも役立ちます。
- 画像生成 - アセットなどが必要な場合。
ChatGPT アプリには組み込みブラウザがあります。それを使用していることを確認してください。discourse/discourse コードベースをクローンし、Discourse ディレクトリからエージェントを開始することを確認してください。
これらはすべて必須ではありませんが、これらがあると、はるかに良い結果が得られます。
ステップ 4 - エージェントに知性と明確なブリーフを与える
ここでは非常に良い結果を見たいと思ったため、GPT-6 Astra XHIGH を選択しました。
次に、AI と一緒に何が必要か（The New Yorker スタイルのコミュニティテーマ）について小さなブリーフを書きました。
AI が作成したブリーフ
The Salon を構築してください。これは洗練された Discourse テーマであり、顧客が Discourse のアイデンティティをいかに劇的に変えられるかを示すものです。クリエイティブな参照は The New Yorker です。読者が会話に参加するエディトリアルな機関です。レプリカではなく、オリジナルのアイデンティティを作成してください—借りたロゴや無許可の独自フォントは使用しないでください。温かみのあるアイボリー (#F7F4ED)、ほぼ黒のインク (#20201E)、抑制されたエディトリアルな赤 (#B52B32)、細いルール、寛大な余白、表現力のあるセリフ体の見出し、読みやすいセリフ体の本文、コンパクトなサンセリフ体のメタデータを使用してください。モノクロのイラストはユーモアと個性を加えるべきです。デモに必要なすべてのアセット—フォント、イラスト、写真、アバター、アイコン—を入手、ダウンロード、または生成するための創造的な裁量があります—適切にライセンスされた素材を使用し、必要な場合帰属情報を保持してください。一般的な SaaS カード、偽の羊皮紙、装飾的な雑多なものを避けてください。異なる色付きのストックフォーラムではなく、その中に生きたコミュニティを持つ現代的な文学雑誌を目指してください。
デモインスタンスに、体験を魅力的にするために必要なカテゴリ、トピック、返信、架空の貢献者プロファイル、サポートコンテンツをステージングすることについて明示的に許可されています。 既存の実コンテンツを保持し、架空のアクティビティはデモデータとして明確に識別可能にしてください。個性的な説明とイラストを持つ 5 つのエディトリアル部門—The Commons、Arts & Letters、City Life、Science & Ideas、Table Talk—を作成してください。強力な THE SALON マストヘッド、厳選されたリードディスカッション、セカンダリーヘッドライン、最新の会話セクションを構築してください。「いつからすべての趣味がサイドハッスルになったのか？」や「実際にあなたの考えを変えるものは何ですか？」のような、考え深く多様なディスカッションをシードし、説得力のあるオープニングポスト、実質的な意見の相違、短い返信、引用、よく選ばれた画像を含めてください。密度、スクロール、ナビゲーションを示すのに十分なコンテンツを埋め込み、反復的なフィラーを使用したり、重要な画面を空にしたりしないでください。すべてのヘッドラインは実際のトピックを開き、アクティビティ、返信数、未読状態は表示可能でなければなりません。カテゴリリスト、トピックページ、検索、コンポーザーを通じてアイデンティティを貫き通してください。オープニングポストは美しく組版されたエッセイのように感じられ、返信はコンパクトで実用的な会話のままです。モバイルは落ち着いた単一カラムの体験になり、ダークモードも同様に意図的なものであるべきです。
実装の詳細を選択する前に、ターゲットとなる Discourse バージョンとサポートされているテーマ API を確認してください。メンテナンス可能なテーマと焦点を絞ったテーマコンポーネントを優先し、コアのパッチ、不要なプラグイン、もろい DOM 操作、発明された機能を避けてください。エディトリアルのキュレーションを明示的かつ設定可能にしてください。すべての詳細について承認を求めるのではなく、可逆的なデザイン、アセット、ステージングの決定を自律的に進め、代表的なホームページとコンテンツが埋められたトピックページで視覚言語を確立し、その後サポートするサーフェスを仕上げてください。インストール可能なテーマ、必要なコンポーネント、再現可能なデモコンテンツセットアップ、アセットの出所、簡潔なインストール手順を納品してください。デスクトップとモバイルの両方で、実際の Discourse インスタンスで結果を検証し、キーボードナビゲーション、コントラスト、未読状態、検索、引用、コンポーザーを含めてください。テーマを適用する前後の同じステージングコミュニティをキャプチャし、変革が疑いようのないものであることを確認してください。基準は顧客向けのデモであり—モックアップではなく、美しいホームページだけでなく、まったく異なる場所の感覚を持つ、一貫した、機能するコミュニティです。
- 必要に応じて Discourse ソースを参照
- https://figment123.discourse.group/ はデモサイトであり、自由に操作できます。進捗を確認しながら、テーマを有効にしてください。
- 必要に応じてトピックを作成
ステップ 5 - とても素晴らしい !
1 時間 10 分後、Astra Xhigh は完了しました。
New Yorker にインスパイアされた素敵なテーマです。
このテーマは完璧ではなく、エッジケースがあります。ステップ 6 のリファインを推奨します。デザインがずれている部分を貼り付け、エージェントに修正させる方法です。しかし、出発点としては、今日これができることは本当に驚くべきことです。1 年前には不可能でした。
リアルタイムでのリファインの例: