freeAiChat【第1回】：無料で構築できるRAG × マルチLLM対応AIチャットシステムの全体像を紹介

• 📂 目次：【AIチャット（freeAiChat）無料構築】連載の全記事まとめ
• 【第1回】無料で構築できるRAG × マルチLLM対応AIチャットシステムの全体像を紹介（閲覧中）
• 【第2回】FastAPI × LangChain × Weaviate で構築された RAG対応バックエンドを詳細解説
• 【【第3回】React × Next.js × shadcn/ui で構築されたチャットフロントエンドを詳細解説
• 💡 今後も開発効率化・ツール連携に関する記事を随時追加していきます！

🎯 本記事の対象読者

• 「RAGって聞いたことあるけど、実際に動かしたことがない」という方
• 「AIチャットを自前で構築してみたいが、クラウド課金が怖い」という方
• 新人研修・学生向けの「RAGの最小構成サンプル」を探している方

---

⚠️ 本リポジトリの位置づけ（重要）

freeAiChat は、AI と RAG（検索拡張生成）の仕組みを「動かしながら学ぶ」ことを目的としたサンプル・教材です。

そのため、以下の点は意図的に簡略化・未対応としています。ご理解の上ご利用ください。

• セキュリティ対策（認証・認可、CORS厳格化、入力検証など）
• 本番運用を想定した設計（ログ管理、監視、スケーリング、バックアップなど）
• エラーハンドリングの網羅性

「まずは動かして仕組みを理解する」→「その後、必要に応じてセキュリティや運用設計を追加する」 という流れを想定しています。

---

freeAiChat が解決する課題

AIチャットシステムを構築する際、よくある課題は以下の通りです：

• RAGの処理フローが複雑で理解しづらい
• EmbeddingモデルやベクトルDBの選定が難しい
• LLMプロバイダーを切り替えたいが、実装が煩雑
• UIまで含めた動作確認環境を整えるのが大変
• クラウド課金が怖くて試せない

freeAiChat はこれらを 「無料で動く最小構成」 で解決します。

✔ 完全無料でRAGチャットを構築できる

コンポーネント	使用技術	料金
Embeddingモデル	sentence-transformers（all-MiniLM-L6-v2）	無料
ベクトルDB	Weaviate OSS版（Docker）	無料
バックエンド	FastAPI + uvicorn	無料
フロントエンド	React + Next.js	無料
LLM	Groq 無料枠 / OpenAI 無料クレジット	無料枠

💡 「無料」の定義について

• Groq：無料枠がありますが、**レート制限（RPM/TPM）**があります。超過すると一時的に利用できなくなります。
• OpenAI：新規登録時に付与される無料クレジットには有効期限と上限があります。
• Weaviate OSS版：シングルノード構成のため、大規模運用時は有料版への移行を検討する必要があります。

つまり 「無料で始められる・学習できる」 構成であり、「無料で永遠に本番運用できる」 わけではありません。超過時は各プロバイダーの有料プランへの移行や、他の無料LLMへの切り替えを検討してください。

✔ シンプル構成で教材として最適

複雑な抽象化を避け、**「RAGの仕組みを理解するための最小構成」**になっています。

✔ サンプルとして読みやすいコード

バックエンドもフロントエンドも、**「初学者が読んでも理解できる」**レベルのシンプルさで構成されています。

---

🧩 全体アーキテクチャ

freeAiChat は バックエンド（API） と フロントエンド（UI） の2つのコンポーネントで構成されています。

データの流れ（2つのフロー）

フロー	入力	処理	出力先
登録系	テキスト / PDF / TXT / URL	抽出 → 前処理 → チャンク分割 → ベクトル化	Weaviate（ベクトルDB）
質問応答系	ユーザーの質問文	質問をベクトル化 → 類似度検索（上位3件） → LLMで回答生成	回答テキスト

---

🧩 構成コンポーネント

1. ai-chat-backend（RAG対応APIエンジン）

FastAPI をベースにしたバックエンドで、RAG処理・Embedding・ベクトル検索・LLM呼び出しを一括で提供します。

技術スタック：

• FastAPI / uvicorn
• LangChain（RAGパイプライン構築）
• Weaviate（OSS版、Docker起動）
• sentence-transformers（無料Embeddingモデル）
• Groq / OpenAI（環境変数で切り替え）

提供API：

エンドポイント	役割
POST /ingest	テキストを直接登録
POST /upload	PDF/TXTファイルをアップロードして登録
POST /ingest-url	URLをスクレイピングして登録
POST /ask	RAG質問応答（メイン機能）

環境変数の例（.env）：

# LLM設定
OPENAI_API_KEY=your_openai_key
GROQ_API_KEY=your_groq_key
LLM_PROVIDER=groq  # openai または groq で切り替え

# Weaviate設定
WEAVIATE_URL=http://localhost:8080
WEAVIATE_INDEX_NAME=knowledge_base

