腾讯云AI代码助手编程挑战赛—快速搭建【政务智能客服】应用
目录
1、准备好vscode编辑器(建议安装版本 1.84 及以上)，单击前往 VS Code 官网下载。
快速安装：如果您已正确安装了 VS Code，单击一键安装腾讯云 AI 代码助手。
4、到这里腾讯云AI代码助手就集成完成，支持AI 助手对话功能和代码补全功能
（1）提问：“请帮我生成一个vue3项目，并集成TDesign （VueNext 组件库）”
（2）按照指示快速生成了一个vue3+TDesign 初始项目
（4）借助代码助手的知识库，对客服聊天页面样式微调（入口在“引用”那里）
（5）提问：“将上述客服聊天的vue3主页面的样式进一步优化，达到扁平化的页面效果”
（6）按照经过多轮代码微调和优化后，操作方式类似，通过对话+补全组，最终完成页面效果展示如下：
（2）找到核心代码逻辑，复制到编辑器中，触发补全进行代码微调，完成后端api的请求
前言
随着互联网的蓬勃发展，IT领域业务需求变更的速度越来越快，许多中小公司都采用快捷开发的方式来提升开发效率，但是往往真实场景是：客户提出了一个需求，IT服务厂商需要两三天的时间内给出解决方案，这对于人员不变情况下，开发人员来说不仅工作量也加大了，工作强度也提高了，那么随着现在大模型技术的蓬勃发展，有没有一款好的AI编程辅助工具能够帮助到我们开发人员来提升开发效率呢？正好博主最近在研究和学习AIGC，加上也有个政务领域的智能客服的需求需要技术调研， 博主这里刚好了解到腾讯云也推出一款编程助手——【腾讯云 AI 代码助手】，能自动生成代码片段，还能帮助我们快速找到并修复代码中的错误，可以帮助提升开发效率，为我们的项目进度带来了积极的影响。因此，我决定尝试在使用【腾讯云 AI 代码助手】的能力来先开发一个政务智能客服，使用了这款工具后博主不到一天时间就完成了全部开发，非常高效，这里也给大家先看看博主开发的作品成果：
那么这次应用开发的亲身体验下来，博主是在vscode编辑器中集成了腾讯云AI代码助手插件来做开发，它有何优势和便捷之处，以及我是如何来进行【政务智能客服】这款应用的开发呢，且听博主接下来为你娓娓道来~~~
一、技术架构
本项目主要采用以下前沿技术和工具：
- Vue 3 +vite：项目基于 Vue 3 构建，并采用 TS 语法，使组件书写更简洁、代码更加严谨。
- TDesign Vue Next：集成腾讯提供的 TDesign 组件库，实现了对话框、按钮、输入框、弹窗等多种 UI 组件，保证了界面的一致性和良好的用户体验。
- marked：用于解析和渲染大模型返回的Markdown字符串，使得消息中内容能够友好显示。
- Localstorage：用于实现对话记录的本地存储。
- 流式 API 请求：通过 Fetch API 的流式请求与 SSE 技术，实现了聊天机器人实时响应，保证用户体验的流畅性。
- 混元大模型api：对接混元大模型api,为应用提供智能问答服务.
二、功能介绍
以下是项目核心功能的详细介绍:
1、智能回答
与常规输入框不同，本项目将消息输入移至弹窗中，使用大号 textarea 提供更宽敞、便于输入的编辑区域，使得长消息或需要排版的文本内容能够更好呈现。同时
2、对话展示
消息以气泡样式展示，支持 markdown格式文件渲染，用户与系统的对话清晰分隔。每条消息下方附有删除、引用及反馈按钮，方便用户管理和互动。
3、历史对话存储
通过Localstorage本地存储，支持用户将历史问答记录本地存储，便于存档或再次询问。
4、消息反馈
针对每条对话，用户可点赞或点踩，通过反馈组件记录用户对回答满意度，同时可以点击引用按钮快速将消息内容导入输入框继续讨论。方便模型进一步调优
三、腾讯云AI代码助手集成
1、准备好vscode编辑器(建议安装版本 1.84 及以上)，单击前往 VS Code 官网下载。
2、安装插件：
快速安装：如果您已正确安装了 VS Code，单击一键安装腾讯云 AI 代码助手。
从 IDE 插件市场安装：您也可以在 VS Code 插件市场手动搜索 腾讯云 AI 代码助手 并下载安装。
3、点击 右下角 选择 立即登录，跳转到网页进行微信登录
登录成功后跳转回编辑器，就可以使用腾讯云AI代码助手了~
4、到这里腾讯云AI代码助手就集成完成，支持AI 助手对话功能和代码补全功能
四、腾讯云AI代码助手快速搭建AI智能客服pc项目
1、应用架构
为了更快的进行开发，前端方面选择了 TDesign （VueNext 组件库） +Vue3，实现常见的智能客服业务功能。
后端对接腾讯混元大模型API，提供客服AI智能回复。
2、前端应用
（1）提问：“请帮我生成一个vue3项目，并集成TDesign （VueNext 组件库）”
（2）按照指示快速生成了一个vue3+TDesign 初始项目
（3）提问：“生成客服聊天的vue3主页面”
通过对话实现一个客服聊天的vue3页面先去生成个大概。然后通过插入代码之后，再进行代码补全微调，从而生成自己想要的代码逻辑。
（4）借助代码助手的知识库，对客服聊天页面样式微调（入口在“引用”那里）
（5）提问：“将上述客服聊天的vue3主页面的样式进一步优化，达到扁平化的页面效果”
（6）按照经过多轮代码微调和优化后，操作方式类似，通过对话+补全组，最终完成页面效果展示如下：
3、后端接口对接
（1）提问：使用js如何对接混元大模型API
（2）找到核心代码逻辑，复制到编辑器中，触发补全进行代码微调，完成后端api的请求
到这里博主借助腾讯云AI代码助手快速开发的一款"AI智能客服"应用，不到一天时间就已经完成大部分功能，非常高效实用，后续博主会把项目进行部署并把源代码整理开放出来供大家学习~~~
五、体验总结
在体验完腾讯云AI代码助手辅助编程后，感受到腾讯云AI代码助手有以下几个优点：
1、内嵌 IDE ，开发效率更高
使用 AI 代码助手插件，开发者在不离开代码编写环境的前提下就能进行 AI 技术问题的提问或者获取代码。并且可以直接在 IDE 中插入 AI 提供的代码片段，效率更高。
2、自动识别上下文
AI 代码助手可以自动识别 IDE 编辑器中可视范围内的所有代码，并基于代码内容提供补全的代码信息。业务代码越多，补全的代码越准确。
3、支持知识库扩展
使得腾讯云 AI 代码助手在提供研发问答和智能编码服务时，更加精准、全面，有效避免了模型幻觉，助力开发者高效解决问题，提升编码效率
4、安全合规稳定
不论是 Github Copilot 还是 ChatGPT ，开发的过程中都有可能会泄露关键的业务代码信息；AI 代码助手使用的是混元模型，符合国内安全要求，能避免因政策影响导致的产品不可用。
总而言之，腾讯云AI代码助手这次给我的体验非常良好，后续会考虑探索腾讯云AI代码助手更多的功能并推荐团队小伙伴使用，为工作进行赋能~~~
汇聚全球AI编程工具，助力开发者即刻编程。
更多推荐
23
0- 0
已为社区贡献1条内容
所有评论(0)