Lovableで自社AIチャットボットを作る完全ガイド｜社内FAQ・接客・サポートまで

こんな『困りごと』ありませんか？#

• ChatGPTを社内に入れたいけど、機密情報を投げるのが怖い／全員分のアカウント費用が重い
• サイトに『AIに質問』ボタンを置きたいけど、IntercomやZendeskは月額が高すぎる
• FAQページを作っても誰も読まない。同じ質問が毎日Slackに飛んでくる
• 自社マニュアル・商品データを覚えたAIに、24時間お客様対応してほしい
• 外部のチャットボットSaaSは『デザインが浮く』『データを社外に出したくない』

この記事は、こうした困りごとを『Lovableで作る自社AIチャットボット』で一気に解決する手順書です。プログラミング未経験でも、チャット欄に貼るだけのプロンプト集付きで、半日で動くものまで持っていけます。

完成イメージ#

最終的には『ブランドに合わせたデザイン』『自社情報を学んだ回答』『出典リンク付き』『会話履歴の保存』まで揃ったチャットボットになります。順を追って作ります。

Before / After#

• ❌ Before：FAQページに分散した情報を、お客様や社員が自力で探す。同じ質問が毎日Slackに
• ❌ Before：ChatGPT Teamを全社員分契約（月3,000円×人数）→年間数百万円のコスト
• ✅ After：自社サイトに常駐するAIが、自社マニュアルを根拠に24時間回答。問い合わせ件数が大幅減
• ✅ After：Lovable AI Gatewayの従量課金で、使った分だけ。社内利用は社員のログインで制限可

全体像（裏で何が起きているか）#

[ユーザー] 
   │ 質問を入力
   ▼
[Lovableで作ったチャット画面] 
   │ /api/chat に送信（会話履歴も一緒に）
   ▼
[Lovableのサーバー関数（裏側のプログラム）] 
   │ ① 関連する社内ドキュメントを検索（RAG）
   │ ② 検索結果＋会話履歴をAIに渡す
   ▼
[Lovable AI Gateway] 
   │ Gemini / GPTなどのAIモデルを呼ぶ
   ▼
[ストリーミングで回答が戻る] → 画面に少しずつ表示

ステップ1：何を学ばせるか決める（最重要）#

AIチャットボットの精度の8割は『何を覚えさせるか』で決まります。最初に以下を決めてください。

• 対象ユーザー：社内向け？お客様向け？両方？
• 学ばせるドキュメント：FAQ、商品マニュアル、社内規程、過去の問い合わせログ、議事録など
• 答えさせない範囲：価格交渉、契約条件、医療・法律的判断などはNGにする
• 答えがわからないときの挙動：『担当者にお繋ぎします』のように、無理に答えさせない

ステップ2：Lovable Cloudを有効化（30秒）#

会話履歴の保存とログイン機能のために、Lovable Cloudを有効化しておきます。Lovableチャット欄に次のようにお願いするだけです。

Lovable Cloudを有効化して、メールログインができるようにしてください。チャット履歴を保存するための conversations / messages テーブルも作ってください。

ステップ3：チャットUIを作る（コピペプロンプト）#

Lovableチャット欄に下記をそのまま貼ってください。AI Elements（チャット用の整ったコンポーネント群）を使って、ChatGPT風のきれいな画面が一発で出ます。

/chat ルートに、ChatGPT風のチャット画面を作ってください。要件：
- AI Elements（@/components/ai-elements/）の Conversation / Message / PromptInput を使う
- メッセージは message.parts でレンダリング（テキスト＋将来のツール表示に対応）
- 送信中は『考え中…』のシマー表示
- 入力欄は常にフォーカス、Enterで送信、Shift+Enterで改行
- ストリーミングでAIの回答が少しずつ表示される
- 右上に『新しい会話』ボタン
- ブランドカラーは src/styles.css のセマンティックトークンを使用

ステップ4：AIを呼び出すサーバー関数を作る#

Lovable AI Gateway経由でAIを呼ぶサーバー側の処理を作ります。チャット欄に下記を貼ってください。

src/routes/api/chat.ts にPOSTハンドラを作ってください。要件：
- @ai-sdk/openai-compatible で Lovable AI Gateway（https://ai.gateway.lovable.dev/v1）に接続
- ヘッダーは Lovable-API-Key と X-Lovable-AIG-SDK: vercel-ai-sdk
- モデルは google/gemini-3-flash-preview（デフォルト）
- streamText で会話履歴を渡し、toUIMessageStreamResponse でストリーミング返却
- LOVABLE_API_KEY は process.env から読み、未設定なら500エラー
- システムプロンプトは『あなたは〇〇株式会社のAIアシスタント。事実に基づき、不明点は推測せず担当者に繋ぐと答える』
- 429（レート制限）と402（クレジット切れ）は専用エラーメッセージを返す

