Gemini Pro API 接入指南：手把手教你从前端调用

最近谷歌的 Gemini Pro 可是风口上的模型，不少朋友都想把它接入到自己的项目里。看到有人在问怎么在前端调用这个 API 来开发 Agent 功能，今天就手把手教大家如何搞定这件事，顺带分享一些实用经验。

登录 Google AI Studio 并获取 API Key。

准备工作：获取 API Key

不管你是做前端还是后端，第一步都得先拿到“通行证”。

1. 登录 Google AI Studio。
2. 左侧菜单找到 “Get API Key”，如果没有项目的话，跟着指引创建一个即可。
3. 生成 API Key 后，记得保存好，这东西就像你的密码一样，别泄露给不该看的人。

前端直接调用：最快速的上手方式

使用官方库在前端初始化并调用 Gemini Pro 的核心代码示例。

如果在简单的原型项目里想快速跑通逻辑，直接在前端调用是最爽的，不用搭服务器。JavaScript 现在这生态也很完善，直接用官方库就成。

安装依赖：

npm install @google/generative-ai

核心代码实现：

import { GoogleGenerativeAI } from "@google/generative-ai";

// 初始化，把你的 Key 填进去
const genAI = new GoogleGenerativeAI("YOUR_API_KEY");

async function run() {
  // 指定模型，这里用的是 gemini-pro
  const model = genAI.getGenerativeModel({ model: "gemini-pro" });

const prompt = "你好，请帮我写一段 React 组件的代码。";

const result = await model.generateContent(prompt);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

这样写是不是很简单？几行代码就能让模型给你吐内容了。

⚠️ 必须注意的安全风险

虽然前端直接调用的代码很清爽，但这里有个巨大的坑：API Key 会暴露在浏览器里！只要用户按个 F12 打开开发者工具，你的 Key 就裸奔了。哪怕你用 .env 文件，在前端代码打包后，这些变量依然会被注入到浏览器中。

如果你只是本地测试或者做完全私有的小工具，那问题不大。但如果是要公开发布的 Web 应用，强烈建议不要在前端直接放 Key。

进阶方案：搭建中转服务

为了保护 Key 不被盗刷导致账户欠费，标准的做法是自己搭一个简单的后端服务作为中转。

1. 前端： 发送请求给你自己的后端服务器，不直接接触 Google。
2. 后端（Node.js/Python/Go等）： 收到请求后，加上 Key 去请求 Google API，拿到结果再返给前端。

这样即使流量很大或者有人恶意刷接口，你也能在自己的后端层做频率限制和鉴权，Key 安全得很。

给开发者的几点建议

• 模型选择： 目前 gemini-pro 是文本模型，如果你需要处理图片，得换成 gemini-pro-vision，代码参数会有区别，看文档别搞混了。
• 流式输出： 对于聊天场景，建议开启流式传输 (stream: true)，这样用户体验会像 ChatGPT 那样逐字显现，而不是干等半天突然弹出一大段文字。官方库也支持流式写法，不难看懂。
• Context 管理： 做 Agent 的时候记得处理好上下文，因为 API 是无状态的，你需要自己把历史对话记录存下来，每次请求一并发送给模型，它才记得刚才聊了啥。

总的来说，用 Gemini Pro 写个智能 Agent 前端并不难，难的是工程架构上的安全性考虑。先把 Demo 跑起来，再根据业务场景决定是直连还是走中转，这才是正解。