歴史資料をAIで検索できるRAGアプリを作った技術スタック
はじめに ある研究プロジェクトの成果報告書（全10巻）を対象に、自然言語で質問すると関連資料を検索し、出典付きで回答してくれる RAG（Retrieval-Augmented Generation）アプリケーションを開発しました。 本記事では、このアプリの技術スタックと設計上の判断について紹介します。 アーキテクチャ全体像 ユーザー ↓ 質問 Next.js (App Router) ↓ API Route クエリ補完 (LLM) ↓ 補完された検索クエリ Embedding生成 (text-embedding-3-small) ↓ ベクトル Pinecone (ベクトル検索, topK=8) ↓ 関連チャンク LLM (Claude Sonnet) ← システムプロンプト + コンテキスト ↓ SSEストリーミング ユーザーに回答表示 フロントエンド Next.js 16 + React 19 + TypeScript App Router を採用し、ページ構成はシンプルに3ページです。 パス 内容 / ランディングページ（質問例へのリンク付き） /chat チャットUI /about サイト概要 チャットページでは useSearchParams を使い、ランディングページの質問例をクリックすると /chat?q=... でそのまま質問が送信される仕組みにしています。 Tailwind CSS v4 スタイリングには Tailwind CSS v4 を使用。v4 では @import "tailwindcss" だけで設定が完了するため、tailwind.config.js が不要になりました。 ...