Claude基本功EP09:免費Supabase串起你的資料庫_用自然語言操控資料庫，完全免費的開發新邏輯

你會學到

• 運用 Claude Code 的自然語言能力，免費且高效地將任何網頁與 Supabase 資料庫串接，實現 AI 操控資料的新開發邏輯。
• Supabase 因內建官方 MCP（機器人控制協議），能直接透過自然語言指令操作，成為 Claude Code 整合資料庫的優選。
• 透過 Claude Code 設定排程任務，避免免費 Supabase 專案因閒置過久而被暫停服務。
• 在 AI 處理資料庫內容時，務必對敏感資料進行去識別化，確保隱私安全。
• Claude Code 能自動完成網頁與資料庫的串接、資料表建立及網頁生成，大幅簡化開發流程。

教學金句

「你的資料AI時代就應該要這樣，從現在開始你做的任何網頁，都可以串接到你的資料庫免費的喔。」 「為什麼選 Supabase 而不是選 Firebase 呢？是因為在 claude Code 裡面，有官方的 MCP，代表我們使用自然語言就可以去操控了。」 「所以大家盡量避免隱私的資料輸進來，所以當你要在學校使用的話，必須要去識別化，盡量只保留學生的座號就好，不要姓名以及其他隱私的資料。」 「所有的網頁跟資料庫他會自動幫你串好，你只要用自然語言就可以完整的去操控資料庫，這個就是我們使用claude Code的目的。」 「他會自動幫我建立資料表，然後建立網頁，網頁已建立在右邊可以預覽，他自己會去測試，自己會去跑，完成了。」

適用情境

這部影片適合放在 AI 應用開發或進階網頁開發課程中，作為展示如何利用 AI 工具快速整合後端資料庫的實作環節。目標學員為具備基礎程式觀念、熟悉 Claude Code 或類似 AI 輔助開發工具操作的中階學習者。前置知識包括基本的網頁（HTML/CSS/JS）概念與對 AI 提示詞工程的理解。

跟著做

1. 下載 Supabase 懶人包： 進入影片下方提供的 GitHub 連結，下載連接 Supabase 資料庫的 MD 檔案。
2. 導入 Claude Code： 在 Claude Code 中建立新資料夾（例如：2026 Database），將下載的 MD 檔拖曳至其中。
3. 安裝 Supabase 並註冊： 提交 MD 檔給 Claude Code 進行安裝；若未註冊過 Supabase，依照指示使用 GitHub 帳號註冊。
4. 設定 Supabase 專案： 登入 Supabase 後，建立新專案，設定名稱、資料庫密碼，並選擇亞洲伺服器及啟用 Data API。
5. 生成並配置 Personal Access Token： 在 Supabase 後台生成一個永不過期的 Token，命名為「claude code MCP」，複製後貼回 Claude Code 並提交。
6. 重啟 Claude Code 並驗證： 手動關閉 Claude Code（透過工作管理員），重新開啟後，開啟新對話，輸入「請列出我的 Supabase 專案」以驗證連接。
7. 創建 AI 驅動的互動網頁： 透過自然語言指令描述需求（例如：建立文字雲網頁並串接資料庫），讓 Claude Code 自動規劃、生成網頁與資料庫結構。
8. 設定排程防止閒置暫停： 在 Claude Code 的「Scheduled」選單中，設定一個每週查詢 Supabase 專案的任務，確保免費專案不會因七天閒置而暫停。

延伸主題

• 進階 Supabase 功能應用：包含使用者認證、即時資料訂閱、儲存功能等。
• AI 倫理與資料隱私：探討 AI 處理個人資料時的法律與道德規範，以及更完善的去識別化技術。
• 其他 AI 開發平台與資料庫的整合實戰：如 Google Vertex AI 與 Firebase、Azure AI 與 Cosmos DB 等。
• 從原型到部署：如何將 Claude Code 生成的專案進一步優化、測試並部署到線上環境。
• 自然語言資料庫查詢的進階技巧與Prompt設計。

---en---

What You’ll Learn

• Utilize Claude Code’s natural language capabilities to freely and efficiently connect any webpage with a Supabase database, realizing a new AI-driven data manipulation logic.
• Supabase is preferred for Claude Code integration due to its built-in official MCP (Machine Control Protocol), allowing direct control via natural language commands.
• Set up scheduled tasks in Claude Code to prevent free Supabase projects from being suspended due to prolonged inactivity.
• When AI processes database content, it’s crucial to de-identify sensitive data to ensure privacy and security.
• Claude Code can automatically handle webpage-database integration, table creation, and webpage generation, significantly simplifying the development process.

Teaching Quote

“In the AI era, your data should be handled this way. From now on, any webpage you create can be connected to your database for free.” “Why choose Supabase over Firebase? Because Claude Code has an official MCP, meaning we can control it directly using natural language.” “Therefore, everyone should try to avoid entering private data. If you’re using it in school, you must de-identify it, trying to keep only student seat numbers and no personal or other private data.” “All webpages and databases will be automatically connected. You can fully control the database using natural language. This is the purpose of using Claude Code.” “It automatically creates tables for me and generates webpages. The webpage is already created and can be previewed on the right. It tests and runs itself, and it’s done.”

When to Use

This video is suitable for AI application development or advanced web development courses, serving as a practical session to demonstrate how AI tools can quickly integrate backend databases. The target audience includes intermediate learners with basic programming concepts, familiar with Claude Code or similar AI-assisted development tools. Prior knowledge includes basic web (HTML/CSS/JS) concepts and an understanding of AI prompt engineering.

How to Follow Along

1. Download Supabase Lazy Pack: Access the GitHub link provided below the video to download the MD file for connecting to the Supabase database.
2. Import to Claude Code: Create a new folder in Claude Code (e.g., 2026 Database) and drag the downloaded MD file into it.
3. Install and Register Supabase: Submit the MD file to Claude Code for installation; if you haven’t registered for Supabase, follow the instructions to register using your GitHub account.
4. Set up Supabase Project: After logging into Supabase, create a new project, set the name, database password, select an Asian server, and enable Data API.
5. Generate and Configure Personal Access Token: Generate a permanent token in the Supabase backend, name it “claude code MCP,” copy it, and paste it back into Claude Code for submission.
6. Restart Claude Code and Verify: Manually close Claude Code (via Task Manager), reopen it, start a new conversation, and enter “Please list my Supabase projects” to verify the connection.
7. Create AI-Driven Interactive Webpage: Describe your requirements using natural language commands (e.g., create a word cloud webpage and connect to the database), allowing Claude Code to automatically plan and generate the webpage and database structure.
8. Set Schedule to Prevent Idling Suspension: In Claude Code’s “Scheduled” menu, set up a task to query the Supabase project weekly, ensuring that the free project is not suspended due to seven days of inactivity.

Related Topics

• Advanced Supabase feature application: including user authentication, real-time data subscription, storage functions, etc.
• AI ethics and data privacy: exploring legal and ethical regulations for AI processing personal data, and more robust de-identification technologies.
• Integration practices with other AI development platforms and databases: such as Google Vertex AI with Firebase, Azure AI with Cosmos DB, etc.
• From prototype to deployment: how to further optimize, test, and deploy projects generated by Claude Code to online environments.
• Advanced techniques and prompt design for natural language database querying.