はじめに

　本書はFireStarterの第四弾になります。

　第三段までは「持続可能なFirebaseプロジェクトを目指して」シリーズということで、Firebaseアプリ開発における私たちなりのノウハウを言語化した内容になっています。

　第四段は持続可能なFirebaseプロジェクト開発の流れは踏襲しつつも、新しい技術を積極的に採用し、かつ、より実用的なサンプルアプリ開発を通じてFirebase、さらには生成AIにまで入門してしまおうというチャレンジングな内容となっています。

　本書で開発するサンプルアプリは、複数の生成AIとWeb上でチャットできる生成AIチャットアプリです。

　サンプルアプリといっても、私が日々使用している自作の生成AIアプリをそのまま本書向けにサンプルアプリ化したものですので、本書を参考にアプリを作っていけば、実用的なマイ生成AIアプリが爆誕していると思います。

　本書で取り上げている生成AIはGoogleのGemini ProとOpenAIのGPTですが、AnthropicのClaude等、ほかの生成AIと連携する方法も基本的には同じです。また、LangChainを使って生成AIと連携する場合も基本的な考え方は同じですので、本書を足がかりによい生成AIライフを送っていただければ幸いです。

　なお、サンプルアプリのフレームワークとして、個人的にFirebase業界最注目のRemix SPAモードを採用しています。

　サンプルアプリを開発する中で、私自身あらためて、FirebaseとRemix SPAモードの相性のよさを実感できたので、本書を通じて読者の方にもぜひ相性のよさを実感していただきたいと考えています。

サンプルコード

　本書で作成するアプリのサンプルコードを以下のリポジトリーで公開しています。

　https://github.com/SonicGarden/ai-chat-sample

　章ごとのコードの差分をPRにしてありますので、読み進める際の参考にしていただければ幸いです。

　サンプルアプリの各ワークスペースで使用しているパッケージのバージョンは、以下の通りです。

　生成AI関連のライブラリーは非常に更新スピードが早く非互換も発生しやすいので、本書を参考にアプリを作成していく中でうまく動かないといった現象は、多々発生すると思います。

　本書執筆中にも新しいバージョンのライブラリーが公開されて、非互換で動かなくなって書き直すというつらい思いを何度も経験しました。

　アプリがうまく動かない場合は、パッケージのバージョンを合わせることで解決するかもしれませんので、参考にしていただければ幸いです。

Node.js

Node.js: 20.12.2

services/webで利用しているNPMパッケージ

"@local/shared": "workspace:^",
  "@mantine/core": "^7.8.0",
  "@mantine/form": "^7.8.0",
  "@mantine/hooks": "^7.8.0",
  "@mantine/modals": "^7.8.0",
  "@mantine/notifications": "^7.8.0",
  "@remix-run/node": "^2.8.1",
  "@remix-run/react": "^2.8.1",
  "@tabler/icons-react": "^3.2.0",
  "firebase": "^10.11.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-markdown": "^9.0.1",
  "react-use": "^17.5.0",
  "reactfire": "^4.2.3",
  "@remix-run/dev": "^2.8.1",
  "@types/react": "^18.2.20",
  "@types/react-dom": "^18.2.7",
  "@typescript-eslint/eslint-plugin": "^6.7.4",
  "@typescript-eslint/parser": "^6.7.4",
  "eslint": "^8.38.0",
  "eslint-config-prettier": "^9.1.0",
  "eslint-import-resolver-typescript": "^3.6.1",
  "eslint-plugin-import": "^2.28.1",
  "eslint-plugin-jsx-a11y": "^6.7.1",
  "eslint-plugin-react": "^7.33.2",
  "eslint-plugin-react-hooks": "^4.6.0",
  "postcss": "^8.4.38",
  "postcss-preset-mantine": "^1.14.4",
  "postcss-simple-vars": "^7.0.1",
  "prettier": "^3.2.5",
  "stylelint": "^16.3.1",
  "stylelint-config-recess-order": "^5.0.1",
  "stylelint-config-standard": "^36.0.0",
  "stylelint-order": "^6.0.4",
  "typescript": "^5.1.6",
  "vite": "^5.1.0",
  "vite-tsconfig-paths": "^4.2.1"

services/functionsで利用しているNPMパッケージ

"@google-cloud/vertexai": "^1.1.0",
  "@local/shared": "workspace:^",
  "dedent": "^1.5.3",
  "firebase-admin": "^12.1.0",
  "firebase-functions": "^4.3.1",
  "lodash-es": "^4.17.21",
  "openai": "^4.38.2",
  "@types/lodash-es": "^4.17.12",
  "@typescript-eslint/eslint-plugin": "^5.12.0",
  "@typescript-eslint/parser": "^5.12.0",
  "eslint": "^8.9.0",
  "eslint-config-google": "^0.14.0",
  "eslint-config-prettier": "^9.1.0",
  "eslint-plugin-import": "^2.25.4",
  "firebase-functions-test": "^3.1.0",
  "prettier": "^3.2.5",
  "typescript": "^4.9.0"

packages/sharedで使用しているNPMパッケージ

"@typescript-eslint/eslint-plugin": "^7.7.0",
  "@typescript-eslint/parser": "^7.7.0",
  "eslint": "^8.57.0",
  "eslint-config-prettier": "^9.1.0",
  "eslint-plugin-import": "^2.29.1",
  "firebase": "^10.11.0",
  "firebase-admin": "^12.1.0",
  "prettier": "^3.2.5",
  "typescript": "^5.4.5"