靈感即程式：用 Gemini API 開啟你的 Vibe Coding 新時代

Vibe Coding 強調的是一種流暢的協作狀態，由使用者負責定義產品的靈魂與方向，AI 負責處理底層的實作細節，這篇教學將深入探索如何利用 Google 最強大的 Gemini API，將那些稍縱即逝的靈魂閃光，透過 Vibe Coding 轉化為觸手可及的應用程式。

更多參考：Vibe Coding 全方位開發導讀

快速導覽：

• 什麼是 Gemini API？它與直接使用 Gemini 有何不同？
• Gemini API 要錢嗎？免費層級 vs. 付費方案
• 建立 Google 專案
• 建立 Gemini API 金鑰
  • 從 Google Cloud 專案建立 Gemini API 金鑰
  • 從 Google AI Studio 建立 Gemini API 金鑰
• 建構 Gemini API 金鑰保護的網頁應用程式
• Vibe Coding 在網頁裡使用 Gemini API
• Gemini API 的參數結構
• Vibe Coding + Gemini API 特定參數打造 AI 皮卡丘對話機

教學影片

搭配教學影片一起閱讀，效果會更好！歡迎大家訂閱 STEAM 教育學習網的 Youtube 頻道。

前往：https://www.youtube.com/@steam.oxxostudio

什麼是 Gemini API？它與直接使用 Gemini 有何不同？

許多初學者會疑惑：「直接在網頁版 Gemini 聊天就能寫 code 了，為什麼還要用 API？」對於 Vibe Coding 而言，API 就是讓 AI 從「對話」昇華為「產品」的關鍵，而 Gemini API 是 Google 開放給開發者的後端接口，可以將 Gemini 的多模態理解能力直接整合進自己的網頁、App 或自動化腳本中。

Gemini API 具有下列特色：

• 深度控制權

  網頁版 Gemini 是「經過包裝」的產品，無法進行更細節或更個人化的控制，而 API 提供了純粹的 AI 引擎，可以微調 temperature、topP 等參數，並透過 System Instruction 徹底定義 AI 的性格與輸出規範。

• 結構化輸出

  API 支援將結果以 JSON 格式回傳，產出的內容可以直接被程式邏輯讀取、解析並驅動 UI，不需要手動複製貼上。

• 無縫整合與自動化

  API 讓 AI 成為專案的一種功能，可以讓它在使用者點擊按鈕時自動執行任務，或是批次處理成千上萬的資料。

• 超長上下文與多模態

  API 支援高達 1M 甚至 2M 的 Token 處理能力，並能直接處理圖像、影像與音訊，能將整個專案庫當作上下文丟給它，實現真正的全域開發視角。

Gemini API 要錢嗎？免費層級 vs. 付費方案

對於 Vibe Coding 的初學者來說，Google 提供了一個極為慷慨的「免費層級 ( Free Tier )」，但如果打算長期使用或部署大型專案之前，則必須了解付費版和免費版的差異，下方列出 Gemini API 費用與額度對照表 ( 實際額度可能隨 Google 政策或模型更新而調整，請以 Google AI Studio 官網為準 )

參考：Gemini Developer API 定價

建立 Google 專案

使用 Google 帳號登入 Google 雲端平台，點擊右上角「控制台」。

前往：Google 雲端平台

如果是「第一次使用」，可以點擊畫面中間的「建立專案」開始建立專案。

如果「已經有建立過專案」，可以點擊左上角專案名稱開啟專案選擇的彈出視窗，然後在彈出視窗裡點擊「新增專案」。

建立專案時只要輸入專案名稱就可以建立。

專案建立後，可以從上方看到專案的名稱，點擊後也可以切換不同的專案或新增專案。

建立 Gemini API 金鑰

專案建立之後，接下來就要建立 API 金鑰，建立的方式有兩種，分別是「從 Google Cloud 專案建立」和「從 Google AI Studio 建立」。

方法 1、從 Google Cloud 專案建立 Gemini API 金鑰

要從 Google Cloud 建立 Gemini API 的手續有點複雜 ( 原本很簡單，但可能因為濫用情形嚴重，就增加一些安全性或關聯性 )，點擊左側選單，選擇「IAM 與管理 > 服務帳戶」。

點擊「建立服務帳戶」。

輸入服務帳戶的名稱之後，點選「完成」就能建立服務帳戶。

完成後就能看到這個服務帳戶資訊，服務帳戶表示可以在 Google Cloud 上執行動作的帳戶身份。

有了服務帳戶之後，接著前往自己的 Google Cloud 專案，點擊左側「API 和服務 > 程式庫」。

Google 近期將 Gemini API 憑證與其他 API 憑證分開，無法共同使用，需要額外獨立啟用。

進入程式庫頁面後，在上方搜尋欄位輸入「gemini」，點擊下方 Gemini API。

進入 Gemini API 頁面後，點擊「啟用」 ( 如果已經啟用過就會是「管理」按鈕 )。

進入 Gemini API 詳細資料頁面後，進入「憑證」頁籤，點擊「建立憑證」，選擇「API 金鑰」。

