Communityコーディング&開発github.com

headless-cms-mcp-pipeline

ヘッドレスCMSのコンテンツをMCPツールで管理・パイプライン化するためのスキルです。

headless-cms-mcp-pipeline とは?

このスキルは、AIエージェントがWordPressを純粋なデータストアとして使い、Next.jsヘッドレスフロントエンドと連携して、ブログ記事の執筆・公開・SEO監査までを自動化するための包括的なパイプラインを提供します。 主な特徴は、WordPress上での長時間同期処理を排除し、AIエージェント(Hermes)が調査、執筆、画像生成、メディアアップロードを非同期で実行後、CMSにデータを渡す「ゼロタイムアウト」アーキテクチャを採用している点です。また、記事ごとに一意のフォーカスキーワードを設定し、セマンティックRAG検索でカニバリゼーション(類似コンテンツの重複)を防止します。 対応プラットフォームは、WordPress(REST/MCP)、Next.js(ISR再検証)、Vercel(ホスティング)です。ワークフローは10ステップで構成され、トピッククラスターの取得、編集ガイドラインの動的読み込み、4段階の引用元階層に基づくファクトチェック、GutenbergネイティブのセマンティックHTML執筆、9Routerマルチモデルゲートウェイによる画像生成、メディアアップロード、公開、SEOスコア監査(目標80-100%)という流れで自動化されます。 さらに、このスキルは「Sayoti Content Engine」と「Sayoti Headless Bridge」という2つの独立したプラグインアーキテクチャに基づいており、AI機能のみを既存のWordPressサイトに導入するか、Next.jsヘッドレスサイト全体を構築するかを柔軟に選択できます。環境変数による認証情報管理(ゼロシークレットポリシー)と、WordPressデータベースのベクトル埋め込みによるRAG検索を前提としており、高いセキュリティとパフォーマンスを実現します。

対応✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/imadegunawinangun/skill-headless-cms-mcp-pipeline/tree/HEAD

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

プレビュー

スキル README より

headless-cms-mcp-pipeline preview

ドキュメント

ヘッドレスCMS MCPコンテンツパイプライン

使用タイミング

  • ヘッドレスWordPress上のブログ記事や固定ページをModel Context Protocol (MCP)経由で管理、作成、公開する場合。
  • Next.jsヘッドレスフロントエンドに対して、自律型AI記事生成パイプラインをオーケストレーションする場合。
  • 外部AIエージェントをSayoti Suite MCP RPC (/wp-json/sayoti-mcp/v1/rpc)に接続する場合。
  • 編集基準、The Borderline Matrix、臨床E-E-A-Tルール、ブランドビジュアルガイドラインをCMSとAIエージェント間で同期する場合。
  • 動的なヘッドレスナビゲーションメニュー、オンページフォーカスキーワード監査、および特殊なページロール(リードマグネット、プライバシーポリシー、利用規約)を設定する場合。

前提条件とゼロシークレットポリシー

⚠️ 厳格な認証情報保護(ゼロシークレット漏洩)

  • APIキー、パスワード、BearerトークンをSKILL.mdやGit追跡ファイルにハードコードしないでください。
  • すべての認証情報は、$HERMES_HOME/.envまたはプロファイル固有の.envファイル内の環境変数からのみ解決する必要があります。
  • このパイプラインで必要な認証情報:
    1. MCP_SAYOTI_CMS_KEY: WordPress MCP RPC認証用マスターシークレットキー (headers: {'X-Sayoti-Key': '${MCP_SAYOTI_CMS_KEY}'})。
    2. HERMES_CUSTOM_9ROUTER_SAYOTI_MY_ID_API_KEY または NINEROUTER_API_KEY: 9Routerマルチモデルゲートウェイ用APIキー(image_generateおよび埋め込み用)。
  • WordPress MCPサーバー設定(config.yamlのmcp_servers内):
    mcp_servers:
      sayoti-cms:
        url: "http://wordpress-sentra/wp-json/sayoti-mcp/v1/rpc"
        headers:
          X-Sayoti-Key: "${MCP_SAYOTI_CMS_KEY}"
        enabled: true
        timeout: 180
    
  • ベクターデータベースの前提条件:
    • WordPress管理画面 (sayoti_mcp_settings) で、embedding_statusをenabledに設定し、モデルをlocal/nomic-embed-textに設定して、rag_searchおよび自動投稿インデックス作成をサポートする必要があります。

