如何快速搭建本地AI聊天界面：Next.js Ollama LLM UI完整指南 🚀

Next.js Ollama LLM UI是一个基于NextJS构建的全功能、美观的Ollama LLM Web界面，让你能够快速、本地甚至离线运行大型语言模型，无需繁琐的设置即可轻松上手。

✨ 为什么选择Next.js Ollama LLM UI？

这款开源工具凭借以下特性脱颖而出：

• ChatGPT级体验：直观美观的界面设计，让交互更自然流畅
• 完全本地化：聊天记录存储在localStorage，无需数据库支持
• 全设备响应：手机和桌面端均可无缝使用
• 一键部署：简单克隆仓库即可启动，新手友好
• 代码高亮与复制：自动高亮代码块并支持一键复制
• 模型管理：直接在界面下载、删除和切换模型
• 深色/浅色模式：随使用习惯自由切换

📸 项目预览

图：Next.js Ollama LLM UI的实时聊天界面展示，包含代码高亮和模型切换功能

⚙️ 准备工作

开始前请确保满足以下要求：

1. 已下载并运行Ollama（或使用Docker容器运行）
2. 安装Node.js (18+)和npm环境

🚀 两种快速安装方式

1️⃣ Docker一键部署

本地Ollama服务时：

docker run -d -p 8080:3000 --add-host=host.docker.internal:host-gateway -e OLLAMA_URL=http://host.docker.internal:11434 --name nextjs-ollama-ui --restart always jakobhoeg/nextjs-ollama-ui:latest

远程Ollama服务时：

docker run -d -p 8080:3000 --add-host=host.docker.internal:host-gateway -e OLLAMA_URL=http://example.com:11434 --name nextjs-ollama-ui --restart always jakobhoeg/nextjs-ollama-ui:latest

提示：可将默认8080端口修改为其他端口号

2️⃣ 源码安装步骤

1. 克隆仓库

git clone https://gitcode.com/gh_mirrors/ne/nextjs-ollama-llm-ui

2. 进入项目目录

cd nextjs-ollama-llm-ui

3. 配置环境变量

mv .example.env .env

4. 修改Ollama服务地址（如非默认）

OLLAMA_URL="http://localhost:11434"

5. 安装依赖

npm install

6. 启动开发服务器

npm run dev

7. 访问界面
打开浏览器访问 http://localhost:3000 开始聊天！

🛠️ 核心功能模块解析

聊天功能实现

核心聊天组件位于 src/components/chat/，包含：

• chat-message.tsx：消息展示组件，支持代码高亮
• chat-input.tsx：输入框组件，支持表情和图片输入
• chat-list.tsx：聊天历史记录管理

模型管理功能

模型下载和切换功能通过 src/components/pull-model.tsx 实现，可直接在界面操作模型生命周期。

语音输入支持

语音识别功能在 src/app/hooks/useSpeechRecognition.ts 中实现，提供便捷的语音交互方式。

🚧 即将推出的功能

• ✅ 语音输入支持
• ✅ 代码语法高亮
• ✅ 图片输入支持（视觉模型）
• ✅ 回复重新生成
• ⬜️ 聊天导入导出功能

🛠️ 技术栈选型

• 前端框架：NextJS
• 样式框架：TailwindCSS
• UI组件：shadcn-ui
• 动画效果：Framer Motion
• 图标库：Lucide Icons

💡 使用小贴士

• 跨域设置：如果前端部署在非localhost地址，需设置OLLAMA_ORIGINS环境变量
• 模型推荐：初次使用推荐尝试llama2或mistral模型
• 性能优化：本地部署时建议分配足够内存以获得流畅体验

通过本指南，你已经掌握了Next.js Ollama LLM UI的安装配置和核心功能。这款开源工具让本地AI聊天变得简单高效，无论是学习研究还是日常使用都是理想选择！ 🤖💬