基础AI助手创建与网站集成

实验简介

在阿里云上只需10分钟即可为您的网站添加一个可高度自定义的AI助手，以便全天候（7x24小时）回应专属知识问答。

实验思路

1. 创建大模型问答应用：我们将先通过阿里云百炼创建一个大模型应用，并获取调用大模型应用API的相关凭证。

2. 创建AI助手：我们将通过Appflow创建A助手，并对其进行配置。

3. 引入AI助手：接着我们将通过修改几行代码，实现在网站中引入一个AI助手。

4. 增加私有知识：最后添加私有知识，让AI助手准确回答专业问题。

实验室资源方式简介

进入实操前，请确保阿里云账号满足以下条件：

• 个人账号资源

  • 使用您个人的云资源进行操作，资源归属于个人。

  • 所有实验操作将保留至您的账号，请谨慎操作。

  • 平台仅提供手册参考，不会对资源做任何操作。

• 确保已完成云工开物300元代金券领取。

• 已通过实名认证且账户余额≥0元。

• 本实验费用以实际使用的token量为准，以千问-Plus为例，输入 0.0008元/千tokens，输出0.002元/千tokens。

• 本实验产生的费用优先使用优惠券。如果您调整了资源规格、使用时长，或执行了本方案以外的操作，可能导致费用发生变化，请以控制台显示的实际价格和最终账单为准。

• 实操结束后，如通过云工开物代金券购买的产品，无需进行注销；如注销产品，代金券不会返还。

• 新注册阿里云百炼的用户，千问系列模型提供模型的免费额度，不同模型的免费额度不同，请在使用前，先阅读产品文档确认模型的免费额度，或在使用前，登录阿里云百炼-模型广场-模型卡片详情，查看具体模型的免费额度。注意在使用过程中的token消耗。模型列表 只有开通阿里云百炼服务后才能体验模型的免费额度。

领取专属权益及开通资源

第一步：在开始实验之前，请先点击右侧屏幕的“进入实操”再进行后续操作

第二步：本次实验需要您通过领取阿里云云工开物学生专属300元抵扣券兑换本次实操的云资源，如未领取请先点击领取。（若已领取请跳过）

实验步骤

阿里云百炼平台提供高效AI助手部署能力，用户可通过其预训练大模型（如千问系列）快速构建智能交互服务。开发者仅需调用标准化API接口，将自然语言处理、意图识别等能力无缝集成至网页，无需复杂训练或底层开发。部署后，AI助手可实时响应用户咨询，支持多轮对话、数据查询及个性化推荐，适用于电商导购、教育答疑等场景，实现零代码智能化升级，显著提升用户体验与运营效率。在阿里云上只需10分钟即可为您的网站添加一个AI助手，可以全天候（7x24）回应客户咨询，提升用户体验、增强业务竞争力。现在跟随我们，仅用4步就可以在网站中引入一个AI助手。

一、创建大模型问答应用

• 1、在阿里云官网搜索阿里云百炼进入控制台，或点击进入阿里云百炼控制台——应用管理，我们将先通过百炼创建一个大模型应用，并获取调用大模型应用API的相关凭证。

  

• 若之前未登录开通过阿里云百炼请按以下步骤操作，若已开通过百炼服务请跳过此步

  • 进入【应用开发】—【应用管理】，点击【立即登录】

    

  • 阅读服务协议并点击【同意】

    

• 2、创建智能体

  点击【应用开发】——【应用管理】——【创建应用】

  

• 选择【智能体应用】，输入应用名称此处我命名为“网页AI助手”，点击【立即创建】

  

• 3、智能体应用设置

  • 模型选择：千问-Plus

    

    

  • 其他参数保持默认，同时也可以选择输入一些提示词，比如设置一些人设以引导大模型更好的应对客户咨询。

    提示词示例：你叫小助，可以帮助用户解答产品选购、使用等方面的问题。

    

• 4、问答验证

  在页面右侧可以提问验证模型效果。不过您会发现，目前它还无法准确回答公司的商品信息。点击右上角的发布后，我们将在后面的步骤中去解决这一问题。

  