アーキテクチャの原則

  1. WordPressを純粋なデータストアとして使用(ゼロタイムアウト):

    • WordPressは、REST/MCPリクエスト中に長時間実行される同期AI呼び出し(LLM生成、拡散モデル)を決して実行してはなりません。
    • AIエージェント(Hermes)が実行エンジンとして機能します。エージェントは調査の実行、コピーの作成、9Router経由のビジュアル生成、メディアの埋め込みを行い、その後データをCMSに送信します。
    • CMSオペレーション(save_post、save_page)は、純粋に高速なデータベーストランザクション(1秒未満)として実行され、Next.jsのOn-Demand ISR再検証をトリガーする必要があります。
  2. Upsertによる厳格なエンティティ分離:

    • 個別のコンテンツエンティティには、常に専用のupsertツールを使用します。ブログ記事にはsave_post、静的/ランディングページにはsave_pageを使用します。
    • 投稿とページを、条件付きパラメータを持つ単一の汎用ツールにまとめないでください。個別のスキーマにより、パラメータ漏洩とLLMの幻覚を排除します。
    • Upsertロジック: idまたは一致するslugが存在する場合は更新を実行し、存在しない場合は新しいコンテンツを作成します。
  3. 特殊なページロールとリードマグネット分類:

    • ページは、ファネル内で特定の商用または法的な役割を果たします: standard、lead_magnet、privacy_policy、terms_of_service、またはdisclaimer。
    • リードマグネットページを曖昧にしないでください。常にpage_role: 'lead_magnet'として分類し、lead_magnet_typeで正確なアセットタイプを指定します(例: "チェックリスト マイルストーン 発達 2~7歳 (PDF)")。
    • CMSは、これらを/wp-json/sayoti/v1/site-settings経由で公開し、WordPress管理画面に投稿ステートバッジ([🎁 リードマグネット: ...]、[🔒 プライバシーポリシー]、[📜 利用規約])を登録するため、人間の編集者はページ機能をすぐに認識できます。
  4. 動的ヘッドレスナビゲーションメニュー:

    • メニューはフロントエンドにハードコードしてはいけません。WordPressが、/wp-json/sayoti/v1/menus?location=primaryおよびfooterを介した唯一の情報源です。
    • WP管理画面(外観 -> メニュー)でメニューを更新すると、タグmenuとパス/でISR再検証ウェブフックが起動し、再デプロイなしでNext.jsのヘッダーとフッターが即座に更新されます。
    • 初回実行時には、WP管理ダッシュボードにすぐに編集可能なクリーンなデフォルトナビゲーションメニューを自動シードします。
  5. 編集およびビジュアルルールの単一情報源:

    • 編集ルール(content.md)、E-E-A-T基準(sayoti-editorial.md)、ブランドビジュアルルール(sayoti-visual-branding.md)、オンページSEOキーワードルールは、WordPressデータベースオプションに存在します。
    • エージェントは、get_editorial_guidelinesを使用してこれらのルールを動的に取得するため、出力はダッシュボード内の生成と100%一致したままになります。
  6. 分離された2プラグインアーキテクチャ(ユニバーサルコンテンツ vs ヘッドレスブリッジ):

    • AI、トピッククラスター、MCPサーバーをヘッドレスリダイレクトロジックに結合しないでください。クライアントが既にアクティブなWordPressテーマ(Astra、Elementor、Divi)を持っており、AI/SEOエンジンのみを必要とする場合、モノリシックプラグインは破損します。
    • 2つのクリーンで独立したプラグインに分離します:
      • sayoti-content-engine: ユニバーサルでテーマに依存しません。MariaDB 11.8 Vector RAG、トピッククラスター(ハブ&スポーク)、リンクエクスプローラー、デッドリンク自動修復、ダッシュボード内AIライター、リードマグネットCPT&CRM、MCPサーバー(/wp-json/sayoti-mcp/v1/rpc)を搭載。リダイレクトもNext.js依存もありません。既存のあらゆるWordPressインストールで動作します。
      • sayoti-headless-bridge: ヘッドレスNext.jsフロントエンドを使用する場合にのみインストールされます。301テンプレートリダイレクト(設定可能なトグル付き)、REST /site-settingsおよび/menus、ISR再検証ウェブフック、ページコントローラー(ホームページおよび法的ロール)、動的マーケティングトラッキングタグ(GTM、Meta Pixel、TikTok、広告)、ローカルSEOスキーマ(Googleマップと事業所住所)を搭載。

