基于 Next.js 构建的 拥有个人云盘的 Dify 对话式 Web 应用模板。

• AI 对话 - 支持流式对话、消息反馈、会话管理
• 直接对接 Dify - 支持从 Dify 平台获取工作流和应用配置
• 个人云盘 - 集成腾讯云 SMH（智能媒体托管），每个用户拥有独立存储空间
• 图片自动归档 - 对话中生成的图片自动保存到个人云盘，永久保存 AI 创作成果
• 云盘图片对话 - 支持从云盘选取图片进行 AI 对话，实现多模态交互
• 用户管理 - 内置用户登录/登出功能，支持 JWT 认证
• 租户隔离 - 基于 SMH 的多租户架构，用户数据完全隔离
• 权限管理 - 区分管理员权限和用户权限，前端仅获取受限 Token
• 响应式设计 - 适配桌面端和移动端

在项目根目录创建 .env 文件，参考 .env.example 进行配置：

# ============ Dify 配置 ============
# APP ID: 应用的唯一标识符
# 可在 Dify 应用详情页 URL 中找到，如 https://cloud.dify.ai/app/xxx/workflow 中的 xxx
NEXT_PUBLIC_APP_ID=

# APP API Key: 用于验证 API 请求的密钥
# 在应用的「API 访问」页面，点击右上角「API 密钥」按钮生成
NEXT_PUBLIC_APP_KEY=

# API URL: Dify API 的基础地址
# 使用 Dify 云服务请设置为: https://api.dify.ai/v1
# 私有部署请填写您的 Dify 服务地址
NEXT_PUBLIC_API_URL=

# ============ 腾讯云 SMH 配置（个人云盘功能）============
# 参考文档 https://cloud.tencent.com/document/product/1339/49938
# Library ID: SMH 媒体库 ID
NEXT_PUBLIC_LIBRARY_ID=

# Library Secret: SMH 媒体库密钥
NEXT_PUBLIC_LIBRARY_SECRET=

# Library host: SMH 媒体库访问域名
NEXT_PUBLIC_SMH_HOST=

# ============ JWT 配置 ============
# JWT 签名密钥（生产环境请使用强密钥）加密的salt
JWT_SECRET=your_jwt_secret_key

变量	必填	说明
NEXT_PUBLIC_APP_ID	✅	Dify 应用 ID
NEXT_PUBLIC_APP_KEY	✅	Dify API 密钥
NEXT_PUBLIC_API_URL	✅	Dify API 地址
NEXT_PUBLIC_LIBRARY_ID	✅	SMH 媒体库 ID（启用云盘功能需要）
NEXT_PUBLIC_LIBRARY_SECRET	✅	SMH 媒体库密钥（启用云盘功能需要）
NEXT_PUBLIC_SMH_HOST	✅	SMH 媒体库访问域名（启用云盘功能需要）
JWT_SECRET	✅	JWT 签名密钥

在 config/index.ts 中可以自定义应用信息：

export const APP_INFO: AppInfo = {
  title: 'Chat APP',           // 应用标题
  description: '',             // 应用描述
  copyright: '',               // 版权信息
  privacy_policy: '',          // 隐私政策链接
  default_language: 'zh-Hans'  // 默认语言
}

export const isShowPrompt = true      // 是否显示提示词配置
export const promptTemplate = ''      // 默认提示词模板

pnpm install
# 或
npm install
# 或
yarn

pnpm dev
# 或
npm run dev
# 或
yarn dev

访问 http://localhost:3000 查看应用。

# 构建镜像
docker build . -t webapp-conversation:latest

# 运行容器
docker run -p 3000:3000 \
  -e NEXT_PUBLIC_APP_ID=your_app_id \
  -e NEXT_PUBLIC_APP_KEY=your_api_key \
  -e NEXT_PUBLIC_API_URL=https://api.dify.ai/v1 \
  -e JWT_SECRET=your_jwt_secret \
  webapp-conversation:latest

访问 http://localhost:3000 查看应用。

默认用户配置在 app/api/utils/users.ts 中：

export const users: User[] = [
  { id: '1', username: 'shawn', password: '123', userId: 'shawn' },
  // 添加更多用户...
]

💡 生产环境建议替换为数据库存储用户信息

• Dify 官方文档
• Next.js 文档
• TDesign React 组件库
• 腾讯云 SMH 文档

MIT License

---

💡 本项目为模板项目，推荐用户借鉴或进一步改造以满足实际业务需求。