3.2 KiB
3.2 KiB
Ask-AI Integration Implementation
概要
oauth_new アプリに ask-AI 機能を統合しました。この機能により、ユーザーはAIと対話し、その結果を atproto に記録できます。
実装されたファイル
1. /src/hooks/useAskAI.js
- ask-AI サーバーとの通信機能
- atproto への putRecord 機能
- チャット履歴の管理
- イベント送信(blog との通信用)
2. /src/components/AskAI.jsx
- チャット UI コンポーネント
- 質問入力・回答表示
- 認証チェック
- IME 対応
3. /src/App.jsx
の更新
- AskAI コンポーネントの統合
- Ask AI ボタンの追加
- イベントリスナーの設定
- blog との通信機能
JSON 構造の記録
./json/
ディレクトリに各 collection の構造を記録しました:
ai.syui.ai_user.json
- ユーザーリストai.syui.ai_chat.json
- チャット記録(空)syui.syui.ai_chat.json
- チャット記録(実データ)ai.syui.ai_chat_lang.json
- 翻訳記録ai.syui.ai_chat_comment.json
- コメント記録
実際の ai.syui.log.chat 構造
確認された実際の構造:
{
"$type": "ai.syui.log.chat",
"post": {
"url": "https://syui.ai/",
"date": "2025-06-18T02:16:04.609Z",
"slug": "",
"tags": [],
"title": "syui.ai",
"language": "ja"
},
"text": "質問またはAI回答テキスト",
"type": "question|answer",
"author": {
"did": "did:plc:...",
"handle": "handle名",
"displayName": "表示名",
"avatar": "アバターURL"
},
"createdAt": "2025-06-18T02:16:04.609Z"
}
イベント通信
blog(ask-ai.js)と OAuth アプリ間の通信:
送信イベント
postAIQuestion
- blog から OAuth アプリへ質問送信aiProfileLoaded
- OAuth アプリから blog へ AI プロフィール送信aiResponseReceived
- OAuth アプリから blog へ AI 回答送信
受信イベント
- OAuth アプリが
postAIQuestion
を受信して処理 - blog が
aiResponseReceived
を受信して表示
環境変数
VITE_ASK_AI_URL=http://localhost:3000/ask # ask-AI サーバーURL(デフォルト)
VITE_ADMIN_HANDLE=ai.syui.ai
VITE_ATPROTO_PDS=syu.is
VITE_OAUTH_COLLECTION=ai.syui.log
機能
実装済み
- ✅ ask-AI サーバーとの通信
- ✅ atproto への question/answer record 保存
- ✅ チャット履歴の表示・管理
- ✅ blog との双方向イベント通信
- ✅ 認証機能(ログイン必須)
- ✅ エラーハンドリング・ローディング状態
- ✅ 実際の JSON 構造に合わせた実装
今後のテスト項目
- ask-AI サーバーの準備・起動
- 実際の質問送信テスト
- atproto への putRecord 動作確認
- blog からの連携テスト
使用方法
- 開発サーバー起動:
npm run dev
- OAuth ログイン実行
- "Ask AI" ボタンをクリック
- チャット画面で質問入力
- AI の回答が表示され、atproto に記録される
注意事項
- ask-AI サーバー(VITE_ASK_AI_URL)が必要
- 認証されたユーザーのみ質問可能
- ai.syui.log.chat への書き込み権限が必要
- Production 環境では logger が無効化される