建立 API 金鑰時，只需要輸入金鑰名稱，並選擇 Gemini API 即可。

往下拉，選擇剛剛建立的「服務帳戶」，接著就可以直接建立 API 金鑰。

過去在建立 Gemini API 金鑰時，可以限制這個金鑰只有在「特定網站」才能使用，但因為仍發生太多金鑰外流問題，所以後來就直接禁止這項功能，需要透過其他方式保護金鑰 ( 目前只能選擇「無」或「IP」 )。

金鑰建立完成後，點擊後方「顯示金鑰」就可以查看和複製金鑰。

方法 2、從 Google AI Studio 建立 Gemini API 金鑰

前往 Google AI Studio，使用和 Google 專案相同的帳號登入 Google AI Studio。

點擊左下角「Get API Key」。

進入 API Keys 畫面後，點擊右上角「Create API Key」按鈕。

在 Choose an imported project 的下拉選單裡，選擇剛剛在 Google Cloud 建立的專案，完成後按下「Create Key」按鈕建立 API Key。

完成後再 API Keys 的畫面就能查看自己建立的 API Key，點擊 API Key 就可以查看詳細資訊。

建構 Gemini API 金鑰保護的網頁應用程式

雖然設定 API 金鑰很簡單 ( 只是步驟繁瑣 )，但因為 Google 修改了 Gemini API 的保護機制，不能像其他 API 一樣透過「網址」來進行保護，所以為了保護 API 金鑰不要外流，可以透過輸入密碼的方式進行連線，當確認密碼正確，才可以透過後端串連 Gemini API，如此一來就能進行更完整的保護。

特別注意！如果直接將 API Key 暴露在公開的網頁的程式碼中，Google 會在 24 小時內傳送安全警告並封鎖該金鑰，因此如果要正式上線，必須改為透過登入後讀取的方式才能正常運作 ( 測試環境就沒關係 )。

為了實現這個功能，可以透過 Google Apps Script 打造一個輕便的網頁應用程式，透過網頁應用程式判斷密碼是否正確，首先前往自己的 Google 雲端硬碟，建立 Google Apps Script。

接著回到自己的 AI 工具使用下方提示詞，產生 Apps Script 的程式碼，複製程式碼，回到 Apps Script 的編輯區貼上。

幫我寫一個 apps script 網頁應用程式，會根據使用者傳送的 json 格式資料，回傳對應的內容。
- 使用者傳送「1」和「密碼」，會確認密碼是否正確，回傳「ok」。
- 使用者傳送「2」和「密碼」和「對話 prompt」，會確認密碼是否正確，如果正確就會呼叫免費版的 gemini api  ( 模型名稱 gemini-3.5-flash )，並把 AI 回傳的結果回傳給使用者。 

完成後將 Apps Script 部署為網頁應用程式 ( 右上角「部署 > 新增部署作業」，部署時如果遇到驚嘆號提示框就點擊「Advanced」，詳細參考「正式部署 GAS，讓全世界的人都看到自己的網頁！」)。

部署成功之後，就可以得到網頁應用程式的網址，待會就會使用這個網址和 Gemini API 進行互動。

Vibe Coding 在網頁裡使用 Gemini API

再來就可以透過 Vibe Coding 的方式，讓自己的網頁也可以擁有 API 的功能！使用下方的提示詞，就可以讓 AI 產生一個可以透過 Gemini API 和 AI 互動的基本網頁 ( 會先要求輸入密碼，密碼正確才可以傳送訊息 )。

請幫我產生一個網頁，網頁中會呼叫 Apps Script 進行聊天。
- 開啟網頁後，先開啟輸入密碼畫面，要求使用者需要先輸入一段密碼，接著會傳送 1 和密碼，確認無誤 ( 收到 ok ) 之後才會進入聊天畫面，並記住密碼。
- 進入聊天畫面後，每次聊天時都要傳送 2 和剛剛輸入的密碼和對話。
- 對話送出後，當接收 Apps Script 應用程式回傳的訊息之後，才可以進行下一筆對話。
注意：在程式碼中使用「假的 GAS 應用程式網址」，我會自行在程式碼中更換，下方提供 Apps Script 的程式碼給你參考：
< 貼上剛剛 Apps Script 的程式碼 >

產生網頁後，複製網頁程式碼，參考「下載 Vibe Coding 網頁程式碼」的做法把程式碼貼到自己的網頁編輯器中，貼上程式碼之後，記得修改 Apps Script 的網址。

如果要在本機環境測試需要開啟本機伺服器，或者參考「使用 GitHub 部署你的網頁作品」教學，把網頁部署到 Github 上，完成後開啟網頁，輸入內容，如果 AI 會回應，表示已經正常串接 Gemini API。

因為是免費版 API，三不五時就會出現「This model is currently experiencing high demand. Spikes in demand are usually temporary. Please try again later.」的訊息，需要等待幾分鐘之後才可以正常對話。

由於 Gemini API 有「每日使用配額」，如果要查看使用狀況，可以前往 Google Cloud 專案的「API 和服務 > 已啟用的 API 和服務」查看，以下圖為例，免費版的額度已經使用了 10%。