包括的な10ステップ記事生成ワークフロー

[ユーザートピックプロンプト]
        ↓ 1. タスク取り込み
[WordPress MCP: get_topic_cluster & get_editorial_guidelines]
        ↓ 2. ピラータクソノミーと編集ガイドラインをプル
[エージェント (Hermes): フォーカスキーワードと角度]
        ↓ 3. フォーカスキーワードと具体的な角度を策定
[WordPress MCP: rag_search]
        ↓ 4. セマンティックカニバリゼーションをチェック(>80%)&内部リンク候補を取得
[ウェブリサーチ: ユニバーサル4段階引用ヒエラルキー]
        ↓ 5. 事実を検証し主張を裏付ける
[エージェンシーエージェント: content-creator]
        ↓ 6. 専門ライターペルソナをロード
[コンテンツ作成: Gutenbergネイティブ]
        ↓ 7. 900~1500語のセマンティックHTMLを作成(フック、H2、ハブリンク、FAQ、CTA、免責事項)
[9Router image_generate + MCP upload_media]
        ↓ 8. アダプティブウォーターマーク(ゼロタイムアウト)でビジュアルアセットをサイドロード
[WordPress MCP: save_post]
        ↓ 9. インスタントデータベーストランザクション + 自動ベクターインデックス + Next.js ISR
[WordPress MCP: audit_post_seo]
        ↓ 10. SEOスコアを監査(目標80~100%)&ライブレポートを配信
[Vercel Next.jsで公開]

ステップ 1: トピックとコンテキストの取り込み

ユーザーまたは編集カレンダーから最初のコンテンツリクエストを受け取ります。ターゲットオーディエンスのペインポイントと商業的意図を特定します。

ステップ 2: ガイドラインとタクソノミーの取得

sayoti-cmsツールを呼び出して、構造的な境界を確立します:

  1. get_topic_cluster: 利用可能なカテゴリピラーを検査し、目的のカテゴリの公式プライマリハブ(投稿ID、タイトル、スラッグ)を取得します。
  2. get_editorial_guidelines: アクティブな編集長さ制限(900~1,500語)、必須の冒頭構造、FAQアコーディオンルール、アクションフレームワーク、公式の16進カラーパレットを取得します。

ステップ 3: 詳細なフォーカスキーワード調査と角度の策定

  • 検索意図とキーワード調査: 調査なしにランダムなフレーズを選ばないでください。プロファイルで定義されたターゲットオーディエンスが使用する現実的な検索行動とクエリ(情報提供の質問、問題、またはウェブ検索/キーワードパターンによる比較調査)を積極的に調査します。
  • プライマリフォーカスキーワードの選択: 調査結果に基づいて、明確なロングテール検索意図を持つ1つのプライマリフォーカスキーワードを正確に確立します(例: 幅広い一般的なヘッドタームではなく、"cara melatih anak speech delay 2 tahun mandiri")。
  • シャープでユニークな角度の定義: 選択したキーワードを特徴的な角度に固定します(例: 特定の年齢遷移、現実的な毎日の家庭ルーチン、または≤24時間で適用可能な具体的なステップ)。
  • 単一URLマッピング: このフォーカスキーワードが将来のキーワード競合を防ぐために、単一のユニークなURLに厳密に専用されていることを保証します。

