情感陪伴 AI 聊天机器人
ai-chatbotidea

情感陪伴 AI 聊天机器人

一个温暖、富有同理心的 AI 情感陪伴应用,提供多种性格的虚拟角色,陪伴你聊天、倾听你的心声。

作者
王明
15 浏览2025年12月上线
变现方式完全免费

技术栈

Next.js
React
TypeScript
Tailwind CSS
Supabase

#✨ 核心功能

1. 多角色情感陪伴

提供 6 种不同性格的 AI 陪伴角色,每个角色都有独特的个性和对话风格:

  • Anya(温柔的姐姐) - 温暖、睿智、同理心强,像你一直想要的姐姐
  • Mia(阳光的闺蜜) - 活力十足、开朗乐观,充满"金毛犬能量"
  • Liam(坚硬的守护者) - 冷嘲热讽但内心柔软,典型的"傲娇"人设
  • Kai(沉默的倾听者) - 内敛安静、平静有力,创造安全感
  • Ray(智慧的导师) - 成熟沉着、循循善诱,提供哲学思维
  • Jojo(搞笑的小丑) - 机智有趣、出其不意,带来混乱的快乐

2. 智能对话

  • 文字聊天:支持实时文字对话,AI 会根据选择的角色性格进行回复
  • 语音输入:支持按住说话,使用浏览器内置的语音识别功能将语音转换为文字
  • 角色记忆:AI 会记住对话上下文,提供连贯的对话体验
  • 个性化回复:每个角色都有独特的回复风格,符合其性格设定

3. 记忆功能(Memory Lane)

  • 可以记录关于你的"小秘密"
  • AI 会记住这些信息,让对话更加个性化
  • 支持添加、查看和删除记忆

4. 多语言支持

  • 支持中文和英文两种语言
  • 界面和对话内容会根据语言设置自动切换

5. 用户认证

  • 支持 Google 登录
  • 支持邮箱密码登录/注册
  • 使用 Supabase 进行用户认证管理

#🛠️ 技术栈

  • 前端框架:Next.js 16, React 19
  • 语言:TypeScript
  • 样式:Tailwind CSS
  • 认证:Supabase
  • AI API:OpenRouter (支持多种 AI 模型)
  • 语音识别:浏览器 SpeechRecognition API
  • 部署:支持 Vercel 一键部署

#📁 项目结构

├── app/                    # Next.js App Router
│   ├── api/               # API 路由
│   │   └── chat/         # AI 聊天 API
│   └── page.tsx          # 主页面
├── components/            # React 组件
│   ├── chat-interface.tsx    # 聊天界面主组件
│   ├── chat-input.tsx        # 输入组件(文字+语音)
│   ├── chat-messages.tsx     # 消息显示组件
│   ├── memory-sidebar.tsx    # 记忆侧边栏
│   └── persona-selector.tsx   # 角色选择器
├── lib/                   # 工具函数和配置
│   ├── personas.ts       # 角色数据
│   ├── translations.ts   # 多语言翻译
│   └── ai-config.ts      # AI 配置
└── types/                # TypeScript 类型定义
📸

项目截图

Screenshot 1
Screenshot 2
Screenshot 3