FirebaseでAIチャットボットをサクッと作ってみる

LLMのはじめの一歩はFirebaseを活用した定番のAIチャットボット開発をおすすめします。 FirebaseにはLLMを扱うための機能が豊富に用意されているので、想像以上に簡単にAIチャットボットを作成できます。 今回の勉強会では、FirebaseとLLMの相性の良さをご紹介し、みなさんのLLM活用のはじめの一歩をサポートできればと思います。

https://sonicgarden.connpass.com/event/324540/

Transcript

1. FirebaseでAIチャットボットをサ クッと作ってみる hiropon
2. LLM相変わらず盛り上がってますねー こんな人いませんか？（いや！いるはずだ！！） • 興味はあるけど仕事が忙しくて全然触れてないんだよな・・・ • 完全に乗り遅れて今更初歩的なこと聞きづらいんだよな・・・ • 何から始めたらいいのやら・・・
3. ド定番のAIチャットボットがおすすめ！ • 公式のクイックスタートとかの流れでだいたい作れちゃう ◦ https://platform.openai.com/docs/guides/chat-completions/getting-started ◦ https://docs.anthropic.com/en/docs/quickstart • 簡単に作れる割に意外と便利に使える ◦ 私も実際に自作したAIチャットボットを業務でフル活用してます • マルチモーダルやRAGなど必要になったときに機能拡張していける ◦ そしていつのまにかLLMの理解度が上がっていく！
4. LLMのAPIの基本的な使い方 • アカウント作ってAPIキーを発行する • APIキーとモデルとリクエスト（質問）を入力してAPIを実行する • モデルからの回答がAPIのレスポンスとして返ってくる チャットボットの場合は、前回までの質問/回答もリクエストに含めることでLLMとの 継続した会話が実現できる messages: [ { role: ‘user’, content: ‘しりとりしましょう。りんご’ }, { role: ‘model’, content: ‘ゴリラ’ }, { role: ‘user’, content: ‘ラッパ’ }, ]
5. プラットフォームは Firebaseがおすすめ！ • めっちゃ簡単にアプリを公開できる ◦ だってサーバーレスだもの • Cloud FunctionsでセキュアにLLM連携 ◦ こんなに簡単にサーバサイドに処理を持っていけるなんて・・・ • FirestoreがAIチャットボットと相性抜群 ◦ リアルタイム同期 ◦ ベクトル検索
6. めっちゃ簡単にアプリを公開できる • 例えば、今流行りのRemix（SPAモード）だと ◦ FirebaseコンソールでFirebaseプロジェクト作って ◦ create-remixして ◦ firebase initして ◦ firebase deployしたらアプリ爆誕 ウソみたいだろ。 アプリできちゃってるんだぜ。これで・・・
7. Cloud Functionsでセキュアに LLM連携 // Cloud Functions（サーバサイド） export const hello = onCall(() => { return ‘こんにちは’; }); // Webアプリ（フロントサイド） const hello = httpsCallable(getFunctions(), ‘hello’); const response = await hello(); console.log(response); // こんにちは Cloud Functionsを使えばこんなに簡単にサーバサイドで処理を実行することができます！ Cloud Functions内でLLMのAPIを実行すればAPIキーを隠蔽できる
8. Cloud Functionsでセキュアに LLM連携 // Cloud Functions（サーバサイド） export const geminiPro = onCall(async (({ data: { message } }) => { const vertexAI = new VertexAI({ project: ‘your-project’, location: ‘your-location’ }); const generativeModel = vertexAI.getGenerativeModel({ model: ‘gemini-pro’ }); const request = { contents: [{ role: ‘user’, parts: [{ text: message }] }], }; const result = await generativeModel.generateContent(request); return result.response; }); // Webアプリ（フロントサイド） const geminiPro = httpsCallable(getFunctions(), ‘geminiPro’); const response = await geminiPro({ message: ‘こんにちは’ });
9. Cloud Functionsでセキュアに LLM連携 お気づきだろうか・・・ // Cloud Functions（サーバサイド） export const geminiPro = onCall(async (({ data: { message } }) => { const vertexAI = new VertexAI({ project: ‘your-project’, location: ‘your-location’ }); const generativeModel = vertexAI.getGenerativeModel({ model: ‘gemini-pro’ }); const request = { contents: [{ role: ‘user’, parts: [{ text: message }] }], }; const result = await generativeModel.generateContent(request); return result.response; }); // Webアプリ（フロントサイド） const geminiPro = httpsCallable(getFunctions(), ‘geminiPro’); const response = await geminiPro({ message: ‘こんにちは’ });
10. Cloud Functionsでセキュアに LLM連携 • Cloud FunctionsならAPIキーなしでLLM連携できちゃう！ ◦ Gemini Proはもちろん ◦ AnthropicのモデルもAPIキーなしでイケちゃう ◦ LLM費用はFirebaseの請求に含まれるのでそこだけ気にしていれば OK！ ▪ 予算アラート設定で安心してご利用いただけます ◦ OpenAIじゃなきゃダメと言うわがままな人、安心してください ▪ Secret ManagerでセキュアにAPIキーを管理できます
11. Cloud Functionsでセキュアに LLM連携 Cloud Functions Vertex AI Gemini Pro Claude（Anhtropic） サービスアカウント Vertex AIの実行権限をIAMで割り当てられているから APIキーなしでLLM連携できる！ APIキーを使って直接 Claudeを利用も可
12. FirestoreがAIチャットボットと相性抜群 「Firestoreといえば」のリアルタイム同期でなんちゃってストリーミング！ export const geminiPro = onCall(async (({ data: { message } }) => { const vertexAI = new VertexAI({ project: ‘your-project’, location: ‘your-location’ }); const generativeModel = vertexAI.getGenerativeModel({ model: ‘gemini-pro’ }); const request = { contents: [{ role: ‘user’, parts: [{ text: message }] }], }; const streamingResult = await generativeModel.generateContentStream(request); let text = ‘’; for await (const item of streamingResult.stream) { text += item.choices[0]?.delta?.content ?? ‘’; await updateDoc(ref, { message: text }); } }); ストリーミングレスポンスをFirestoreデータに保存することで フロントサイドにストリーミングっぽくレスポンスを伝播できる
13. FirestoreがAIチャットボットと相性抜群 LLMといえばRAG（Retrieval-Augmented Generation）ですよね LLM ナレッジ データベース AIチャットボット 質問 回答に必要そうな ナレッジデータを検索 質問 + ナレッジデータ ナレッジデータも 加味して回答 1 2 3 4
14. FirestoreがAIチャットボットと相性抜群 そしてRAGといえばベクトル検索。Firestoreはベクトル検索もできる！ const queryVector = await embedding(queryText); const snapshots = await getFirestore() .collection(‘store’) .findNearest(‘vector’, queryVector, { limit: 10, distanceMeasure: ‘COSINE’ }) .get(); ウソみたいだろ。 ベクトル検索できてるんだぜ。これで・・・
15. FirestoreがAIチャットボットと相性抜群 ベクトル検索 + LLMでRAGの精度を向上 const queryVector = await embedding(queryText); const snapshot = await getFirestore() .collection(‘store’) .findNearest(‘vector’, queryVector, { limit: 10, distanceMeasure: ‘COSINE’ }) .get(); const data = snapshot.docs.map((doc) => doc.data()); const instruction = `このデータをxxxな感じで絞り込んで ${JSON.stringify(data)}`; const request = { contents: [{ role: ‘user’, parts: [{ text: instruction }] }], }; const result = await generativeModel.generateContent(request); あとは皆さん得意のプログラミングで RAGをいい感じにしていけば OK!
16. AIチャットボット on Firebase どうでしょう？ 皆さん、だいぶ AIチャットボット on Firebase したくなってきてるんじゃないでしょうか？
17. まだ作れる気しないわ〜と思ってるそこのあなた 安心してください。いい本あります。
18. AI Chat Firebase - BOOTHにて好評発売中 • すぐ使えるオリジナルAIチャット • ハンズオン形式でいろいろ学べる ◦ Firebase Webアプリ開発 ◦ 生成AI（GeminiPro、GPT） ◦ Remix（SPAモード） ◦ pnpm（monorepo） • Firestoreベクトル検索でRAG実装
19. Coming soon… 近況に合わせてちょっとだけリライト（ついでに誤字脱字修正） したAI Chat Firebaseを 技術の泉シリーズとして近日出版予定 今すぐ欲しいって人以外はこっちを待ってもらったほうがいいかも！？ 発売日確定したらXでXするのでよかったらフォローしてね https://x.com/HiroroWork こんな感じのアイコンです ->
20. Firebaseよくわかんないと思ってるそこのあなた 安心してください。いい本あります。
21. Firebase Tutorial - BOOTHにて好評発売中 • SonicGarden流Firebase開発をそのまま チュートリアルに • Mantine, Plop, App Router移行等、 Firebase経験者も気になる情報満載！ • チュートリアルなのに200ページ超えの超 大作