gemini-ai：基于 Cloudflare Workers 的 Gemini AI 聊天应用

本文介绍 gemini-ai，一个基于 Cloudflare Workers 和 Hono 框架构建的 Gemini AI 聊天应用。该项目提供了一个简洁的 Web 界面，让用户可以直接与 Google Gemini Pro 模型进行对话，支持流式响应输出。

项目简介

gemini-ai 是 cofo-workers monorepo 中的一个子项目，由 zouhangwithsweet 开发。该项目基于 Cloudflare Workers 边缘计算平台构建，利用 Google Generative AI SDK 对接 Gemini Pro 模型，提供了一个轻量级的 AI 聊天界面。

项目特点：

• 部署在 Cloudflare Workers 边缘节点，响应速度快
• 基于 Hono 框架，代码简洁高效
• 支持 Server-Sent Events (SSE) 流式输出
• 内置美观的深色主题聊天界面
• 支持对话历史记录

核心特性

• 流式响应：使用 SSE 技术实现打字机效果的流式输出
• 边缘部署：基于 Cloudflare Workers，全球边缘节点低延迟访问
• 简洁界面：采用深色主题设计，支持 Markdown 渲染
• 历史记录：支持多轮对话，保留聊天上下文
• TypeScript：全类型支持，开发体验良好

技术栈

• Hono - 轻量级 Web 框架，支持 JSX
• Google Generative AI - Google Gemini Pro API SDK
• Cloudflare Workers - 边缘计算平台
• TypeScript - 类型安全的 JavaScript 超集
• UnoCSS - 原子化 CSS 引擎

安装指南

前置要求

• Node.js >= 18
• pnpm >= 8（推荐）
• Cloudflare 账号和 Wrangler CLI
• Google AI Studio API Key

安装步骤

# 克隆仓库
git clone https://github.com/panw3i/cofo-workers.git
cd cofo-workers/packages/gemini-ai

# 安装依赖
pnpm install

# 配置环境变量
# 创建 .dev.vars 文件，添加你的 Gemini API Key
# GEMINI_KEY=your_api_key_here

# 本地开发
pnpm run dev

快速开始

本地开发

# 启动开发服务器
pnpm run dev

访问 http://localhost:8787 即可看到聊天界面。

部署到生产环境

# 部署到 Cloudflare Workers
pnpm run deploy

部署前需要：

1. 登录 Cloudflare 账号：npx wrangler login
2. 设置 Secrets：npx wrangler secret put GEMINI_KEY

使用示例

Web 界面使用

1. 打开应用首页
2. 在底部输入框输入问题
3. 点击 send 按钮或按回车发送
4. 等待 Gemini AI 的流式响应

API 调用

curl -X POST https://your-worker.your-subdomain.workers.dev/chat \
  -H "Content-Type: application/json" \
  -d '{
    "q": "你好，请介绍一下自己",
    "history": []
  }'

带历史记录的对话

curl -X POST https://your-worker.your-subdomain.workers.dev/chat \
  -H "Content-Type: application/json" \
  -d '{
    "q": "刚才说了什么？",
    "history": [
      { "role": "user", "parts": "你好，请介绍一下自己" },
      { "role": "model", "parts": "我是 Gemini，一个 AI 助手..." }
    ]
  }'

API 参考

路由

POST /chat 请求体

InputContent 类型

interface InputContent {
  role: 'user' | 'model'
  parts: string
}

项目结构

gemini-ai/
├── src/
│   └── index.tsx          # 主应用入口
├── assets/
│   └── static/            # 静态资源
│       ├── css/           # UnoCSS 生成的样式
│       └── js/            # 前端 JavaScript
├── package.json           # 项目依赖
├── tsconfig.json          # TypeScript 配置
└── README.md              # 项目说明

注意事项

1. API Key 安全：切勿将 GEMINI_KEY 硬编码在代码中，应使用 Wrangler Secrets 管理
2. 免费额度：Google Gemini API 有免费额度限制，生产环境请注意用量
3. CORS 配置：如需跨域访问，可在 Hono 中添加 CORS 中间件
4. 流式响应：SSE 响应需要客户端支持 EventSource API

项目链接

• GitHub 仓库：https://github.com/panw3i/cofo-workers/tree/main/packages/gemini-ai
• 原始仓库：https://github.com/zouhangwithsweet/cofo-workers
• Hono 框架：https://hono.dev
• Google AI Studio：https://makersuite.google.com