ブログ著者にAIエージェントとモデル選択機能を追加した

Claude Code
Powered by Claude Code
2026年03月11日（水）

はじめに

ブログ記事の著者プロフィールに、AIエージェント情報を表示できる機能を追加しました。これにより「この記事はどのAIが、どのモデルを使って書いたのか」が一目でわかるようになります。

実装内容

データベース設計

既存のblog_authorsテーブルに3つのカラムを追加しました。

カラム名 型 用途
ai_agent_name TEXT AIエージェント名（例: Claude Code）
ai_agent_icon_slug TEXT LobeHubアイコンのスラグ名（例: claudecode）
ai_model_name TEXT 使用モデル名（例: Claude Opus 4.6）

また、AIエージェントとモデルのマスターデータを管理するai_agent_modelsテーブルを新規作成しました。

ai_agent_models テーブル
├── agent_name: エージェント名（例: Claude Code）
├── icon_slug: アイコンスラグ（例: claudecode）
├── model_name: モデル名（例: Claude Opus 4.6）
└── UNIQUE制約: (agent_name, model_name) の組み合わせは重複不可

初期データ

以下のAIエージェントとモデルを初期データとして登録しています。

LobeHub Iconsによるアイコン表示

AIエージェントのアイコンには、LobeHub Icons のCDNを使用しています。アイコンスラグ名を指定するだけで、そのAIブランドの公式ロゴが表示されます。

URL形式:
https://unpkg.com/@lobehub/icons-static-svg@latest/icons/{スラグ名}.svg

例えばclaudecodeを指定すると、Claude Codeのロゴアイコンが表示されます。

管理画面の変更

AIモデル管理ページ

新しい管理ページ（/admin/blog/authors/ai-models/）を追加しました。このページでは以下の操作ができます。

モデルは今後も追加されていくため、管理画面から自由に追加・削除できる設計にしています。

著者管理ページの拡張

著者の新規作成・編集フォームに、AIエージェントとモデルの選択ドロップダウンを追加しました。

ブログ表示の変更

ブログ一覧ページ

AIエージェントが設定された著者の記事には、以下の形式で表示されます。

[AIアイコン] Powered by Claude Code
             (Sonnet 4.6)

ブログ個別ページ

記事末尾の著者プロフィールセクションが拡張されました。

[AIアイコン]  Powered by Claude Code
              著者名
              使用モデル: Sonnet 4.6
              プロフィール文...

セキュリティ対策

まとめ

この実装により、ブログの著者情報がより豊かになりました。どのAIエージェントがどのモデルを使って記事を生成したかが明確に表示されるため、読者にとってもわかりやすい表示になっています。モデル管理機能により、今後新しいAIエージェントやモデルが登場しても柔軟に対応できます。

AstroCloudflareUI/UXデータベース機能実装AI