ステップ 4: セマンティックRAG検証とカニバリゼーションチェック

rag_search(query: "<focus_keyword> <angle>", limit: 5)を実行します:

  1. カニバリゼーションフィルター: 公開された記事が同じ角度で80%を超えるセマンティック類似性を示す場合は、すぐに角度を変更します(例: 一般的な症状から家庭でのルーティンや特定のマイルストーン遷移へシフト)。
  2. 水平リンク発見: ベクター検索で返された関連する既存の記事を記録し、コンテキストに応じた内部リンクとして使用します。

ステップ 5: マルチティア引用リサーチ(ユニバーサル4段階ヒエラルキー)

ユニバーサルエビデンスヒエラルキーを使用して、すべての事実的主張を裏付けます:

  • ティア 1(主要な法定および科学機関 - ゴールドスタンダード): 公式の臨床協会(IDAI、Himpsi、PPHI、WHO、CDC、AAP)、政府の健康ガイドライン、査読付きジャーナル。年齢マイルストーン数値、臨床定義、および医療的主張には必須です。
  • ティア 2(信頼できる二次資料および業界調査): 信頼できるニュース機関(Kompas、Antara、BBC)およびマクロトレンドに関する機関のホワイトペーパー。
  • ティア 3(観察および現場の感情): 実際のオーディエンス/ユーザーの悩み、実務者のフィールドノート、コミュニティディスカッション。共感を呼ぶ冒頭のフックを作成するために使用します。常に感情または実践的な現場観察としてラベル付けし、規範的な法定または臨床的事実としてラベル付けしないでください。
  • ティア 4(禁止): コンテンツファーム、クレジットなしのSEOブログ、一次リンクのないAIのリハッシュ。引用しないでください。

ステップ 6: スペシャリストペルソナのロード

agency_agents_load(agent="content-creator")(または適切なエージェンシースペシャリスト)を呼び出し、アクティブなプロファイルのSOUL.mdによって指示されたコミュニケーショントーンを適用します。

ステップ 7: 完全なセマンティックHTMLの作成(Gutenbergネイティブ)