• 5、 获取API-KEY 和应用 ID

  为了在后续通过 API 调用大模型应用的能力，我们需要获取一个百炼应用的 API-KEY 和应用 ID，并保存到本地用于后续配置。

  • 应用 ID：在【应用开发】——【应用管理】——应用列表中可以查看所有百炼应用 ID

    

  • API-KEY ：在左侧导航栏点击【应用开发】——【密钥管理】——【创建API-KEY】，在弹出窗口中创建一个新 API-KEY。

    

二、创建AI助手

1. 登录AppFlow控制台

   • 可以直接点击进入AppFlow控制台

   • 也可以通过以下方式进入：

     • 在阿里云官网产品页面搜索计算巢服务

       

     • 点击【管理控制台】

       

     • 进入后搜索【AppFlow】，点击【查看详情】

       

     • 点击【立即访问AppFlow】

       

     • 进入到AppFlow控制台

       

2. 创建模型服务AI助手

   • 在左侧导航栏中选择【模型服务AI助手】，点击【创建AI助手】

     

   • 设置基本信息

     

   • 点击【提交】，创建成功

     

3. 导入模型

   • 点击【导入模型】

     

   • 选择阿里云百炼作为模型服务平台并点击【确定】，您也可以根据自身业务需求选择其他平台作为模型服务提供平台。

     

   • 跳出连接凭证弹窗，点击选项，点击【添加新凭证】

     

   • 输入凭证名称与先前获取的调用所需的API-KEY，以便AppFlow进行后续凭证认证

     

   • 回到选择连接凭证弹窗，点击刷新按钮，点击下拉选项，选择到刚才创建的凭证

     

   • 点击【下一步】

     

   • 输入先前获取的调用所需的应用ID后点击确定，将先前创建的百炼大模型应用与AI助手进行关联。其他参数保持默认，之后点击【保存】。

     

   • 导入配置成功

     

4. web页面集成配置

   • 点击【集成】——【web页面集成】

     

   • 页面中点击【创建集成】

     

   • 输入集成名称后点击【确定】进入详情配置页面

     

   • 对照右方可视化界面，您可针对集成效果进行个性化修改，如字体颜色、背景颜色、嵌入界面大小、头像图标、预置问题等。完成配置后点击提交按钮进行保存

     

三、搭建示例网站

1. 在让 AI 助手能准确回答问题之前，我们可以先尝试快速将 AI 助手集成到网站中。

   为了能够快速体验 AI 助手的嵌入效果，可以搭建一个完整的示例网站（包括临时访问域名等），我们提供了基于函数计算 FC 的一键部署模板。通过此方式，您无需手动配置环境，即可体验一个具备 AI 助手能力的可访问网站。

2. 点击链接并登录账号后选择直接部署，滑动到页面下方点击【创建并部署默认环境】。

   

3. 应用部署完成后，可以在应用详情的环境信息中找到示例网站的访问域名，点击即可查看，确认示例网站已经部署成功。

   

4. 示例代码中包含了被注释的引入 AI 助手代码与说明，您需要找到您的专属悬浮挂件部署脚本代码并粘贴于注释下方。回到AI助手Web集成页面，在最底部找到登录配置，点击匿名方式，复制悬浮挂件部署脚本。

   

5. 在环境详情页底部点击函数名称进入函数详情。在代码编辑器中切换至 index.html，根据文件内的注释提示，将悬浮挂件部署脚本粘贴到指定位置。

   

   

6. 重新运行HTML文件或代码视图中的【部署代码】按钮并重新访问域名，即可看到增加了AI助手的网页效果。

   

7. 现在，您可以重新访问示例网站页面以查看最新效果。此时您会发现网站的右下角出现了 AI 助手图标image，点击即可唤起 AI 助手。

   

四、增加私有知识

1. 最后可以通过准备一些私有知识，让 AI 助手能回答原本无法准确回答的问题，帮助客户更好地应对客户咨询。通过前面的步骤，在网页上已经拥有了一个可以和客户对话的 AI 助手。但是，如果想让 AI 助手像公司员工一样，更加精准且专业地回答与商品相关的问题，我们还需要为大模型应用配置知识库。

   场景假设：假设您在一家售卖智能手机的公司工作。您的网站上会有很多与智能手机相关的信息，如支持双卡双待、屏幕、电池容量、内存等信息。

   知识库参考：百炼系列手机产品介绍.docx，点击下载知识库文件。