2. ai-chat-frontend（チャットUI）

React + Next.js + shadcn/ui で構築された軽量なチャットUIです。

機能：

• リアルタイムチャット（質問送信・回答表示）
• 知識ベース管理画面（テキスト/URL/ファイルから登録）
• 自動スクロール・ローディング表示・タイムスタンプ

画面イメージ：

① チャット画面

② 知識ベース管理画面

---

🧠 動作イメージ（curlで試せる）

バックエンドを起動後、以下の curl コマンドですぐに動作確認できます。

① ナレッジ登録（テキスト）

curl -X POST "http://localhost:8000/ingest" \
  -H "Content-Type: application/json" \
  -d '{"text": "LangChainは大規模言語モデルアプリケーションの開発用フレームワークです。"}'

② 質問応答（RAG）

curl -X POST "http://localhost:8000/ask" \
  -H "Content-Type: application/json" \
  -d '{"question": "LangChainとは何ですか？"}'

応答例：

{"answer":"LangChainは大規模言語モデルアプリケーションの開発用フレームワークです。"}

---

📘 技術要素まとめ表

freeAiChat を通じて触れる主要技術を一覧にまとめました。

技術カテゴリ	触れる技術	役割・学べること
クライアント/サーバー	React（フロント）/ FastAPI（バックエンド）	Webアプリの基本構造、API通信の流れ
API	REST API（/ask /upload /ingest）	HTTPリクエスト/レスポンスの理解
ベクトルDB	Weaviate（OSS版）	ベクトル検索、類似度計算、RAGの基盤
Embedding	sentence-transformers	テキストをベクトル化する仕組み
LLM	Groq / OpenAI	モデル呼び出し、プロバイダー切り替え
RAG	LangChain Retriever + Weaviate検索	「検索＋生成」の仕組み
フレームワーク	FastAPI / Next.js	モダンなWeb開発の基礎
ファイル処理	PDF/TXTアップロード	ドキュメント処理の基礎
スクレイピング	BeautifulSoup（ingest-url）	Webページからテキスト抽出
環境変数	.env	APIキー管理、設定の切り替え

---

🎓 初学者向け：コードの読み方ガイド

freeAiChat は「まず動かして、から読む」ことを想定しています。以下の順番で読むと、RAGの仕組みがスムーズに理解できます。

Step 1：全体像を把握する（5分）

ai-chat-backend/README.md の 「システム構成図」 と 「データの流れ」 を見る。

Step 2：バックエンドの核心を読む（15分）

ai-chat-backend/app.py の /ask エンドポイント を読む。
→ 質問を受け取り → ベクトル化 → Weaviate検索 → LLMに渡す → 回答返却、というRAGの流れが約50行で完結しています。

Step 3：登録の仕組みを読む（10分）

ai-chat-backend/app.py の /upload エンドポイント を読む。
→ PDF/TXTの読み込み → チャンク分割 → Embedding → Weaviate保存の流れがわかります。

Step 4：フロントエンドを動かす（10分）

ai-chat-frontend/ を起動し、管理画面からテキスト登録 → チャット画面で質問、という一連の流れを体験する。

---

🗂️ シリーズ構成

回	内容
第1回（本記事）	freeAiChat の全体像・コンセプト・動作イメージ
第2回	ai-chat-backend の詳細（RAG処理フロー、API仕様、Weaviate/LangChain構成）
第3回（予定）	ai-chat-frontend の詳細（UI構成、API連携、導入手順）

---

🚀 次回予告（第2回）

次回は ai-chat-backend の詳細 を解説します。

• app.py のRAG処理の内部構造（コード付き）
• Weaviateのスキーマ定義
• LangChainの RetrievalQA チェーン構築
• PDF/TXT/URL取り込みの実装（チャンク分割の具体的な戦略）
• LLM切り替えの実装（get_llm() 関数）
• 無料運用のための設定ポイントと注意事項

---

📚 ソースコード

今回ご紹介した freeAiChat のソースコードは、GitHubで公開しています。

👉 GitHub: https://github.com/8alfalfa8/freeAiChat

本記事がお役に立ちましたら、いいね❤️ や GitHub Star⭐ をいただけると励みになります！
IssueやPull Requestも歓迎しています。

---

• 📂 目次：【AIチャット（freeAiChat）無料構築】連載の全記事まとめ
• 【第1回】無料で構築できるRAG × マルチLLM対応AIチャットシステムの全体像を紹介（閲覧中）
• 【第2回】FastAPI × LangChain × Weaviate で構築された RAG対応バックエンド
• 【【第3回】React × Next.js × shadcn/ui で構築されたチャットフロントエンドを詳細解説
• 💡 今後も開発効率化・ツール連携に関する記事を随時追加していきます！

📢 掲載通知を受け取る
著者をフォローして次回または新掲載の通知をお待ちください！

---