Gemini API 的參數結構

如果想要更深入了解 Gemini API 的用法，可以從 Gemini API 的「參數」開始認識，透過調校模型的「參數」，可以精確地控制輸出的穩定性與創意邊界，Gemini API 使用 JSON 格式將參數進行結構化，以下是關鍵參數：

• 核心結構 ( 指令與內容 )

  參數 ( key 名稱 )	說明	資料格式
  system_instruction	【模型的人格】定義它是誰、該怎麼說話。	String
  contents	【對話的生命週期】存放所有過去的對話記錄。	Array of Objects

• 生成品質設定

  透過參數 ( key 名稱 ) generationConfig 存放 AI 所有的微調設定。

  參數 ( Key 名稱 )	數值範圍	預設值	說明
  temperature	0.0~2.0	1.0	【隨機性】高：充滿創意與廢話；低：精準且嚴肅。
  maxOutputTokens	1~上限	最大	【長度限制】防止模型回覆過長導致讀取緩慢。
  topP	0.0~1.0	0.95	【詞彙多樣性】數值越低，選詞越傾向保險用語。
  topK	1~40	40	【候選範圍】從機率最高的前 K 個字中選取。
  responseMimeType	text、json	text	【格式開關】設為 application/json 開啟結構化輸出。
  stopSequences	Array	無	【強制停止】遇到特定文字陣列時立即截斷。

• 安全與擴充功能

  參數 ( key 名稱 )	數值	說明
  safetySettings	BLOCK_NONE BLOCK_ONLY_HIGH BLOCK_MEDIUM_AND_ABOVE BLOCK_LOW_AND_ABOVE ( 預設 )	【安全性】控制對有害內容的敏感度。
  tools	Google Search ( 聯網搜尋 ) function_calling ( 呼叫自訂程式 )	串接其他工具服務。

Vibe Coding + Gemini API 特定參數打造 AI 皮卡丘對話機

大致了解一些 Gemini API 參數可以使用之後，接著也可以透過 Vibe Coding 讓自己串接的服務更有特色，下方提示詞會沿用剛剛的範例，只修改 Gemini API 的參數，就讓 AI 變成了 AI 皮卡丘。

幫我透過 Gemini API 的參數，設定這個 AI 的個性，讓這個 AI 是一個「皮卡丘」，只會用「皮卡丘」這三個字組合來回應，或搭配一些 emoji 表情回應，例如「皮卡！皮卡皮卡！」「皮卡！皮卡丘！」

產生網頁後，重複剛剛修改 API Key 和上線的動作，開啟網頁就可以看 AI 皮卡丘互動了。

小結

在 Vibe Coding 的新時代，技術門檻正以前所未有的速度降低。現在強大的 Gemini API 已準備就緒，API 金鑰也已經握在手中。別再猶豫，放開那些教條式的語法束縛，聽從直覺，開始編寫自己的「Vibe」吧！

延伸閱讀

Vibe Coding 的重點都不在於「寫程式」，而是為了配合程式的各種「準備工作」，下方列出 Vibe Coding 相關的教學，透過一系列的教學，就更能掌握正確且順暢的開發流程:

• 認識 Vibe Coding：程式不再是拼邏輯，而是拼「感覺」
• Vibe Coding 新手入門：從藍圖規劃到 AI 開發的思維轉型
• Vibe Coding 重要的準備工作：架構流程圖
• Vibe Coding 網頁必備知識：開發者的「溝通工具箱」
• Vibe Coding Python 必備知識：AI 與 Colab 開啟程式直覺
• Vibe Coding 固定網頁樣式：解決樣式不一致的惱人問題
• Vibe Coding 圖片處理心法：從雲端空間到 Base64 的完美配置
• Vibe Coding 玩家必備的 SVG 進階操作指南
• Vibe Coding 字體指南：用文字風格定義網頁靈魂
• 下載 Vibe Coding 網頁程式碼，掌握程式碼的主導權
• Vibe Coding 實戰：利用 Google Apps Script 打造免費網頁部署基地
• Vibe Coding 實戰：使用 GitHub 部署你的網頁作品
• AI 時代的輕量級後端：當 Vibe Coding 遇上 Google Sheets
• 從靈感到即時同步：Vibe Coding 遇上 Firebase Realtime Database
• 數位靈魂的存放處：Vibe Coding 串接 Firebase Firestore
• 拒絕資料裸奔！Vibe Coding 必備 Firebase App Check 安全防護指南
• Vibe Coding + Firebase Authentication 打造順暢的註冊登入體驗
• Vibe Coding 將 Google Drive 變身最強檔案後端
• 靈感即程式：用 Gemini API 開啟你的 Vibe Coding 新時代
• Vibe Coding 極速打造 LINE Bot 智慧機器人
• Vibe Coding 實戰：免寫程式！把 Google 試算表變成超精美點餐系統
• Vibe Coding 實戰：用 Google Drive 輕鬆打造「檔案＆作業上傳系統」
• Vibe Coding 實戰：用 Google 試算表輕鬆搞定「線上點名系統」
• Vibe Coding 實戰：打造自己的英文單字卡！

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～