2. 导入数据

   • 点击【应用开发】——【应用数据】，选择类目，选择数据类型为【文件】，点击【导入数据】

     

     说明

     1. 若【导入数据】按钮置灰，并提示请先新建类目，点击左侧类目管理的+号，新建一个类目

        

     2. 类目这里可以选择默认类目，或选择自定义的新建类目

     

   • 导入方式选择【本地上传】，选择【点击或拖拽上传文件】，上传刚才下载的示例文件，上传后点击【确认】

     

   • 导入数据需要花费一定的时间，需要耐心等待数据转为“导入完成”的状态（通过手动点击刷新按钮）。

     

     

3. 创建知识索引

   • 数据导入完成后，需要创建一个知识索引，在阿里云百炼的左侧导航栏中，点击【知识库】—【创建知识库】

     

   • 输入知识库名称，知识库类型及使用场景请按情况选择，此处保持默认选项即可，点击【下一步】

     

   • 数据来源有多种选择方式，此处可以点击【选择文件】按钮，在选择文件处，选到上一步上传知识库的类目，并勾选到该示例文件，点击【下一步】

     

   • 系统自动进行文档解析。文档解析需要一定时间，请您耐心等待，直至状态变更为“解析完成”状态，才能在后续的文档问答过程中被检索到。

     

     

4. 完成知识库的创建后，可以返回【应用管理】进入到刚才创建的应用设置界面，打开知识—文档、选择目标知识库，测试验证符合预期后点击发布。Prompt 中会被自动添加一段信息，以便大模型在后续回答时参考检索出来的信息。

   

   

   重要

   注意：

   如后续不再使用阿里云百炼知识库，请在实验结束后删除！！如在实验结束后继续使用知识库，将按小时进行资源计费，费用参考：0.03 元/知识库/小时（标准版）和0.2 元/RCU/小时（旗舰版）

   

5. 有了参考知识，AI 助手就能准确回答关于公司的商品的问题了。

   

6. 可以再次发布智能体，回到网页示例页面与网页AI助手对话，您的AI小助手将为您生成专属推荐！

   

实验资源释放

为避免不必要的扣费，请您实验结束后务必按步骤进行实验资源释放！！

1. 重要

   注意：

   1. 实验结束后，阿里云百炼账号无需注销

   2. 但如后续不再使用阿里云百炼知识库，请在实验结束后删除！！如在实验结束后继续使用知识库，将按小时进行资源计费，费用参考：0.03 元/知识库/小时（标准版）和0.2 元/RCU/小时（旗舰版）

      

   3. 实验结束后，阿里云百炼应用如已发布应用至其他渠道中，请关注token消耗量；如需删除，可以在【应用开发】—【应用管理】中对特定应用进行删除。

      

   4. 在阿里云百炼，模型训练部署等需要付费，请谨慎操作。模型体验、构建应用等需要消耗Token，在测试前请先确认是否有免费额度。

2. 删除函数FC应用

   • 在函数FC控制台中找到刚才创建的应用，并点击【删除应用】

     

   • 勾选并点击【删除应用与所选资源】

     

   • 提示删除完成后，请再次检查是否删除成功

     

3. 删除AppFlow

   • 在AppFlow控制台中找到刚才创建的AI助手，并点击【删除】

     

   • 点击【确认删除】

     

   • 提示删除完成后，请再次检查是否删除成功

     

背景知识

本场景主要涉及产品：阿里云百炼。

在本实验中，需要注意您当前账号中是否有免费额度，若无免费额度或免费额度已过期，本次实验会消耗token，可能产生费用。

模型token费用：请查看模型列表：模型列表

如何查看模型免费额度：登录阿里云百炼，在【模型服务】—【模型广场】—对应模型卡片查看详情，查看模型的免费额度，也可以关注系统管理-系统工具中的调用统计。

关闭实验

• 完成实验后，点击 结束实操

  

• 点击 取消 回到实验页面，点击 确定 退出实验界面，关闭页面结束实验

  

  说明

  阿里云百炼账号无需注销，如后续不再使用阿里云百炼知识库，请确认是否有在实验结束后删除知识库，以避免不必要的扣费