如何從零打造 LINE AI 客服？用 Claude Code 搭配 Netlify 與 Supabase 實戰教學

這篇文章會帶你實際動手做一個 LINE AI 客服系統。我們會用 Claude Code 下指令讓 AI 幫忙寫程式並自動部署到 Netlify 和 Supabase 上，接著到 LINE Developers 取得金鑰，最後串接 Google 的免費 AI 模型。只要跟著步驟，就能完成具備後台管理與 RAG 知識庫功能的基本 AI 客服。

重點摘要

• 使用 Claude Code CLI 下指令，讓 AI 自動生成程式碼並完成部署。
• 搭配 Netlify 取得 Webhook 網址，並用 Supabase 建立免費資料庫。
• 串接 LINE Messaging API，取得 Channel Access Token 與 Secret。
• 後台支援上傳 PDF 或輸入文字作為 RAG 參考資料，打造專屬知識庫。
• 實作採用 Google AI Studio 提供的免費 Gemma 4 31B 模型進行回覆。

影片章節

1. 00:00 前言與系統架構
2. 01:44 四個層級運作原理
3. 03:47 準備 Netlify 與 Supabase
4. 04:06 安裝 Claude Code CLI
5. 08:40 取得 Supabase 專案金鑰
6. 10:41 用 AI 生成與部署程式

打造 LINE AI 客服的系統架構與原理

繼上個禮拜跟大家介紹完基礎的設計原則後，這禮拜我們要來實際動手打造 LINE AI 客服系統。雖然說是系統，但目前教的算是基礎中的基礎，主要是先做出一個「可以根據資料回覆」的 LINE AI 客服，後續如果有需要真人介入、營業時間設定等進階功能，大家可以再自己加強。

整個系統運作包含四個層級：

1. 使用者：傳送訊息到我們的 LINE 官方帳號。
2. 伺服器：透過 Webhook 連結取得使用者的訊息。
3. AI 模型：伺服器將訊息丟給 AI 模型處理並得到回覆。
4. Messaging API：伺服器再透過 API 將回覆推播給使用者。

其中最重要的一環就是「Webhook 連結」。因為 LINE 需要一個有實際網址的伺服器來接收訊息，為了省錢與方便，我們今天會教大家利用 Netlify 加上 Supabase 這兩個免費服務來達成。Netlify 本身會附帶網域供我們使用，而 Supabase 則作為資料庫。當然，如果未來你要做商業使用，建議還是改用付費服務會比較穩定。

步驟一：準備開發環境與安裝 Claude Code

這次我們會請 AI 直接幫我們寫程式並部署，使用的工具是 Claude Code 的終端機版本（CLI）。

1. 先去註冊並登入 Netlify 與 Supabase 帳號。
2. 在電腦上建立一個新資料夾，並在該資料夾開啟終端機（Terminal）。
3. 如果你還沒安裝過 Claude Code CLI，可以到它的官網複製安裝指令（例如 Mac OS 使用 npm install -g @anthropic-ai/claude-code），貼到終端機執行，它會自動幫你安裝所需套件。
4. 安裝完成後，輸入 claude 進入互動介面，並依照提示登入你的 Claude 帳號。

為了讓 Claude 能直接幫我們把程式上傳部署，我們還需要在終端機安裝 Netlify CLI 與 Supabase CLI（或是直接給 AI 相關金鑰）。

1. 在終端機輸入指令安裝 Netlify CLI。
2. 輸入 netlify login，系統會開啟瀏覽器詢問是否允許連線，點擊允許即可完成登入。

步驟二：取得 Supabase 專案金鑰

為了簡化流程，我們不強制大家安裝 Supabase CLI，而是直接把 Supabase 的專案資訊丟給 Claude，讓 AI 幫我們處理。

1. 登入 Supabase，點擊「New Project」建立新專案。
2. 專案名稱自訂（例如：AI customer service），Database password 可以隨便產生一組（基本上用不到），地區等設定保持預設，點擊建立。
3. 專案建立完成後，點擊左側選單進入「Project Settings」。
4. 切換到「API Keys」頁籤，將 anon public key 與 service_role secret 這兩組金鑰複製下來先貼在記事本。
5. 接著點擊左側的「Data API」，將 API URL 複製下來。這樣 Supabase 方面的準備就完成了。

步驟三：對 Claude 下指令生成與部署系統

現在我們要用白話文告訴 Claude Code 我們想做什麼。請在終端機的 Claude 介面中，輸入以下指令與剛剛取得的資訊：

