本文档介绍一个基于 Next.js 框架构建的 AI 会话应用。
为什么要做这个呢？现在开源的比较好的项目有 LobeChat 和 NextChat，LobeChat 功能很多，支持主流的模型提供商，社区也在逐渐发展，正是因为它的功能太多了，导致已经无法在 vercel 平台上免费部署了，而且官方已经不再维护 WEB 版本了，而很多人就只用用聊天功能和插件功能，这就导致如果想继续使用 LobeChat 的新功能和 bug 修复版本，就必须自备服务器或者付费使用 vercel 这样的平台；NextChat 项目功能比 LobeChat 少很多，作者也不怎么维护，所以不想使用。于是决定自己做一个轻便版的 AI 会话应用，核心功能自主可控。
功能特性
- 多模型支持: OpenAI、Google Gemini、DeepSeek、Cloudflare Workers AI
- 流式输出: 实时展示 AI 回复内容
- 推理模式: 支持模型的深度思考功能
- 联网搜索: 支持使用 Google 联网搜索
- 多模态输入: 支持图片、音频、文件上传
- 历史对话: 本地存储，支持管理和搜索
- 角色系统: 自定义提示词角色
- 响应式设计: 支持桌面端和移动端
- 多语言支持: 中文/英文
- 明暗主题: 跟随系统自动切换
- PWA 支持: 可安装为桌面应用
项目结构
├── app/ # Next.js App Router
│ ├── api/ # API 路由
│ │ ├── chat/ # 聊天 API
│ │ ├── config/ # 配置 API
│ │ └── roles/ # 角色 API
│ ├── globals.css # 全局样式
│ ├── layout.tsx # 根布局
│ └── page.tsx # 主页面
├── components/ # React 组件
│ ├── chat/ # 聊天相关组件
│ └── ui/ # UI 基础组件
├── config/ # 配置文件
│ ├── providers.ts # 模型提供商配置
│ ├── tools.ts # 工具配置
│ └── roles.json # 角色配置
├── i18n/ # 国际化
│ ├── config.ts # i18n 配置
│ └── messages/ # 翻译文件
├── lib/ # 工具库
│ ├── db.ts # IndexedDB 存储
│ └── utils.ts # 工具函数
├── services/ # 服务层
│ ├── adapters/ # 模型适配器
│ └── tools/ # 工具执行器
├── store/ # 状态管理
│ └── chat-store.ts # Zustand Store
├── types/ # TypeScript 类型
│ └── index.ts # 类型定义
└── public/ # 静态资源
└── icons/ # 图标文件模型支持
当前只支持 OpenAI、Gemini、DeepSeek、Cloudflare Workers AI 公司的模型。为什么不重点支持国内的模型呢？说实话：国内模型和美国的模型比起来还是要差很多，特别是在解决复杂问题和指令遵循上，更重要的是国内有几十万的敏感词，当你的问题涉及的这些词时，国内模型就是傻瓜一个。当然了，以上都不重要，重要的是这几个平台都是长期免费使用的（至少目前看是免费的），不像国内的都是新用户注册才送100万token，而且还限时使用，所以还是资本主义好。
模型能力
当前支持的模型能力有 支持函数/工具调用、支持思考模式、支持图片输入、支持文件输入、支持图片生成、支持文字转语音、支持语音转文字、支持联网搜索。这些能力都是在单个模型维度设置的，模型本身支持这个能力，你才可以配置这个能力，当然了也可以不配置这个能力，那就在使用时无法使用这个能力了。我现在的配置如下：
其中，OpenAI 和 DeepSeek 使用第三方提供的免费模型，Gemini 和 Cloudflare Workers AI 使用的是官方提供的免费模型，这些当然有额度限制，但是个人使用完全足够了。
联网搜索
一个 AI 聊天工具如果不支持联网搜索，那就失去了灵魂了，如果只能接入百度这样的搜索能力，那只是聊胜于无，所以联网搜索能力在我这里是优先级比较高的功能。项目支持原生的 Google Search API，直接调用 Google 的搜索引擎搜索全网任何内容，同时还支持 Serper(一个把 Google Search API 包装了一层的搜索能力提供商) API 搜索能力，根据用户输入的内容智能提取出搜索关键词。本还想做智能搜索能力，就是模型自动决策和规划要怎么搜索、搜索什么内容，但是免费的额度有限，怕一下子就用完了。
其他介绍
支持思考模式，会展示思考过程（仅 Gemini、DeepSeek 模型会展示，其他模型没有输出思考过程）。
历史对话只存在本地，不会存在其他任何地方，这是一个无服务的应用。
多语言和明暗主题全部都是跟随系统自动切换。
支持 PWA，可以“安装”到手机上，像使用 APP 一样。
在 vercel 上部署时间不到 1 分钟，而 LobeChat 部署时间在 15 分钟以上，甚至经常部署失败。
浏览器资源占用更小，缓存文件不到 1M，而 LobeChat 的缓存文件超过 120M。
部署
账号准备
首先需要注册 GitHUb 账号，然后可以使用 GitHUb 账号登陆 Vercel 平台。然后注册 Google 账号（需要梯子）和 Cloudflare 账号。
获取 API Key
获取 Google Gemini 的 API Key，和 Cloudflare Workers AI 的 API Token 和 Account ID，OpenAI 和 DeepSeek 的账号和 API Key 自行去网上找，这里不说了，避免广告嫌疑。
导入项目
进入 GitHUb，Fork 本项目，如果喜欢 LobeChat，也可以 Fork LobeChat。然后进入 Vercel 平台，点击 Add New -> Project，然后Import Git Repository，然后选择 Repository，点击部署即可。
配置环境变量
在 Vercel 平台部署的 Project 里，点击 Settings -> Environment Variables，开始设置环境变量，设置完成后重新部署一次。
# 应用访问密码
ACCESS_PASSWORD=your-password-here
# 历史消息限制数量
HISTORY_LIMIT=50
# OpenAI 配置
OPENAI_ENABLED=false
OPENAI_BASE_URL=https://api.openai.com/v1
OPENAI_API_KEY=your-openai-api-key
OPENAI_MODELS=gpt-4o=GPT-4o<fc:vision>,gpt-4o-mini=GPT-4o Mini<fc:vision>,gpt-4-turbo=GPT-4 Turbo<fc:vision>
# Google (Gemini) 配置
GOOGLE_ENABLED=false
GOOGLE_BASE_URL=https://generativelanguage.googleapis.com/v1beta
GOOGLE_API_KEY=your-google-api-key
GOOGLE_MODELS=gemini-2.5-flash=Gemini 2.5 Flash<fc:vision:file:reasoning>,gemini-3.0-flash=Gemini 3.0 Flash<fc:vision:file:reasoning:search>
# DeepSeek 配置
DEEPSEEK_ENABLED=false
DEEPSEEK_BASE_URL=https://api.deepseek.com/v1
DEEPSEEK_API_KEY=your-deepseek-api-key
DEEPSEEK_MODELS=deepseek-chat=DeepSeek V3<fc>,deepseek-reasoner=DeepSeek R1<reasoning>
# Cloudflare Workers AI 配置
CLOUDFLARE_ENABLED=false
CLOUDFLARE_BASE_URL=https://api.cloudflare.com/client/v4/accounts/{account_id}/ai/v1
CLOUDFLARE_API_KEY=your-cloudflare-api-key
CLOUDFLARE_MODELS=@cf/meta/llama-3.3-70b-instruct-fp8-fast=Llama 3.3 70B<fc>
# 联网搜索工具
WEB_SEARCH_ENABLED=false
# 搜索 API 类型: google 或 serper
SEARCH_API_TYPE=serper
# Google Search API 配置
GOOGLE_SEARCH_API_KEY=your-google-search-api-key
GOOGLE_SEARCH_ENGINE_ID=your-search-engine-id
# Serper API 配置
SERPER_API_KEY=your-serper-api-key
# 联网搜索关键词智能提取使用的模型提供商和模型名称
# openai | deepseek | cloudflare | google
KEYWORD_EXTRACTOR_PROVIDER=cloudflare
KEYWORD_EXTRACTOR_MODEL=@cf/meta/llama-3.3-70b-instruct-fp8-fast模型的能力标识
# fc: 支持函数/工具调用
# vision: 支持图片输入
# file: 支持文件输入
# reasoning: 支持思考模式
# imageOutput: 支持图片生成
# tts: 支持文字转语音
# asr: 支持语音转语音
# stt: 支持语音转文字
# search: 支持联网搜索配置域名
在 Vercel 平台部署完成一个 Project 后，会自动生成一个域名，因为域名已经被污染了，所以国内无法访问，这时需要自己购买一个域名，然后把你自己的域名 CNAME 到 cname-china.vercel-dns.com 即可。购买域名是唯一一个需要花钱的地方，买一个便宜一点的域名，一年不到 10 块钱，非常划算。推荐国外域名，因为不用备案。
以上，你就极低成本拥有一个没有限制的 AI 会话应用了，随时随地都可以使用。
怎么自己做一个项目
说实话，我是不会 Nodejs 的，要是我自己做，肯定是做不出来，得益于 AI Coding，我可以迅速完成这个项目的开发，这里推荐使用 Qoder 工具。Qoder 开发这个项目用了不到十分钟的时间，这充分说明了 AI 将能替代绝大部分人的工作；但是细节优化、页面和交互调整、Bug修复却用了我四天多的时间，这也充分说明了 AI 暂时还不能完全取代人工。下面是我写的第一版的提示词：
你是一个全球顶尖的前端工程师，请使用nextjs框架实现一个大模型对话的项目，和 LobeChat 功能一样，支持回答问题、发送图片和文件、接受图片和文件、支持展示各种返回格式的文本，具体要求如下：
- 使用nodejs和nextjs框架，使用typescript语言，代码加上详细的注释。
- 整个页面主要分2块，左侧边栏展示历史对话列表，页面剩余部分展示对话内容，页面样式参考图片 destop.png。如果在手机端使用，整个页面都要展示对话内容（页面样式参考mobile.png），历史对话列表在下方使用抽屉页的交互展示（页面样式参考mobile session.png），对话列表每个对话支持删除和重命名。在对话内容的上方展示对话的标题、使用的模型名称、调用的工具名称（如果没有调用工具，则不展示）。
- 页面需要有一个输入框，输入框右侧是消息发送按钮，紧挨着输入框上方是工具栏，工具栏支持选择模型、是否思考模式、上传图片、上传文件、选择调用工具、清除当前对话历史、新建对话等。
- 选择模型时，分公司展示模型名称（页面样式参考model list.png），图标直接读取静态文件即可。使用环境变量配置每个公司的模型列表，每个公司都有一个是否启用的配置、url、token、模型列表等配置，模型列表配置如下：gemini-3-flash-preview=Gemini 3.0 Flash，其中gemini-3-flash-preview是真正调用的模型名，Gemini 3.0 Flash是展示在前端页面的名字，fc是模型支持工具调用，vision是支持上传图片，file是支持上传文件，reasoning是支持推理思考，imageOutput是支持图片生成，search是支持联网搜索，多个模型用逗号分隔。如果不启用这个公司的模型，那么在前端页面就不要展示出来。
- 工具栏支持的功能，如果选择的模型不支持该功能，工具栏就不要展示这个功能入口。
- 消息对话中，用户发送的内容和模型回复的内容的样式参考session.png，每一个模型的回复内容都支持删除并重新生成和复制的功能，每一个用户发送的内容都支持复制。
- 要求输出的文本支持流式输出，实时在页面上展示出来。对于支持思考模式的模型，页面要支持展示思考过程。
- 要求可以发送图片、文件、音频、视频，大模型回答问题后，也可以展示出文本和图片、视频等，总之尽可能支持所有模型回复的内容。
- 历史对话记录列表，要可以自动从第一轮对话中提取出标题，对话数据存在浏览器本地，有删除按钮可以删除，点击就可以查看对话并继续对话。前端存储使用indexedDB，不需要跨设备使用，数据只需要存在浏览器本地就行。
- 支持工具调用，调用工具的列表展示支持的所有工具（页面样式参考tools.png），是否启动工具以及工具的key等参数在环境变量中配置。每个工具的图标在静态文件中已有。例如调用联网搜索工具等，你必须给出一个标准的工具调用框架，以便以后可以更方便的接入其他工具。并在代码中明确注释说明怎么接入其他工具。联网搜索功能支持 google search api 和 serper api，能够根据用户输入内容智能决定怎么搜索，然后给出最终答案。
- 为了控制未授权的访问，需要环境变量设置访问密码。前端页面在对话时传入密码，后端验证密码是否正确，不正确则弹出密码输入框。前端输入的密码要求存在浏览器中。
- 支持加载自定义角色的提示词，在输入框中用 / 开头，然后自动检索自定义的角色，支持模糊匹配角色名字。角色名字和角色对应的提示词需要配置在一个json文件中，从这个json文件中读取数据即可。
- 如果历史对话消息太多，你需要限制历史消息数量，这个数量在环境变量中可配置。
- 支持多语言，使用 i18n。多语言跟随电脑和手机的设置自动切换，默认是英语。
- 支持明暗主题跟随电脑和手机的设置自动切换，默认是明亮主题。
- 字体大小跟随电脑和手机的设置。
- 支持PWA，每次部署自动更换版本号。
- 你的代码框架设计必须符合架构设计规范，可以灵活扩展功能支持不同公司的模型和不同的自定义工具调用，代码结构严谨清晰。你需要支持Gemini、ChatGPT、DeepSeek、Cloudflare等模型。
- 页面精美，能适配不同的分辨率，支持电脑和手机和平板。