基于CloudBase AI Toolkit + Vue Web轻松构建智能睡眠助手网站

心慌？焦虑？失眠？

我觉得这样下去真的不是办法。

于是想到神奇的腾讯云产品。看看它能带给我什么样的惊喜？

腾讯云开发是什么？云开发平台是云原生一体化应用开发平台，提供Serverless免服务器代码开发及拖拉拽可视化低代码开发两种应用构建方式，它集成了多种能力，并拥有丰富完善的基础平台框架，能够帮助我们高效搭建PC Web、H5和小程序应用。

最近，「CloudBase AI ToolKit」带领开发者玩家们开启了征服后端宇宙的史诗远征，于是乎我也立刻想要参与其中。我用它完成了智能睡眠助手网站项目构建，毫不费力解决我的失眠问题，并且在线分享给其他有同样需要的小伙伴们。

「CloudBase AI ToolKit」是腾讯云开发 CloudBase（面向 AI 应用的一站式开发平台）推出的全新能力。

它无缝集成主流 AI 编程工具（如 Cursor、CodeBuddy、Trae、WinSurf 等），能够基于简单 Prompt 指令，自动生成可直接部署的前后端应用及微信小程序，并一键发布至腾讯云开发平台，实在太方便了啦。

这标志着 AI 工具正从单纯生成前端模块迈向全栈应用自动化的新阶段。

CloudBase AI ToolKit 深度参与应用开发全生命周期，它致力于打造全栈式便捷开发能力，不仅高效实现“从 0 到 1”的搭建，更致力于“从 1 到 N”的持续优化与价值提升，能帮我们快速完成具备商业价值的应用开发、上线与运营。

后端开发？交给 CloudBase AI Toolkit就对了；

它能做到后端省心自动搭建，前端网页个性化生成。

首先我前往云开发CloudBase官网（tcb.cloud.tencent.com），访问界面如下所示：

AI ToolKit 开源仓库地址：

GitHub地址：https://github.com/TencentCloudBase/CloudBase-AI-ToolKit

CNB地址：tencent/cloud/cloudbase/CloudBase-AI-ToolKit · Cloud Native Build

在官网，我首先完成开通并创建环境，新用户可开通一台免费环境，点击立即体验即可领取这台云开发主机。关注公众号还可以领取代金券。新用户首月免费体验云开发 AI+，并赠送 100万 token。真的超级棒啊！

点击去开发。进入加载的环境界面如下：

可以点击链接访问在线教程，然后根据云开发相关文档、教程进行开发。

回到我们的开发者工具当中，我们将CloudBase AI Toolkit从本地MCP市场服务中导入。我觉得这真的是刚需。太有必要了。

完成添加MCP工具并创建如下：

找到我们要的MCP Server并点击安装，只需要等待1-2分钟便会安装完成。

绿色的小圆点表示该工具已经成功激活，可以正常使用了。并且显示了其附带的函数功能名称。

然后我们与AI编程工具比如CodeBuddy对话，让它帮我们自动登录云开发即可。实现情况如下所示。

首次进入授权界面完成Cloud base 的CLI授权。

随后进入一个酷酷的页面完成登录。

为了提高开发效率，使我们的开发更加便捷容易上手，第一次用腾讯云开发AI Toolkit,我选择从官网的介绍中找一个Vue的模板下载使用。就是这个web-cloudbase-vue-template啦。直接下载然后解压到我们的工作目录即可使用。

还没有使用过Vue的小伙伴们记得安装好Vue。

然后我们基于AI进行开发。

需要考虑的设定如下：

核心功能 ：比如睡眠质量评估，个性化助眠方案推荐，睡前放松引导，睡眠知识科普，睡眠问题咨询等等。

工作流程 ：包括问候并了解用户当前状态，评估睡眠困扰类型，提供针对性建议，跟踪睡眠改善情况，定期调整方案等等。

工具偏好 ：睡眠周期计算器，白噪音生成器，呼吸引导计时器，睡眠记录分析。

交互规则 ：避免使用刺激性语言，夜间模式自动调暗界面，紧急情况提供即时帮助。

开发代码如下所示：

然后我们实现应用界面如下：

这个界面将我们刚才考虑的功能都实现出来了。我觉得非常美观大气。风格也是我喜欢的简洁明了的微软宽版文字风。再继续加强美化界面分块后如下所示：

然后一键发布到云环境即可，这里有些小伙伴可能需要升级一下套餐才能生效。

试了一下，效果还行。能睡着。哈哈~~~~！！！

好了，各位朋友，CloudBase AI Toolkit真的非常好用。

大家也赶快一起来试试把！

完结，撒花~~！

附赠：

AI ToolKit GitHub地址（https://github.com/TencentCloudBase/CloudBase-AI-ToolKit）