# AIエージェントでCMS連携を実装する：Claude CodeとCodex

公開日: 2026-10-20 | 更新日: 2026-10-20 | URL: https://blog.genko.me/ai-agent-cms-integration

> Claude CodeやCodexでヘッドレスCMS連携を実装する際の進め方を解説します。genko.meのSkill、llms.txt、MCP、CLIを使い分け、実在するAPIと生成型に基づいて取得コードを作り、検証する手順です。

AIエージェントにCMS連携を実装させるときは、最新の仕様、実際のスキーマ、変更してよい範囲を先に渡します。genko.meではSkillで作業手順を共有し、llms.txtやMCPで仕様を確認し、CLIで生成した型を使って実装できます。動くように見えるコードでも、下書きの扱いとAPIキーの保存先まで確認してから採用してください。

本記事はgenko.meの運営側が執筆しています。2026年10月20日時点の[genko.me](https://genko.me/)のドキュメントとSDK・CLI実装をもとに、Claude CodeやCodexへ渡す情報を整理します。

## AIによるCMS連携で先に決めること

「CMSをつないで」だけでは、エージェントは表示方法やAPI名を推測しがちです。最初に既存の構成を読み、一覧と詳細のどちらを作るか、公開記事だけかプレビューも必要かを決めます。

| 渡す情報 | 例 | 推測を防ぐ対象 |
| --- | --- | --- |
| フレームワーク | 既存プロジェクトの依存とルーティング | 対応しない部品や実行環境 |
| APIとフィールド | 実際の`blog`、`title`、`body` | 存在しない名前 |
| 取得範囲 | 公開記事、英語版、保存済み下書き | 下書きの誤公開 |
| 編集範囲 | 詳細ページと取得処理のみ | 無関係な設定変更 |
| 完了条件 | 型チェック、ビルド、表示確認 | コード生成だけでの終了 |

コンテンツの作成・公開そのものが目的なら、[ClaudeとCMSのMCP連携](https://blog.genko.me/claude-mcp-cms)が入口です。ここではアプリケーション側の実装を扱います。

## Skill・llms.txt・MCPの違い

| 方法 | 役割 | 接続情報 |
| --- | --- | --- |
| Skill | 初期設定や型同期の手順を共有 | プロジェクト内のファイル |
| llms.txt・Markdown | 認証なしで公開仕様を読む | 公開URL |
| MCP | ドキュメント検索とコンテンツ管理 | OAuth接続 |
| CLI | 接続設定・型生成・AIツールの設定 | コマンドによりAPIキー等を利用 |

Skillはリファレンス全体の代わりではありません。作業の順番を共有し、細かな引数や制限は現在のドキュメントで確認するためのものです。llms.txtにはワークスペースの記事やAPIキーは含まれません。

### genko.meのSkillを確認・配置する

プロジェクトルートで、まず配置内容を表示します。

```bash
npx @genko-me/cli skill --print
```

内容を確認してから配置する場合は次のコマンドを使います。

```bash
npx @genko-me/cli skill
```

配置先は`.claude/skills/genko-me/SKILL.md`です。これはClaude Code形式で、Codexなどが同じ場所を自動で読むとは限りません。使うエージェントへファイルを明示的に参照させるか、そのツールの読み込み方式へ合わせます。再実行でテンプレートが異なれば置き換わるため、プロジェクト独自の手順は別ファイルに置きます。

CLIを使わずに読む場合は、[公開Skill](https://genko.me/.well-known/agent-skills/genko-me/SKILL.md)もあります。配置だけでAPIキーが設定されたり、記事が作成されたりすることはありません。

### llms.txtから必要な仕様だけ読む

全文を無条件に渡すより、目次でページを選び、関係する本文を取得します。

```bash
curl 'https://docs.genko.me/llms.txt'
curl 'https://docs.genko.me/sdk/client.md'
curl 'https://docs.genko.me/sdk/queries.md'
```

英語版はパスの先頭に`/en/`を付けます。`llms-full.txt`には全ページの本文がありますが、ツールの入力上限に注意してください。保存した資料は自動更新されないので、実装前に取り直します。[Markdownの仕様](https://docs.genko.me/ai/llms-txt)を確認してください。

## Claude Code・CodexからMCPを設定する

MCPで検索や記事操作も行う場合は、使用するクライアントに合わせたコマンドを選びます。

```bash
npx @genko-me/cli@latest mcp --claude-code
```

```bash
npx @genko-me/cli@latest mcp --codex
```

Claude Code向けはプロジェクトの`.mcp.json`、Codex向けはユーザー全体の`~/.codex/config.toml`を更新します。両方を無条件に実行する必要はありません。再読み込み後にOAuthでログインし、`search_docs`と`get_doc`で資料を取得します。アプリのコードを書くだけなら、記事の公開操作まで依頼する必要はありません。

## CLIでスキーマを同期してから実装する

未接続のプロジェクトでは、[クイックスタート](https://docs.genko.me/getting-started)に沿ってワークスペースとAPIキーを用意し、初期化します。

```bash
npx @genko-me/cli init
```

初期化後、管理画面でフィールドを変更したら次を実行します。

```bash
npx @genko-me/cli pull
```

`pull`はスキーマの同期です。記事のアップロードや翻訳は行いません。生成された`lib/schema.ts`などを手で直して型エラーを消すと、次の同期で変更が失われます。`src/`構成や設定済みの出力先ではパスが異なるため、`genko.config.json`を基準に確認します。

APIキーはサーバー側の環境変数として管理します。チャット、ブラウザ向けコード、公開リポジトリへ値を貼り付ける必要はありません。

## 実在するSDKで記事を取得するコード例

次はサーバー側で使う最小例です。`blog`に`title`というテキストフィールドがあり、キーでそのAPIを取得できることが前提です。SDKが未導入の場合は追加します。

```bash
npm install @genko-me/sdk
```

```ts
import { createClient } from "@genko-me/sdk";

const apiKey = process.env.GENKO_API_KEY;
if (!apiKey) throw new Error("GENKO_API_KEY is required");

const client = createClient({
  workspace: "your-workspace",
  apiKey,
});

const { contents, totalCount } = await client.getList<{ title: string }>({
  endpoint: "blog",
  queries: { limit: 10, orders: "-publishedAt" },
});

console.log(totalCount, contents.map((post) => ({ id: post.id, title: post.title })));
```

`your-workspace`は自分のIDへ置き換えます。この型引数はレスポンスを実行時に検証するものではありません。普段の実装では生成済みクライアントを優先し、`fields`で取得項目を減らした場合や参照フィールドを使う場合は、実際に返る値も確認します。[SDKの設定](https://docs.genko.me/sdk/client)と[検索・絞り込み](https://docs.genko.me/sdk/queries)が対応する仕様です。

## AIへ渡す実装プロンプトの例

```text
既存のpackage.json、ルーティング、genko.config.jsonと生成済み型を確認してください。
genko-me SkillとSDKドキュメントを読み、既存クライアントを再利用してください。
公開済みblog記事の一覧を作成し、タイトルと詳細リンクを表示してください。
新しいAPI・フィールド・propsを推測しないでください。
APIキーの値を読んだり表示したりせず、サーバー側の既存設定を使ってください。
空一覧、取得失敗、記事なしを区別してください。
変更後はプロジェクト既存の型チェックとビルドを実行し、失敗や未検証を報告してください。
CMSへの書き込み・公開とデプロイは行わないでください。
```

受け入れ条件を具体化すると、見た目だけの成功を避けられます。Next.jsで表示部品を使う場合は、`@genko-me/react/next`の実在するpropsを確認させます。保存済み下書きプレビューではページの`searchParams`を`View`へ渡す必要があり、SDKがURLから自動取得するとは限りません。

## 生成されたCMS連携コードを検証する

1. 差分を読み、変更範囲とパッケージのimportを確認します。
2. プロジェクトの型チェックとビルドを実行します。
3. 公開記事、空一覧、存在しないID、取得失敗を確認します。
4. プレビューを実装した場合は、保存済み下書きが通常の公開表示へ混ざらないか確認します。
5. キャッシュを使う場合は、更新後の反映とプレビューの非共有を確認します。

TypeScriptが通ることと、CMSの値が想定どおりであることは別です。例えば取得項目の省略で型にある値が返らない場合や、参照先が非公開の場合もあります。ライブCMSへ接続していない検証は、その範囲を明記します。Next.jsの構成例は[Next.jsとヘッドレスCMS](https://blog.genko.me/headless-cms-nextjs)、言語別取得は[多言語CMSガイド](https://blog.genko.me/multilingual-headless-cms)を参照してください。

## よくある質問

### Codexでもgenko.meのSkillを使えますか？

Skill本文を参照して作業できます。ただしCLIの配置先はClaude Code形式なので、Codexが自動認識すると仮定せず、ファイルを明示的に参照させてください。

### llms.txtだけでCMSの記事を更新できますか？

できません。llms.txtは公開資料への入口で、記事操作にはMCPなど別の認証された手段が必要です。

### AIが生成した型を手で修正してもよいですか？

CLIの生成ファイルを直すのではなく、管理画面のスキーマと`pull`の結果を確認してください。アプリ独自の型変換は生成ファイルの外で行います。

### CLIのpullはCMSを書き換えますか？

スキーマを取得してローカルの型を同期するコマンドです。記事のアップロードや移行を行うコマンドではありません。

## 出典

2026年10月20日確認。

- [genko.me Skill](https://docs.genko.me/ai/skill)
- [llms.txtとMarkdown](https://docs.genko.me/ai/llms-txt)
- [MCPサーバー](https://docs.genko.me/ai/mcp)
- [CLIリファレンス](https://docs.genko.me/sdk/cli)
- [SDKクライアント設定](https://docs.genko.me/sdk/client)
- [APIキーの管理](https://docs.genko.me/studio/api-keys)