发布于 2026-01-06 6 阅读
0

从零开始创建聊天机器人,并用 Vibe Coding 编写 UI💃 RADHIKA - 自适应推理与智能助手 DEV 的全球展示挑战赛,由 Mux 呈现:展示你的项目!

从零开始创建聊天机器人,并用 Vibe Coding 编写用户界面💃

RADHIKA - 自适应推理与智能助手

由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

大家好,

希望你还记得我。(记得吗?请在评论区告诉我。)

在这篇博客中,我将讨论 Radhika:一款自适应推理与智能助手。它提供六种不同模式下的专业辅助:通用模式、效率模式、健康模式、学习模式、创意模式和好友模式。

拉迪卡

Radhika 是一款功能全面的 AI 聊天机器人,旨在协助完成各种任务,从回答问题到提供建议,再到进行日常对话。

网站图标radhika-sharma.vercel.app

(试用后,提供反馈和建议,提出修改意见)

 

🛠️ 技术栈

前端

  • 框架:Next.js 14,搭配 App Router 和 React 18
  • 样式:Tailwind CSS 和自定义设计系统
  • 组件:shadcn/ui 组件库
  • 图标:Lucide React 图标库
  • 3D图形:Three.js用于粒子可视化
  • 动画:CSS过渡和关键帧动画

人工智能与后端

  • AI 集成:Vercel AI SDK 用于统一的 LLM 访问
  • 提供商:Groq、Google Gemini、OpenAI、Claude
  • 语音:WebKit 语音识别和合成 API
  • 存储:浏览器本地存储,用于保存聊天记录和设置
  • API:用于安全LLM通信的Next.js API路由

发展

  • 语言:TypeScript(用于类型安全)
  • 构建:经过优化的 Next.js 构建系统
  • 部署:支持 Vercel 和环境变量
  • 性能:优化了包拆分和延迟加载

 

🚀 实现主要逻辑

本节详细介绍app/api/chat/route.ts端点如何处理请求、选择模型、应用系统提示以及使用不同的 AI 提供商传输响应。

1. 解析请求

请求处理程序首先解析传入的 POST 请求中的 JSON 正文:

const body = await req.json();
const { messages, mode = "general", provider = "groq", apiKey } = body;
Enter fullscreen mode Exit fullscreen mode
  • messages客户端发送的对话记录。
  • mode:确定要使用的系统提示符(例如bff,,,learning等)。
  • provider:指定要使用的 AI 后端groq,,,openaiclaudegemini
  • apiKey:如果需要用户密钥,则 OpenAI 和 Claude 需要此项。

该代码还会验证messages数组是否存在且不为空。

2. 分配系统提示符

根据所选模式,系统会选择相应的提示来引导助手的个性和用途:

const systemPrompt = SYSTEM_PROMPTS[mode] || SYSTEM_PROMPTS.general;
Enter fullscreen mode Exit fullscreen mode

模式示例包括:

  • productivity
  • bff
  • creative
  • wellness

3. 找到正确的服务提供商

provider字段决定使用哪个AI模型后端:

  • Geminigoogle):使用谷歌的 Gemini 2.0 模型。
  • OpenAI:使用 GPT 模型(例如gpt-4ogpt-3.5-turbo)。
  • 克劳德:使用人择模型(例如claude-3-sonnet)。
  • Groq:默认使用类似llama-3和这样的模型qwen

每个提供商都有自定义逻辑来实例化模型、处理错误并使用以下方式传输响应:

await streamText({...})
Enter fullscreen mode Exit fullscreen mode

4. 型号选择(仅限 Groq)

如果提供程序是动态的groq,则模型选择是动态的。它会分析最后一条消息来确定任务类型:

if (lastMessage.includes("analyze") || lastMessage.includes("plan")) {
  modelType = "reasoning";
} else if (lastMessage.includes("creative") || lastMessage.includes("design")) {
  modelType = "creative";
} else {
  modelType = "fast";
}
Enter fullscreen mode Exit fullscreen mode

RADHIKA 会根据您的查询复杂度自动选择最佳模型:

// Determine which model to use based on conversation context
let modelType = "fast"; // llama-3.1-8b-instant for quick responses

// Use reasoning model for complex analytical tasks
if (query.includes("analyze", "compare", "plan", "strategy", "decision", "problem")) {
  modelType = "reasoning"; // llama-3.3-70b-versatile
}

// Use creative model for artistic and innovative tasks
if (query.includes("creative", "brainstorm", "idea", "write", "design", "story")) {
  modelType = "creative"; // qwen/qwen3-32b
}
Enter fullscreen mode Exit fullscreen mode

