从零开始创建聊天机器人,并用 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,,, openai) 。 claudegemini
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模型后端:
Gemini ( google):使用谷歌的 Gemini 2.0 模型。
OpenAI :使用 GPT 模型(例如 gpt-4o, gpt-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,, creative或 fast)并用于响应。
📄 多提供商流程
这种方法允许单个 API 路由服务于多个模型提供者和助手角色,同时保持清晰、可扩展的逻辑。
如果您想了解语音识别、语音合成、浅色/深色模式等其他逻辑,请查看 GitHub 代码库:
RADHIKA - 自适应推理与智能助手
RADHIKA 是一款基于 Next.js 构建的先进人工智能助手,并由 Groq、Gemini、OpenAI 和 Claude 等多家 LLM 提供商提供支持。RADHIKA 可适应不同的交互模式,为提高工作效率、保持健康、学习、创意任务提供专业帮助,甚至可以成为你 Z 世代的好朋友!
🎬 项目展示
预览
描述
🎬 YouTube演示 点击图片观看完整演示。
📝 博客文章 阅读博客文章以获取更详细的解释。
✨ 特点
🎯 多模式智能
通用助手 :满足日常查询和对话需求的全能型人工智能助手
效率教练 :任务管理、计划、组织和时间优化专家
健康指南 :提供健康、健身、心理健康和自我护理方面的支持,并给予贴心指导。
学习导师 :个性化教育、技能提升和学习计划
创意伙伴 :头脑风暴、构思、创意项目和艺术灵感
闺蜜模式 :你的Z世代死党,能说你的语言,提供情感支持,并且与你合拍……
Vibe Coding 用户界面
当你成功实现了应用程序的主要逻辑后,可以使用 v0、lovable 或 bolt 等 AI 工具,根据你的“想法”创建界面。
我用了 v0 版本和 ChatGPT。提示……提示……没完没了的提示……看看下面的视频,里面有对这个项目及其功能的简要介绍。不过,你仍然可以 实时访问 它!
VIDEO
如果你喜欢,请给仓库点个星🌠,并在 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