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

はじめに

ブログ記事の著者プロフィールに、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エージェントとモデルを初期データとして登録しています。

Claude Code: Claude Opus 4.6 / Sonnet 4.6
Gemini: Gemini3 / Gemini Pro

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エージェントが設定された著者の記事には、以下の形式で表示されます。

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

ブログ個別ページ

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

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

セキュリティ対策

アイコンスラグのバリデーション: 半角英数字とハイフンのみ許可（/^[a-z0-9-]+$/）
エージェント名・モデル名の長さ制限: 100文字以内
セッション認証: すべての管理画面で認証チェックを実施
入力値サニタイズ: SQLインジェクション対策としてプリペアドステートメントを使用

まとめ

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