模型配置

在 API 路由中自定义模型选择:

const MODELS = {
  groq: {
    fast: "llama-3.1-8b-instant",
    reasoning: "llama-3.3-70b-versatile", 
    creative: "qwen/qwen3-32b"
  },
  gemini: { default: "gemini-2.0-flash" },
  openai: { default: "gpt-4o" },
  claude: { default: "claude-3-5-sonnet-20241022" }
}
Enter fullscreen mode Exit fullscreen mode

然后选择合适的模型(reasoning,,creativefast)并用于响应。

 

📄 多提供商流程

图表

这种方法允许单个 API 路由服务于多个模型提供者和助手角色,同时保持清晰、可扩展的逻辑。

 

如果您想了解语音识别、语音合成、浅色/深色模式等其他逻辑,请查看 GitHub 代码库:

GitHub 标志 RS-labhub / Radhika

你日常生活的助手和闺蜜💞

横幅

RADHIKA - 自适应推理与智能助手

RADHIKA 是一款基于 Next.js 构建的先进人工智能助手,并由 Groq、Gemini、OpenAI 和 Claude 等多家 LLM 提供商提供支持。RADHIKA 可适应不同的交互模式,为提高工作效率、保持健康、学习、创意任务提供专业帮助,甚至可以成为你 Z 世代的好朋友!

🎬 项目展示


















预览 描述
YouTube演示 🎬 YouTube演示
点击图片观看完整演示。
博客文章 📝博客文章
阅读博客文章以获取更详细的解释。

✨ 特点

🎯多模式智能

  • 通用助手:满足日常查询和对话需求的全能型人工智能助手
  • 效率教练:任务管理、计划、组织和时间优化专家
  • 健康指南:提供健康、健身、心理健康和自我护理方面的支持,并给予贴心指导。
  • 学习导师:个性化教育、技能提升和学习计划
  • 创意伙伴:头脑风暴、构思、创意项目和艺术灵感
  • 闺蜜模式:你的Z世代死党,能说你的语言,提供情感支持,并且与你合拍……

 

Vibe Coding 用户界面

当你成功实现了应用程序的主要逻辑后,可以使用 v0、lovable 或 bolt 等 AI 工具,根据你的“想法”创建界面。

我用了 v0 版本和 ChatGPT。提示……提示……没完没了的提示……看看下面的视频,里面有对这个项目及其功能的简要介绍。不过,你仍然可以实时访问它!

如果你喜欢,请给仓库点个星🌠,并在 GitHub 上关注我。

 

主要亮点

  • 🤖多模态人工智能- 一款应用内包含六种专业助手角色
  • 多供应商支持- 集成 Groq、Gemini、OpenAI 和 Claude
  • 🎤高级语音功能- 语音转文本输入和文本转语音输出
  • 🎨动态 3D 视觉效果- 基于模式颜色的交互式粒子系统
  • 💾智能持久化- 按模式自动保存聊天记录
  • 🚀快速操作- 一键访问各模式下的常用任务
  • 📊实时分析- 实时使用统计数据和 AI 活动监控
  • 🌙精美用户界面- 响应式设计,支持深色/浅色主题。

模式

  • 生产力:任务规划、项目管理、时间优化
  • 健康:健康指导、健身计划、心理健康支持
  • 学习:教育援助、学习计划、技能发展
  • 创意:头脑风暴、内容创作、艺术灵感
  • 通用技能:解决问题、决策制定、日常对话
  • 闺蜜:情感支持、轻松聊天、适合Z世代的互动

这款产品非常适合需要功能全面的 AI 助手的用户,该助手能够适应不同的环境,维护跨专业领域的对话历史记录,并提供具有先进语音功能的引人入胜的视觉体验。

 

结论

Radhika 是一款基于 Next.js 构建的先进人工智能助手,并由 Groq、Gemini、OpenAI 和 Claude 等多家 LLM 提供商提供支持。Radhika 可适应不同的交互模式,为提高工作效率、改善身心健康、学习、完成创意任务提供专业帮助,甚至可以成为你 Z 世代的好朋友!

我个人建议你试试“ BFF ”模式。你肯定会喜欢的。

再次提醒,以下是您不容错过的链接:

感谢阅读。你真棒!我是认真的。拜拜,下篇博客见!(还有,请一如既往地在评论区留言!)

文章来源:https://dev.to/rohan_sharma/creating-a-chatbot-from-scratch-and-vibe-coding-the-ui-1bij