🚀 作業指示書 - RAG Chat日本語化・LINEデザイン適用・Claude API連携実装¶
📋 作業順序と詳細手順¶
Phase 1: 日本語化・LINEデザイン適用¶
Step 1.1: UIの完全日本語化¶
# 対象ファイル: /var/docker/task2-service/app/rag-advisor/src/pages/ChatInterface.tsx
# 修正内容:
- "RAG Assistant" → "RAGアシスタント"
- "Ask questions about your documents" → "ドキュメントについて質問してください"
- "No messages yet" → "まだメッセージはありません"
- "Start a conversation by asking a question below" → "下の入力欄から質問を開始してください"
- "Ask a question..." → "質問を入力してください..."
Step 1.2: LINEデザイン言語コンポーネント適用¶
// LINEスタイルのチャットバブル実装
// 色彩: LINE Green (#00B900), LINE Gray (#F7F7F7)
// フォント: LINE Seed Sans JP
// アイコン: LINE風の丸型アバター
// レイアウト: LINEチャット風の右寄せ・左寄せ
Step 1.3: CSSスタイル調整¶
/* LINEデザイン適用 */
.chat-bubble-user: background-color: #00B900; color: white; border-radius: 18px;
.chat-bubble-bot: background-color: #F7F7F7; color: #333; border-radius: 18px;
Phase 2: Claude API連携実装¶
Step 2.1: Claude APIキー設定¶
# 環境変数設定
cd /var/docker/task2-service
echo "ANTHROPIC_API_KEY=sk-ant-api03-..." >> .env
echo "CLAUDE_MODEL=claude-3-5-sonnet-20241022" >> .env
Step 2.2: 実際のRAGロジック実装¶
// /var/docker/task2-service/app/api/src/routes/rag.js の修正
const Anthropic = require('@anthropic-ai/sdk');
const anthropic = new Anthropic({
apiKey: process.env.ANTHROPIC_API_KEY,
});
// 実際のRAG実装:
// 1. ベクトル検索でドキュメント取得
// 2. コンテキストをClaudeに送信
// 3. 日本語で回答生成
Step 2.3: ベクトル検索統合¶
// pgvector + Meilisearch統合
// 既存のtask2-vector-db (PostgreSQL + pgvector) 活用
// task2-search (Meilisearch) 活用
Step 2.4: 日本語プロンプトエンジニアリング¶
const systemPrompt = `
あなたは日本語対応のRAGアシスタントです。
提供されたドキュメントを基に、正確で有用な回答を日本語で提供してください。
回答時のルール:
1. 必ず日本語で回答
2. 丁寧語を使用
3. ソース情報を含める
4. 不明な場合は正直に伝える
`;
🔧 実装環境¶
対象コンテナ・サービス¶
-
task2-api: APIロジック実装
-
task2-ui: フロントエンド更新
-
task2-vector-db: ベクトル検索
-
task2-search: 全文検索
利用可能インフラ¶
- ✅ PostgreSQL + pgvector (ベクトルDB稼働中)
- ✅ Meilisearch (検索エンジン稼働中)
- ✅ Redis (キャッシュ稼働中)
- ✅ Nginx (プロキシ設定済み)
📊 期待される成果¶
完成後の機能¶
-
日本語でのRAG対話: 自然な日本語での質問・回答
-
LINEライクなUI: 親しみやすいチャット画面
-
実際のドキュメント検索: pgvector + Meilisearchでの高精度検索
-
Claude連携: 最新のClaude 3.5 Sonnetでの回答生成
テスト項目¶
🎯 開始準備完了¶
現在のシステム状況:
- ✅ UI基盤: 完成
- ✅ API構造: 完成
- ✅ インフラ: 完全稼働
- 🔄 Claude API: 実装待ち
標準ワークフローに従って実装を開始してください。