我已經安裝了 Netlify CLI 並完成登入。請幫我記下以下 Supabase 的資訊，稍後部署會用到：
- anon public key: [貼上你的金鑰]
- service_role secret: [貼上你的金鑰]
- API URL: [貼上你的 URL]

接著，我們要告訴 Claude 系統的具體需求，請輸入以下提示詞：

請幫我製作一個 LINE 的 AI 客服系統，使用 Netlify + Supabase 來製作。
1. 給我一組預設的管理後台登入帳密（例如 admin/admin），首次登入需強制修改密碼。
2. 後台需要有以下功能：
- 生成 Webhook 連結，讓我能貼到 LINE 官方帳號。
- 提供填寫 Channel Access Token 與 Channel Secret 的欄位。
- AI 模型設定：提供填寫 API Key 的欄位（預設使用 Google Gemma 4 31B IT 模型）。
- System Prompt 欄位：用來設定客服的風格與規則。
- 客服參考資料（RAG）欄位：支援上傳 PDF、文字檔或直接填寫文字作為知識庫。

送出後，Claude 會開始規劃。它可能會跟你確認幾個問題，例如模型名稱是否正確、資料量大是否確定要用 RAG 架構等。只要回覆確認（例如：「模型名稱改為 Gemma 4 31B IT」、「確定使用 RAG」、「確定首次登入強制改密碼」），Claude 就會開始自動寫程式並幫你部署到 Netlify 與 Supabase 上。

步驟四：設定 LINE Developers 開發者後台

當 Claude 告訴你部署完成後，它會提供一個 Netlify 的網址。點進去用 admin/admin 登入並修改密碼，你會看到我們專屬的 AI 客服後台已經架設好了！接下來要去 LINE 取得串接金鑰。

1. 進入 LINE Developers Console，選擇或建立一個 Provider。
2. 點擊「Create a new channel」，選擇「Messaging API」。
3. 建立一個新的 LINE 官方帳號，填寫名稱、Email 等基本資訊。
4. 建立完成後，進入該 Channel 的設定頁面，切換到「Messaging API」頁籤。
5. 將剛剛在自建後台看到的 Webhook URL 複製起來，貼到 LINE 後台的 Webhook URL 欄位，並將下方的「Use webhook」打開。
6. 在同一個頁面往下拉，找到 Channel access token (long-lived)，點擊 Issue 產生金鑰並複製。
7. 切換回「Basic settings」頁籤，往下拉找到 Channel secret 並複製。

步驟五：取得 Google API Key 並完成後台設定

教學中我們選用免費的 Google Gemma 模型來測試。

1. 前往 Google AI Studio，點擊左下角的「Get API key」。
2. 建立一把新的 API Key 並複製。
3. 回到我們自己部署的 AI 客服後台，將剛剛取得的 Channel Access Token、Channel Secret 以及 Google API Key 依序填入對應欄位。
4. 在 System Prompt 欄位輸入客服的規則（例如：你是一位專業客服，請根據參考資料回答問題）。
5. 在參考資料區塊，隨便貼上一段測試用的文字（例如公司的退換貨規則），然後點擊「儲存設定」。

遇到錯誤怎麼辦？

實測時，我發現在儲存參考資料時畫面跳出「儲存失敗」。這時候不用慌，這就是用 AI 寫程式的日常。你只要回到終端機，直接告訴 Claude：「客服資料貼文字儲存時，顯示儲存失敗。」Claude 就會自動去檢查錯誤、修改程式碼並重新部署。修正完畢後，再次點擊儲存就會成功了。

實測結果與後續進階建議

設定全部完成後，打開你的 LINE，加入剛剛建立的官方帳號，隨便傳一句「你好」或是詢問剛剛貼在參考資料裡的問題。如果 AI 能夠正確回覆你，恭喜你，你的 LINE AI 客服系統已經成功運作了！

注意事項與限制：
今天教大家使用的是免費的 Gemma 4 31B 模型，雖然可以免費測試，但回覆速度可能會比較慢，且精準度與品質有時會有落差。如果你未來想要正式上線，強烈建議更換為付費的 OpenAI ChatGPT 或 Anthropic Claude 模型，只要在後台更換 API Key 與模型名稱即可。

這篇文章帶大家從最基礎的功能開始打造，後續你想要加上營業時間判斷、真人客服介入、或是黑名單功能，只要回到終端機繼續跟 Claude 溝通，請它幫你把新功能加上去並重新部署就可以了。趕快動手試試看吧！

本文整理自阿湯的 YouTube 影片〈LINE AI 客服建置實戰教學 PART II！實戰製作篇〉，實際操作畫面請看影片；更多 AI 實用教學，歡迎訂閱 I'm 阿湯 YouTube 頻道。

常見問題