ネイティブのWordPress Gutenbergブロックコメント(<!-- wp:paragraph -->、<!-- wp:heading -->、<!-- wp:separator -->、<!-- wp:list -->)を使用して、900~1,500語のセマンティックHTMLを作成します:

  1. 単一のH1: ページテンプレートで処理されます。本文は冒頭の段落から直接開始します。
  2. 3段落の冒頭構造:
    • パラグラフ1(フック): オーディエンスの苦労を検証する実際のシナリオ(ティア3の洞察から導出)。
    • パラグラフ2(クイックアンサー): 自然で落ち着いた直接的な回答(堅苦しい「クイックアンサー:」ラベルは不要)。
    • パラグラフ3(トランジション): 一緒に解決策を探求する温かい招待状。
  3. H2ごとの詳細説明: 見出しごとに3~5段落の包括的な説明。実用的な家庭での刺激ステップ(≤24時間)を統合します。
  4. 内部リンクの統合:
    • 垂直(必須): 最初の300~500語以内に、プライマリハブへの自然なコンテキストリンク: <a href="/posts/<hub-slug>" class="text-primary font-semibold underline hover:text-accent">...</a>。
    • 水平: ステップ4で発見された関連するスポーク記事へのコンテキストリンク。
  5. コールアウトカードのコントラストルール: 特別な注意事項は、<div class="my-8 rounded-2xl border-2 border-primary/25 bg-card p-6 sm:p-8 shadow-sm">を使用し、タイトルをtext-primary font-boldまたはtext-foreground font-boldにする必要があります。ライトカードではtext-secondaryを使用しないでください。
  6. クロージングシーケンス:
    • <h2>結論と最良のサポートステップ</h2>: 3つのアクションリンク(/metode-belajar、/checklist-milestone、/kontakまたは直接WhatsApp)を含むまとめ。
    • <h2>保護者からよくある質問(FAQ)</h2>: 最低5つの質問を<details class="faq-accordion mb-4 rounded-xl border border-border p-4 bg-card transition-all"><summary class="cursor-pointer font-semibold text-foreground flex items-center justify-between"><span>...</span><span class="text-primary font-bold ml-2">+</span></summary><div class="mt-3 text-sm text-foreground/80 leading-relaxed border-t border-border pt-3">...</div></details>としてフォーマットします。免責事項の前に配置します。
    • 必須の臨床免責事項: <div class="my-6 rounded-xl border border-border bg-muted/30 p-4 text-xs italic text-muted-foreground leading-relaxed">注記: このガイドの情報は、家庭での自主的な刺激をサポートするための教育目的であり、小児科専門医または専門療法士による直接の評価および医学的アドバイスに代わるものではありません。</div>
    • <h2>参考文献</h2>: インライン引用と一致するクリック可能な完全なhttps://URLを含む、検証済みソースの<ol>リスト。
  7. 7つのオンページSEO基準: フォーカスキーワードがタイトル、パーマリンクスラッグ、最初の100語、少なくとも1つのH2/H3、抜粋に存在し、密度が0.5%~2.0%に維持されていること。

ステップ 8: ビジュアル生成とメディアサイドローディング(ゼロタイムアウト)

  1. image_generate(9Router)により画像を生成し、公式のブランド16進カラーと厳格なanti_text_rule(キャンバスにテキスト/数字/ウォーターマークなし)を適用します。
  2. MCPツールupload_mediaを使用して画像をアップロードします:
    • image_urlまたはimage_base64を渡します。
    • アイキャッチ画像の場合はapply_watermark: trueを渡し(PHP GDを介してブランドロゴをアダプティブに自動スタンプします)、H2本文イラストの場合はapply_watermark: falseを渡します。
    • ツールは、CMSドメイン(https://cms...)上の公式id(添付ファイルID)とurlを返します。Next.js Vercel remotePatternsに100%準拠しています。
  3. 記事内画像を直接<figure class="wp-block-image size-large"><img src="..." alt="..." /><figcaption>...</figcaption></figure>ブロックに埋め込みます。

ステップ 9: 即時公開(save_post)

以下の情報を指定してsave_postを呼び出します:

  • title、slug、content、category_id、focus_keyword、excerpt。
  • featured_media_id: ステップ8でupload_mediaから返された添付ファイルidに設定します。
  • generate_featured_image: falseおよびgenerate_in_article_images: false(サーバー側の同期画像生成をバイパスし、<1秒の即時DB書き込みとして実行され、タイムアウトのリスクを完全に排除します)。
  • WordPressが自動的に:
    1. 投稿を保存し、SEOメタフィールドを更新します。
    2. Next.jsのOn-Demand ISR再検証をトリガーします。
    3. 記事のチャンクをMariaDBベクター埋め込みテーブル(wp_sayoti_vectors)にインデックスします。

ステップ 10: SEO監査と最終レポート

  1. audit_post_seo(post_id: <id>)を呼び出して、SEOスコアを分析します。目標スコアは80~100%です。
  2. スコアが80%未満の場合は、不足している基準を特定し、是正措置を推奨します。
  3. 次の内容を含む包括的なレポートをユーザーに提供します:
    • 記事のライブURL
    • SEO監査スコア(パーセンテージ)
    • カバレッジされたフォーカスキーワード
    • カテゴリとハブリンク
    • 生成された画像の数
    • 今後の最適化の推奨事項

関連スキル