如何使用Gemini和Vercel Serverless Functions构建AI聊天机器人 🚀
内容提要
本教程介绍如何用React、Node.js和Vercel Serverless Functions构建流式AI聊天机器人。后端通过Vercel函数调用Gemini API，使用generateContentStream将响应分块流式返回；前端用fetch读取流并实时更新聊天窗口，实现打字机效果。文章涵盖架构、API契约、CORS处理、curl测试及部署步骤，强调分块流式传输提升响应速度。
延伸解读
流式响应的核心价值
文章强调，通过generateContentStream将AI回复分块传输，用户无需等待完整响应即可看到文字逐字出现，这种“打字机”效果显著提升了交互体验。相比传统的一次性返回，流式传输减少了感知延迟，尤其适用于长回复场景。开发者应理解这一机制，以优化聊天机器人的响应速度。
CORS与安全注意事项
若聊天组件嵌入不同域名，需在服务端配置CORS，处理OPTIONS预检请求并设置正确的Access-Control-Allow-Origin。同时，文章建议对用户输入进行消毒（sanitize），避免将未经验证的数据直接传给AI。部署时务必更新CORS来源和API URL，确保生产环境正常。
前端流式读取的实现要点
前端使用fetch的response.body.getReader()读取流，配合TextDecoder解码，并在每次读取后更新消息状态，实现实时显示。这与常规的res.json()不同，需注意处理流结束和错误情况。开发者可参考此模式，但需根据自身UI设计调整消息列表更新逻辑。
部署与后续优化建议
部署时需在Vercel设置环境变量GOOGLE_API_KEY，并选择CLI或GitHub集成方式。文章建议后续可添加速率限制、会话持久化（如KV、Redis）及停止生成按钮，以增强功能。这些建议基于实际应用场景，开发者可根据需求逐步完善。
Q&A
如何使用Vercel Serverless Functions和Gemini API构建一个流式AI聊天机器人？
构建一个流式AI聊天机器人需要两个主要部分：前端是一个React聊天组件，后端是一个Vercel Serverless函数（如api/chat）。后端函数接收用户消息和简历数据，调用Gemini的generateContentStream方法，该方法返回一个异步可迭代对象，通过for await...of循环将文本块实时写入响应。前端使用fetch发送POST请求，并通过res.body.getReader()读取流，用TextDecoder解码，逐步更新聊天窗口，实现打字机效果。
为什么使用流式传输而不是等待完整响应？
流式传输（分块传输）可以让用户看到响应逐渐生成，而不是等待整个响应完成后一次性显示。这大大提升了用户体验，使聊天机器人感觉更快速、更响应，避免了长时间的等待。
在Vercel Serverless Function中如何调用Gemini API并实现流式响应？
在Vercel Serverless Function中，首先使用GoogleGenAI客户端和API密钥初始化。然后，在请求处理函数中，调用ai.models.generateContentStream方法，传入模型和包含用户消息及简历数据的提示。该方法返回一个异步可迭代对象，通过for await...of循环遍历每个块，并使用res.write(text)将文本块写入响应。最后，设置响应头为text/plain并结束响应。
前端React组件如何读取流式响应并实时更新聊天窗口？
前端React组件在sendMessage函数中，使用fetch发送POST请求到后端API。获取响应后，通过res.body.getReader()获取读取器，并使用TextDecoder解码每个数据块。在循环中，每次读取一个块，将其追加到fullText字符串，并更新聊天窗口中的最后一条消息（assistant消息）的文本，从而实现实时更新和打字机效果。
如何测试Vercel Serverless Function的流式响应？
可以使用curl命令测试，添加-N参数禁用缓冲，以便看到文本增量输出。例如：curl -N -X POST "https://YOUR_APP.vercel.app/api/chat?type=chat" -H "Content-Type: application/json" -d '{"message":"Give me 3 resume summary tips","resume":{"name":"Test"}}'。如果看到文本逐步出现，说明流式工作正常。
部署到Vercel时需要哪些步骤？
部署步骤包括：1. 在Vercel项目设置中添加环境变量GOOGLE_API_KEY。2. 更新后端CORS允许的域名和前端fetch的URL为实际部署域名。3. 选择部署方式：通过CLI运行vercel --prod，或通过GitHub集成自动部署。部署完成后，使用curl测试生产环境是否正常。
如何处理CORS问题，特别是当聊天组件嵌入到不同域名时？
当聊天组件嵌入到不同域名时，浏览器会发送预检请求（OPTIONS）。后端需要设置Access-Control-Allow-Origin为实际嵌入的域名，并处理OPTIONS请求。在代码中，使用allowCors包装函数，设置响应头并处理OPTIONS请求，返回200状态。
构建聊天机器人需要哪些前提条件？
需要Node.js 18或更高版本、Gemini API密钥（从Google AI Studio获取）、Vercel账户和CLI，以及安装@google/genai包。API密钥应存储在环境变量GOOGLE_API_KEY中，并在本地和Vercel项目中配置。