ステップ5：自社情報を覚えさせる（RAG）#

ここが本記事のキモです。RAG（Retrieval-Augmented Generation）= 質問のたびに関連ドキュメントを検索してAIに渡す仕組みを作ります。

5-1. ドキュメントを保存するテーブルを作る

Lovable Cloudに knowledge_documents テーブルを作ってください。
カラム：id, title, content（本文）, source_url, embedding（vector(1536)）, created_at
- pgvector拡張を有効化
- embeddingカラムにHNSWインデックス（cosine距離）
- RLSをON、認証済みユーザーは読み取り可、admin ロールのみ書き込み可（has_role関数で判定）

5-2. ドキュメント取り込み画面を作る

/admin/knowledge ページを作ってください。
- 管理者ログイン必須
- テキスト貼り付け or .md/.txt/.pdfファイルアップロードでナレッジを登録
- 登録時にサーバー関数で text-embedding-3-small（または gemini-embedding）でベクトル化して保存
- 一覧表示・削除も可能

5-3. チャット時に関連ドキュメントを検索して渡す

/api/chat のサーバー関数を改修してください。
- ユーザーの最新の質問をベクトル化
- knowledge_documents から cosine類似度で上位5件を取得
- システムプロンプトに『以下の社内ドキュメントを根拠に回答してください。根拠がない場合は推測せず、わからないと答えてください』として埋め込む
- 回答末尾に出典タイトル＋URLを表示するよう指示

ステップ6：サイト右下に常駐させる（埋め込みウィジェット）#

せっかくのチャットボット、専用ページに置いただけでは使われません。サイト全体の右下に常駐させます。

__root.tsx にチャットウィジェット（FloatingChatWidget）を追加してください。
- 右下に丸い💬ボタン（ブランドカラー、影付き）
- クリックで400x600pxのチャット窓が開く（モバイルは全画面）
- 閉じるボタン、最小化ボタン
- 状態は localStorage に保存（再訪時も会話継続）
- /admin や /login など特定ルートでは非表示

ステップ7：会話履歴を保存する#

後で『どんな質問が多いか』を分析するため、会話履歴を保存します。

conversations と messages テーブルを使って、すべての会話をDBに保存してください。
- conversations: id, user_id（nullable=匿名OK）, title（最初の質問から自動生成）, created_at
- messages: id, conversation_id, role（user/assistant）, content, created_at
- toUIMessageStreamResponse の onFinish で完了したメッセージを保存
- /admin/conversations で管理者が一覧・検索可能（RLSで保護）

ステップ8：本番運用前の必須チェック#

• ✅ 鍵はサーバー関数のみ（VITE_接頭辞は使わない）
• ✅ レート制限：1ユーザーあたり1分10回までの簡易制限を入れる（悪用防止）
• ✅ 個人情報マスク：氏名・メアドが回答に出ないようシステムプロンプトで指示
• ✅ 『わからないとき』のフォールバック：『お問い合わせフォームへ』のリンクを必ず出す
• ✅ ログ：管理画面で『回答できなかった質問』を週次レビュー→ナレッジに追加するループ

よくある失敗とリカバリ#

次の一歩：拡張アイデア#

• Slackコネクタ：Slackで@メンション→このAIが答える社内Botに
• Resendコネクタ：『わからない』回答が出たら担当者にメール通知
• Stripeコネクタ：有料プラン限定で高度な質問解放
• Google Sheets：会話履歴を自動でスプレッドシートに同期して分析
• 音声入力：ElevenLabsコネクタで音声会話できるAIに

よくある質問#

Q. ChatGPTのAPIキーは必要？

不要です。Lovable AI Gateway経由なら、Gemini / GPT / Claudeなどを統一窓口で使えます。Lovableのクレジットから従量課金されます。

Q. 何件くらいまで学ばせられる？

pgvector + HNSWインデックスなら、数万件のドキュメントでも実用的な速度で検索できます。それ以上はDBの分割やキャッシュ戦略を検討してください。

Q. 社外秘データを使って大丈夫？

Lovable CloudのDBに保存されるデータは、Lovable AI Gatewayを通じてAIモデルに渡る部分以外は社外に出ません。AIモデル側のデータ取り扱い方針は、利用するモデル（Gemini / GPTなど）の規約を確認してください。重要案件はEnterpriseプランや、自社のVertex AI / Bedrockに切り替える選択肢もあります。