Connect Firebase Database with Claude Code

§1 Overview

概覽

這份 Playbook 將引導你使用 Claude Code 結合強大的 Firebase 資料庫，無需複雜的後端程式碼，就能輕鬆打造具備資料儲存功能的網頁應用。你將學會從 Firebase 專案的建立與 Firestore 資料庫的啟用開始，透過懶人包自動化繁瑣的環境設定。接著，我們會手動完成 Firebase CLI 的認證授權，確保 Claude Code 能安全地操作你的雲端資料。最終，你將透過自然語言指令，讓 AI 自動生成一個能與 Firebase 即時互動的網頁應用，並驗證其資料儲存與讀取功能。這不僅大幅加速你的開發流程，更讓你體驗到 AI Agent 輔助下的低程式碼開發威力。

整體架構

整體架構圍繞著 Claude Code 作為前端 AI Agent，與後端 Firebase 資料庫進行互動。使用者透過 Claude Code 的自然語言介面下達指令，AI 會根據指令生成網頁應用程式碼（HTML, CSS, JavaScript）。這些程式碼包含了與 Firebase Firestore 資料庫互動的邏輯。同時，透過 Firebase CLI 的授權，Claude Code 能夠部署和管理應用程式，並將資料即時存取於 Firebase。使用者無需直接編寫或維護複雜的後端伺服器程式，即可實現資料的持久化儲存與即時同步。

---en---

Overview

This playbook guides you through integrating Claude Code with the powerful Firebase database. You’ll learn to build web applications with data storage capabilities without complex backend coding. The process begins with setting up a Firebase project and enabling Firestore, followed by automating environment configurations using a boilerplate. Crucially, you’ll manually authenticate the Firebase CLI, ensuring Claude Code can securely interact with your cloud database. Finally, you’ll leverage natural language commands to have the AI automatically generate a web application that interacts with Firebase in real-time, verifying its data storage and retrieval functions. This significantly accelerates your development workflow and showcases the power of low-code development assisted by AI agents.

Overall Architecture

The overall architecture centers around Claude Code acting as the frontend AI Agent, interacting with the backend Firebase database. Users issue commands via Claude Code’s natural language interface. The AI then generates web application code (HTML, CSS, JavaScript), which includes logic for interacting with the Firebase Firestore database. Concurrently, through Firebase CLI authorization, Claude Code can deploy and manage the application, allowing real-time data access to and from Firebase. Users do not need to directly write or maintain complex backend server code to achieve persistent data storage and real-time synchronization.

§2 Prerequisites

• Claude Code 桌面版
• Google 帳號

§3 Step-by-step

Step 01

建立 Firebase 專案與資料庫

Do 在 Firebase 官網建立一個新專案，並啟用 Firestore 資料庫。

Why 這是我們的後端資料倉庫，所有前端網頁的資料都將儲存在這裡。

How

前往 [Firebase 官網](https://firebase.google.com/)，使用 Google 帳號登入。

點擊「建立專案」，輸入專案名稱，過程中**不啟用** Gemini in Firebase 及 Google Analytics。

進入專案後，點擊左側選單「建構」->「Firestore Database」。

點擊「建立資料庫」，選擇「以正式版模式啟動」，伺服器位置選擇離你最近的亞洲區（如 `asia-east1` (台灣)）。

Verify ✓ 你成功進入到一個顯示「新增集合」的 Firestore 資料庫主頁面。

Step 02

導入懶人包並檢查環境

Do 在 Claude Code 中導入 Firebase 連接懶人包。

Why 懶人包會自動化大部分繁瑣的環境設定與工具安裝。

How

打開 Claude Code 桌面版，建立一個新專案（例如 `firebase-project`）。

下載「Claude 串接 Firebase 懶人包」.md 檔，並拖曳到對話視窗。

AI 會開始執行，首先會進行環境檢查。

Verify ✓ AI 回報環境檢查正常或已自動安裝所需工具。

§4 Exercises

§5 Mastery

• 我已在 Firebase 官網成功建立專案與 Firestore 資料庫。
• 我已在命令提示字元中手動完成 Firebase CLI 的登錄與授權。
• 我已在安裝後徹底重啟了 Claude Code。
• 我能用自然語言指令讓 Claude Code 讀寫我的 Firebase 資料庫。

§6 FAQ

§7 Related Resources

§8 Badge unlock