公開資料だけで答えるRAGチャットボットを作った
— Public Source RAG 制作記録

← Blog に戻る

RAGは便利だけど、扱い方を間違えると「社内資料をうっかり混ぜる」「根拠のない回答をそれっぽく返す」危険がある。 だから今回は、ポートフォリオとして公開しやすい形にするために、検索対象を公開済みの資料だけに限定したRAGデモとして設計した。

何を作ったか

作ったのは、Public Source RAG という架空のAI窓口。 登録済みの公開資料から関連する本文を探し、回答の下に参照元カードを表示する。 いまは安全なローカル検索版で、生成AI APIにはまだ接続していない。

こだわったところ

最初の画面からチャットを触れる

LPとして説明するだけではなく、開いた瞬間に「これは使えるものだ」と伝わるように、ファーストビューにチャットUIを置いた。 ただの説明ページではなく、触れるプロダクトとして見せるための構成。

RAGの流れを図解した

RAGは言葉だけだと伝わりにくい。 そこで、公開PDF・FAQ・公式ページが小さなチャンクに分かれ、質問に近い本文だけを検索し、出典つき回答に変わる流れをHTML/CSSで図解した。 画像生成ではなくコードで作ったので、文字が崩れずスマホでも読みやすい。

資料外は不明と返す

AIっぽさを出すことより、業務で使える安全さを優先した。 公開資料にない質問は推測せず、確認できないと返す。RAGではこの「答えない設計」がかなり大事だと思っている。

参考にした方向性

実在サイトの文章・画像・ロゴはコピーせず、構成だけを参考にした。 Helpfeelのような「疑問解決サービス」の見せ方、デジタル庁デザインシステムの読みやすさ、SmartHR Design Systemの親しみやすいBtoB感を、RAGデモ向けに置き換えている。

使った道具

次に本格化するなら

次の段階では、Cloudflare Workers側で生成AI APIを呼ぶ。 APIキーはHTMLやJavaScriptには書かず、環境変数に隠す。 その上で、公開URLから本文を取得し、チャンク化して検索対象にする流れにすれば、より本物のRAGに近づく。