# Nuxt4Chat

**Repository Path**: yong-top/nuxt4-chat

## Basic Information

- **Project Name**: Nuxt4Chat
- **Description**: 基于 Nuxt UI 构建的智能 AI 聊天机器人平台，支持 DeepSeek AI 模型，提供实时对话、文件上传、聊天历史记录等功能。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://chat.myong.top/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-05
- **Last Updated**: 2026-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Nuxt AI Chatbot

[English](README.md) | 中文

基于 Nuxt UI 构建的智能 AI 聊天机器人平台，支持 DeepSeek AI 模型，提供实时对话、文件上传、聊天历史记录等功能。

![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt&labelColor=020420)
![License](https://img.shields.io/badge/License-MIT-green)
![Node](https://img.shields.io/badge/Node-%3E%3D20.0.0-brightgreen)

## 功能特性

### 🤖 AI 对话
- **流式响应**：实时流式输出 AI 回复，支持思考过程展示
- **多模型支持**：支持 DeepSeek、OpenAI 等多种 AI 模型
- **Markdown 渲染**：支持 Markdown 语法和代码高亮显示

### 💬 聊天管理
- **历史记录**：自动保存聊天记录，随时查看历史对话
- **会话管理**：创建、删除、搜索聊天会话
- **公开/私密**：支持设置聊天会话的可见性

### 📎 文件上传
- **拖拽上传**：支持拖拽文件到输入框上传
- **多种格式**：支持图片、PDF、CSV 等文件格式
- **文件预览**：支持在对话中直接预览上传的文件

### 🔐 认证系统
- **多平台登录**：支持 GitHub 和 Gitee OAuth 登录
- **会话管理**：安全的用户会话控制
- **隐私保护**：文件上传需要登录认证

### 📊 工具调用
- **天气查询**：内置天气查询工具
- **图表展示**：支持数据图表可视化
- **实时搜索**：内置网络搜索功能

### 🎨 界面特性
- **明暗主题**：支持浅色和深色模式切换
- **响应式设计**：完美适配桌面和移动设备
- **键盘快捷键**：支持丰富的键盘操作
- **命令面板**：快速访问各种功能

## 技术栈

- **框架**：Nuxt 4 + Vue 3
- **UI 组件**：Nuxt UI
- **AI SDK**：Vercel AI SDK
- **数据库**：MySQL + Drizzle ORM
- **文件存储**：本地文件系统存储
- **认证**：nuxt-auth-utils
- **样式**：Tailwind CSS 4

## 快速开始

### 环境要求

- Node.js >= 20.0.0
- pnpm >= 10.0.0

### 安装依赖

```bash
pnpm install
```

### 配置环境变量

复制 `.env.example` 文件为 `.env` 并配置相关环境变量：

```bash
# 数据库配置
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=nuxt_chat

# AI 模型配置
DEEPSEEK_API_KEY=your_deepseek_api_key
DEEPSEEK_API_URL=https://api.deepseek.com

# 或者使用 OpenAI
OPENAI_API_KEY=your_openai_api_key
OPENAI_API_URL=https://api.openai.com

# 会话密钥（至少32个字符）
NUXT_SESSION_PASSWORD=your_session_password_minimum_32_characters

# GitHub OAuth（可选）
NUXT_OAUTH_GITHUB_CLIENT_ID=your_github_client_id
NUXT_OAUTH_GITHUB_CLIENT_SECRET=your_github_client_secret

# Gitee OAuth（可选）
NUXT_OAUTH_GITEE_CLIENT_ID=your_gitee_client_id
NUXT_OAUTH_GITEE_CLIENT_SECRET=your_gitee_client_secret

# 第三方 API（可选，用于文件上传转发）
THIRD_PARTY_API_URL=https://your-third-party-api.com
```

### 初始化数据库

```bash
pnpm db:migrate
```

### 启动开发服务器

```bash
pnpm dev
```

访问 `http://localhost:3000` 即可看到应用。

## 生产环境部署

### 构建应用

```bash
pnpm build
```

### 预览生产构建

```bash
pnpm preview
```

### 使用 PM2 启动

```bash
pm2 start .output/server/index.mjs --name nuxt-chat
```

## 项目结构

```
nuxt-ui-chat/
├── app/
│   ├── assets/          # 静态资源
│   ├── components/      # Vue 组件
│   │   ├── chat/        # 聊天相关组件
│   │   └── ...
│   ├── composables/     # Vue Composables
│   ├── layouts/         # 布局文件
│   ├── middleware/      # 中间件
│   ├── pages/           # 页面
│   │   ├── chat/        # 聊天页面
│   │   └── index.vue    # 首页
│   ├── utils/           # 工具函数
│   └── app.vue          # 应用入口
├── server/
│   ├── api/             # API 路由
│   │   ├── chats/       # 聊天相关 API
│   │   ├── upload/      # 文件上传 API
│   │   └── storage/     # 文件存储 API
│   ├── db/              # 数据库相关
│   │   └── migrations/  # 数据库迁移
│   ├── routes/          # 路由（认证）
│   └── utils/           # 服务端工具
├── shared/              # 共享类型和工具
├── public/              # 公共静态资源
└── nuxt.config.ts       # Nuxt 配置
```

## 配置说明

### AI 模型配置

项目支持配置多个 AI 模型，可以通过环境变量进行配置：

```bash
# DeepSeek 模型
DEEPSEEK_API_KEY=your_api_key
DEEPSEEK_API_URL=https://api.deepseek.com

# OpenAI 模型
OPENAI_API_KEY=your_api_key
OPENAI_API_URL=https://api.openai.com
```

### 数据库配置

项目使用 MySQL 数据库，通过以下环境变量配置：

```bash
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=password
DB_NAME=nuxt_chat
```

### OAuth 认证配置

#### GitHub OAuth

1. 访问 [GitHub Developer Settings](https://github.com/settings/applications/new) 创建 OAuth App
2. 设置 Homepage URL 和 Authorization callback URL
3. 获取 Client ID 和 Client Secret

#### Gitee OAuth

1. 访问 [Gitee OAuth](https://gitee.com/oauth/applications/new) 创建 OAuth App
2. 设置应用名称和回调地址
3. 获取 Client ID 和 Client Secret

## 常用命令

| 命令 | 说明 |
|------|------|
| `pnpm dev` | 启动开发服务器 |
| `pnpm build` | 构建生产版本 |
| `pnpm preview` | 预览生产构建 |
| `pnpm typecheck` | 运行类型检查 |
| `pnpm lint` | 运行代码检查 |
| `pnpm db:migrate` | 运行数据库迁移 |
| `pnpm db:generate` | 生成数据库类型 |

## 浏览器支持

- Chrome >= 90
- Firefox >= 90
- Safari >= 15
- Edge >= 90

## License

MIT License - 查看 [LICENSE](LICENSE) 文件了解更多详情

## 致谢

- [Nuxt UI](https://ui.nuxt.com) - 精美的 Vue 组件库
- [Vercel AI SDK](https://ai-sdk.dev) - AI 应用开发框架
- [Drizzle ORM](https://orm.drizzle.team) - 轻量级 ORM
- [Tailwind CSS](https://tailwindcss.com) - 实用优先的 CSS 框架

## 联系方式

如有问题或建议，欢迎提交 Issue 或 Pull Request。