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

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

快速導覽：

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

什麼是 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 2.0 Flash 的費用與額度對照表 ( 實際額度可能隨 Google 政策更新，請以 Google AI Studio 官網為準 )

參考：Gemini Developer API 定價

建立 Google 專案

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

前往：Google 雲端平台

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

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

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

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

從 Google AI Studio 建立 Gemini API 金鑰

專案建立之後，接下來要前往 Google AI Studio，在 Google AI Studio 裡建立對應的 API 金鑰 ( Secret Token ) ，使用和 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 金鑰安全性

憑證建立完成之後，接著要設定「金鑰的安全性」，為什麼要設定安全性呢？因為如果要在「前端網頁」操作 Gemini API，金鑰會完全暴露在原始碼中，因此必須要透過一些保護措施，限制 API 的使用範圍，如果要設定安全性，必須要「回到 Google Cloud」，從左側點擊「API 和服務 > 憑證」開啟憑證管理頁面。

從憑證管理畫面中，可以看見剛剛在 Google AI Studio 裡建立的金鑰，點擊金鑰名稱進入設定畫面。

在「金鑰限制」的區域勾選「網站」，輸入自己網站的「網址」，就能限制這組金鑰只能在自己的網站裡使用 ( 如果要在本機環境測試，也可以輸入「localhost」，但正式上線就必須移除 ) 。

Vibe Coding 在網頁裡使用 Gemini API

如果已經設定好了 API Key 和相關的安全性保護，下一步就可以透過 Vibe Coding 的方式，在網頁裡面使用這個 API Key，讓自己的網頁也可以擁有 API 的功能！使用下方的提示詞，就可以讓 AI 產生一個可以透過 Gemini API 和 AI 互動的基本網頁。

提示詞中強調「免費版」以及「不要傳送對話紀錄」，目的在於節省傳送的 Token 數量，但為了提高使用者體驗，使用瀏覽器本身的暫存機制顯示對話紀錄。

我已經有一組免費版的 Gemini API Key，請根據下列提示詞幫我產生一個基本的網頁：
- 網頁只使用基本的 HTML 和 JS，不要使用任何框架
- 畫面左方有一個輸入文字欄位和送出按鈕，右邊是 AI 回應區域
- 按下送出按鈕後，會把輸入文字透過 Gemini API 傳送給 AI
-  AI 的回應和對話紀錄顯示在右邊
- 透過暫存的方式顯示對話紀錄，不要傳送對話紀錄給 AI

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

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

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 ( 呼叫自訂程式 )	串接其他工具服務。

了解 Gemini API 的關鍵參數之後，就可以透過這些參數，就能精準掌控 AI 輸出的各種表現，例如要表現得像一個嚴謹的數學家，還是一個放浪不羈的藝術家，下方列出一些常見的寫法：

• 街頭風格翻譯器：透過 systemInstruction 和 temperature 參數，讓回應更有創意。

  const streetVibeConfig = {
    systemInstruction: "你是一個住在紐約布魯克林的饒舌歌手。請將輸入句子翻譯成帶有街頭感的英文，多用俚語。",
    generationConfig: {
      temperature: 1.4, // 高創意度，隨性噴發
      topP: 0.95
    }
  };
  

• 食譜產生器：運用 systemInstruction 搭配 responseMimeType，產生準確性與可解析性的資料。

  const chefVibeConfig = {
    systemInstruction: "你是一位米其林三星主廚。請根據食材生成 JSON 食譜，包含 name, steps 陣列。只回傳 JSON。",
    generationConfig: {
      responseMimeType: "application/json"
    }
  };
  

• 即時 UI 調色師：直接回傳開發中可用的 CSS 類別。

  const designerVibeConfig = {
    systemInstruction: "你是一個 Tailwind CSS 專家。根據使用者描述的情境，回傳一組顏色物件：{ \"primary\": \"...\", \"accent\": \"...\" }。",
    generationConfig: {
      temperature: 0.7 // 中等穩定度
    }
  };
  

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」吧！

意見回饋

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