10分钟打造专属AI助手——适用网站、钉钉、微信和企业微信登场景

在数字化迅速发展的时代，客户体验已成为企业成功的关键要素。为帮助企业在多渠道环境中高效应对客户咨询，我们特推出《10分钟打造专属AI助手》这本实用指南。 通过本书，您将学习如何在阿里云平台上以低成本、高效率的方式搭建AI客服，实现全天候响应客户需求，提升客户体验。即使您对代码开发并不熟悉，也能轻松跟随书中步骤完成搭建。我们提供的全面指导，无论是应用在企业官网、钉钉还是微信，都能帮助您实现多渠道集成，提升客户互动效率。同时，本书将教您如何整合企业私有知识库，以增强服务的专业性和个性化。 无论您是企业主还是客户服务团队成员，这本书都将为您提供切实可行的指导和启发。助力您的企业迎接AI所带来的无限可能！ 10分钟给网站添加AI助手6 1.创建大模型问答应用7 2.搭建示例网站9 3.为网站增加AI助手11 4.为AI助手增加私有知识14 10分钟在钉钉上增加一个AI机器人23 1.创建大模型问答应用23 2.创建钉钉应用26 3.创建钉钉连接流31 4.配置钉钉机器人34 5.为大模型问答应用增加私有知识39 10分钟让微信公众号成为智能客服45 1.创建大模型问答应用45 2.创建微信公众号连接流48 3.引入AI智能客服59 4.为AI客服增加私有知识61 10分钟在企业微信中集成一个AI助手66 1.创建大模型问答应用67 2.创建企业微信应用70 3.创建企业微信连接流74 4.配置企业微信应用78 5.为大模型问答应用增加私有知识81 10分钟构建能主动提问的智能导购86 1.创建函数计算应用88 2.访问网站89 3.验证智能导购效果90 10分钟给网站添加AI助手 在阿里云上只需10分钟即可为您的网站添加一个AI助手，以便全天候（7x24）回应客户咨询，提升用户体验、增强业务竞争力。 方案概览 在网站中引入一个AI助手，只需4步： 1.创建大模型问答应用：我们将先通过百炼创建一个大模型应用，并获取调用大模型应用API的相关凭证。 2.搭建示例网站：然后我们将通过函数计算，来快速搭建一个网站，模拟您的企业官网或者其他站点。 3.引入AI助手：接着我们将通过修改几行代码，实现在网站中引入一个AI助手。 4.增加私有知识：最后可以通过准备一些私有知识，让AI助理能回答原本无法准确回答的问题，帮助您更好的应对客户咨询。 1.创建大模型问答应用 首先我们可以通过创建一个百炼应用，来获取大模型的推理API服务，用于实现AI助手。 百炼提供的新用户免费额度可以完全覆盖本教程所需资源消耗。额度消耗完后按token计费，相比自行部署大模型可以显著降低初期投入成本。 1.1创建应用 (1)进入百炼控制台的我的应用，创建应用。 (2)在应用设置页面，模型选择通义千问-Plus，其他参数保持默认。 您也可以选择输入一些Prompt，比如设置一些人设以引导大模型更好的应对客户咨询。 你叫小助，可以帮助用户解答产品选购、使用等方面的问题。 (3)在页面右侧可以提问验证模型效果。不过您会发现，目前它还无法准确回答你们公司的商品信息。点击右上角的发布，我们将在后面的步骤中去解决这一问题。 1.2获取调用API所需的凭证 为了在后续通过API调用大模型应用的能力，我们需要获取一个百炼应用的API-KEY 和应用ID： (1)返回我的应用页面，点击查看我的API-KEY，在弹出窗口中创建一个新API-KEY。 (2)在应用列表中可以查看所有百炼应用ID。 2.搭建示例网站 在让AI助手能准确回答问题之前，我们可以先尝试快速将AI助手集成到网站中。 您可以通过我们提前准备好的应用模板，快速搭建一个空白的示例网站，用于模拟您的企业官网或者其他站点。详细步骤如下： 函数计算提供的免费试用额度可以完全覆盖本教程所需资源消耗。额度消耗完后按量计费，对于本教程所涉及的web服务，只在有访问的情况下会产生费用。 2.1创建应用 请打开我们提供的函数计算应用模板，参考下图选择直接部署、并填写前面获取到的百炼应用ID以及API-KEY。 然后其他表单项保持默认，点击页面左下角的创建并部署默认环境，等待项目部署完成即可（预计耗时1分钟）。 这里需要填写百炼应用ID和API-KEY，是因为我们预置的应用模板中包含了通过百炼应用调用大模型的代码，以便您在后续快速完成体验。 2.2访问网站 应用部署完成后，您可以在应用详情的环境信息中找到示例网站的访问域名，点击即可查看，确认示例网站已经部署成功。 3.为网站增加AI助手 在网站中增加AI助手非常简单，您只需要在网站的html文件中插入几行代码。 3.1增加AI助手相关代码 示例工程中包含了被注释的引入AI助手代码，您需要找到并解除注释。详细操作步骤如下： (1)回到应用详情页，在环境详情的最底部找到函数资源，点击函数名称，进入函数详情页。 (2)进入函数详情页后，在代码视图中找到public/index.html文件，然后取消③所在位置的代码注释即可。 (3)最后点击部署代码，等待部署完成即可。3.2验证网站上的AI助手 现在，您可以重新访问示例网站页面以查看最新效果。此时您会发现网站的右下角出现了AI助手图标，点击即可唤起AI助手。 4.为AI助手增加私有知识 通过前面的步骤，您已经拥有了一个可以和客户对话的AI助手。但是，如果想让AI助手像公司员工一样，更加精准且专业地回答与商品相关的问题，我们还需要为大模型应用配置知识库。 假设您在一家售卖智能手机的公司工作。您的网站上会有很多与智能手机相关的信息，如支持双卡双待、屏幕、电池容量、内存等信息。 不同机型的详细配置清单参考：百炼系列手机产品介绍.docx。 4.1配置知识库 接下来，我们可以尝试让大模型在面对客户问题时参考这份文档，以产出一个更准确的回答和建议。 (1)上传文件：在百炼控制台的数据管理中点击导入数据，根据引导上传我们虚构的百炼系列手机产品介绍： (2)建立索引：进入知识索引，根据引导创建一个新的知识库，并选择刚才上传的文件，其他参数保持默认即可。知识库将为上一步骤中准备的文档建立索引，以便后续大模型回答时检索参考。 选择向量存储类型时，如果您希望集中存储、灵活管理多个应用的向量数据，可选择ADB-PG。 (2)引用知识：完成知识库的创建后，可以返回我的应用进入到刚才创建的应用设置界面，打开知识检索增强开关、选择知识库，测试验证符合预期后点击发布。Prompt中会被自动添加一段信息，以便大模型在后续回答时参考检索出来的信息。 5.2检验效果 有了参考知识，AI助手就能准确回答关于您公司的商品的问题了。 总结 通过前面的学习，您已经能搭建一个大模型RAG应用，并且将其以AI助手的形式添加到网站中来应对客户咨询，过程仅需0元（免费试用额度内）10分钟。 应用于生产环境 在正式的将AI助手引入到您的生产环境之前，建议您了解如下信息： 前端代码 前面创建的网站AI助手，是基于NLUX（一个用于开发大模型对话机器人的前端库）开发的示例，功能还比较简单。 如果您对于AI助理有更多定制化的需求，如希望调整样式、支持历史会话管理等，可以参考NLUX的文档进行定制开发。 参考：定制前端组件的样式和内容 <linkrel="stylesheet" crossorigin href="https://g.alicdn.com/aliyun- documentation/web-chatbot-ui/0.0.15/index.css"/><scripttype="module"crossoriginsrc="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.15/index.js"></script><script>window.CHATBOT_CONFIG=[endpoint:"/chat",//可以替换为https://[your-fc-http-trigger-domain]/chatdisplayByDefault:false,//默认不展示AI助手聊天框aiChatOptions:[//aiChatOptions中options会传递aiChat组件，自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chatconversationOptions: [ //自 定义取值参考： https://docs.nlkit.com/nlux/reference/ui/ai-chat#conversation-optionsconversationStarters:[[prompt:'哪款手机续航最长？'],[prompt:'你们有哪些手机型号？'],[prompt:'有折叠屏手机吗?'],]],displayOptions:[//自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#display-optionsheight:600,],personaOptions:[//自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#chat-personasassistant:[name:'你好，我是你的AI助手',//AI助手的图标avatar:'https://img.alicdn.com/imgextra/i2/O1CN01Pda9nq1YDV0mnZ31H_!!6000000003025-54-tps-120-120.apng',tagline:'您可以尝试点击下方的快捷入口开启体验！',]]],dataProcessor:[/** *在向后端大模型应用发起请求前改写Prompt。*比如可以用于总结网页场景，在发送前将网页内容包含在内，同时避免在前端显示这些内容。*@param[string]prompt-用户输入的Prompt*@param[string]-改写后的Prompt*/rewritePrompt(prompt)[returnprompt;]]];</script><style>:root[/*webchat工具栏的颜色*/--webchat-toolbar-background-color:#1464E4;/*webchat工具栏文字和按钮的颜色*/--webchat-toolbar-text-color:#FFF;]/*webchat对话框如果被遮挡，可以尝试通过z-index、bottom、right等设置来调整位置*/.webchat-container[z-index:100;bottom:10px;right:10px;]/*webchat的唤起按钮如果被遮挡，可以尝试通过z-index、bottom、right等设置来调整位置*/.webchat-bubble-tip[z-index:99;bottom:20px;right:20px;]</style> 服务端代码 前面创建的示例网站代码中，包含了一个调用大模型获取答案的接口POST/chat，具体实现代码在文件index.js中。 函数计算应用在没有访问时不产生任何费用，您完全可以保留此函数应用，在后续用作调用大模型的转发服务。 函数计算应用部署时附带的**.devsapp.net域名会在下发后30天内回收，且不支持https访问，只适合于测试验证。如果您希望在您的网站上直接调用函数计算中部署的POST/chat接口，建议使用函数计算http触发器中提供的域名，如：https://web-chat****.fcapp.run/chat。与此同时，建议您修改index.js中的cors配置，禁止其他站点对此接口的访问。 应用评测 建议在正式上线AI助手前，组织业务人员一起参与应