Vibe Coding 串接 Gemini API

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 实战：打造自己的英文单字卡！

意见反馈