LOG104R2R2R2026/3/20

ハコブくんがAIエージェントになった

プロジェクトの記録が、読者と対話できるようになった。

このプロジェクトについて

iPhoneで撮影した現実空間をUnityでデジタルツイン化し、ロボットアームの動作をシミュレーションで最適化してから実機に展開するパイプラインを個人で構築している。

LOG101でシミュレーションフェーズが完了した。LOG104では、100日以上の開発記録を対話できる資産に変えることに着手した。

ハコブくんAIエージェントの構築

発想の起点

Difyを使ったAIエージェントチャットの構築を検討し始めたのは、「読者向け」よりも「自分の作業支援向け」という発想からだった。

全DAYのログを知った状態で即答できる軍師。過去の判断を横断的に参照できる仕組み。それがあれば、毎回Claudeにコンテキストを貼り付けて聞く手間が消える。

さらに整理すると、Pixels to Motorsには3つのプロジェクトが存在する。

R2R2R（Pixels to Motors）：LOG66〜101のログ
ハコブくん（薬剤搬送ロボット）：LOG01〜19、LOG49〜65のログ（合計35記録）
ロボティクスデザイン実務フロー可視化：LOG50〜56のログ

3プロジェクトを横断した「エイイチの設計判断」が参照できるエージェントは、UX知見 × ロボティクス3プロジェクトが全部入った状態になる。

構築プロセス

ナレッジベースの構築

Difyのナレッジベースに開発ログを食わせる方法を試行した。

最初にウェブクロール（Jina Reader）を試みたが、無料プランの制限でエラーが発生。テキストファイルを1ファイルずつアップロードする方法に切り替えた。

LOG89〜94の開発ログをMarkdownファイルで投入。チャンク設定を調整してナレッジベースを構築した。

チャットフローの構築

ユーザー入力 → 知識検索（ナレッジベース）→ LLM → 回答

LLMノードのシステムプロンプトには以下を設定した。

あなたは「Pixels to Motors」プロジェクトの専用アシスタントです。
開発ログ（DAYシリーズ）の内容を元に具体的に答える。
技術的な質問には実装の背景や教訓も含めて答える。
ナレッジにない情報は「その記録はまだ入っていません」と返す。

{{#context#}}

トラブルシューティング：LLMが動かない

構築完了後、全リクエストが「1 FAILURE」になる問題が発生。コード・CORS・APIキーを順番に確認したが原因が掴めなかった。

最終的な原因：LLMノードがgpt-4に設定されていたが、OpenAIのAPIキーがDifyに未設定だった。

Anthropicのモデルプロバイダーを追加し、LLMノードをclaude-sonnet-4-6に変更したところ即座に動作した。

カスタムUIの構築

DifyのiframeではPC/SPでデザインが変わる問題があった。そこでDify APIを直接叩くカスタムチャットUIをHTMLで構築した。

設計のポイント

ハコブくんのアイコンをbase64で直接埋め込み
黒背景 + イエロー（#e8ff00）アクセントでPixels to Motorsのブランドに統一
PC/SP完全対応（iframeではなくAPIを直接呼び出し）
チャット内固定スクロール（会話が長くなってもページ全体が伸びない）

動的フォローアップ提案

Difyのシステムプロンプトに以下を追加した。

回答の最後に必ず以下の形式でフォローアップ質問を3つ提案してください：

[次の質問]
- 〇〇〇
- 〇〇〇
- 〇〇〇

質問は会話の文脈に合わせて毎回変えてください。

コード側では[次の質問]マーカーを検出してバブルから除去し、ボタンとして表示する処理を実装。会話の内容に合わせて毎回異なる提案が動的に生成される。

完成したシステムの構成

ハコブくんチャット
│
├── フロントエンド（カスタムHTML）
│   ├── Dify API直接呼び出し
│   ├── ストリーミング表示
│   ├── 動的フォローアップ提案ボタン
│   └── Pixels to Motorsブランドデザイン
│
└── バックエンド（Dify）
    ├── ナレッジベース（DAY89〜94）
    ├── 知識検索ノード
    └── LLM（claude-sonnet-4-6）