AI助理精准匹配,为您推荐方案——如何快速在网站上增加一个AI助手

本文涉及的产品
通义法睿合同智能审查,1个月8份合同免费体验
简介: 通过向AI助理提问的方式,生成一个技术方案:在网站上增加一个AI助手,提供7*24的全天候服务,即时回答用户的问题和解决他们可能遇到的问题,无需等待人工客服上班,显著提升用户体验。

案例简述

在网站上增加一个AI助手后,可以提供7*24的全天候服务,即时回答用户的问题和解决他们可能遇到的问题,无需等待人工客服上班,显著提升用户体验。

本例中,您可以通过向AI助理提问来为您提供方案,便于您快速完成AI助手的搭建。


使用AI助理获取方案并配置

1. 向AI助手提问,获取方案

点击阿里云官网右下角AI助理图标,向AI助理提问:

详细告诉我,如何在我的网站上增加一个和你一样的AI助手

得到结果:

image.png 根据AI助理给的方案,您可以通过百炼来增加AI助手到自己的网站,基本步骤为:

创建大模型应用->准备示例网站->引入AI助手到网站->增加私有知识->部署与验证。


2. 根据AI助手提供的方案搭建在您的网站上搭建AI助手

2.1 创建大模型应用

点击匹配到的文档,查看详情:https://help.aliyun.com/zh/model-studio/use-cases/add-an-ai-assistant-to-your-website-in-10-minutes?spm=a2c4g.2834116.0.0.61423dc7LwOsve

image.png

跟随操作即可:

进入百炼控制台的我的应用在页面右侧点击新增应用。在对话框,选择智能体应用并创建。

image.png

填写prompt并发布:

image.png

为了在后续通过 API 调用大模型应用的能力,我们需要获取百炼应用的 API-KEY 和应用 ID:

API-KEY: image.png

应用ID: image.png

2.2 准备示例网站

如果您已经有自己的网站,可以跳过这一步。

如果您只是想体验一下或者还没有网站,您可以根据应用模板来快速搭建网站:

请打开我们提供的函数计算应用模板选择直接部署、并填写前面获取到的百炼应用 ID 以及 API-KEY。

image.png

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

image.png

效果:

image.png

2.3 引入AI助手到网站

2.3.1 示例网站

  1. 回到应用详情页,在环境详情的最底部找到函数资源,点击函数名称,进入函数详情页。
  2. 进入函数详情页后,在代码视图中找到public/index.html文件,然后取消③所在位置的代码注释即可。

  1. 最后点击部署代码,等待部署完成即可。

完成后:

image.png

2.3.2 您自己的网站

以首页为例,您可以在您的主页上增加如下代码(仅供参考):

<link rel="stylesheet" crossorigin href="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.16/index.css" />
<script type="module" crossorigin src="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.16/index.js"></script>
<script>
  window.CHATBOT_CONFIG = {
    endpoint: "https://{your-fc-http-trigger-domain}/chat", // 替换为您的触发器域名
    displayByDefault: false, // 默认不显示 AI 助手对话框
    aiChatOptions: { // 自定义取值参考:https://docs.nlkit.com/nlux/reference/ui/ai-chat#conversation-options
      conversationOptions: { // 自定义取值参考:https://docs.nlkit.com/nlux/reference/ui/ai-chat#conversation-options
        conversationStarters: [
          {prompt: '哪款手机续航最长?'},
          {prompt: '你们有哪些手机型号?'},
          {prompt: '有折叠屏手机吗?'},
        ]
      },
      displayOptions: { // 自定义取值参考:https://docs.nlkit.com/nlux/reference/ui/ai-chat#display-options
        height: 600,
        // width: 400,
      },
      personaOptions: { // 自定义取值参考:https://docs.nlkit.com/nlux/reference/ui/ai-chat#chat-personas
        assistant: {
          name: '你好,我是你的 AI 助手',
          // AI 助手的图标
          avatar: 'https://img.alicdn.com/imgextra/i2/O1CN01Pda9nq1YDV0mnZ31H_!!6000000003025-54-tps-120-120.apng',
          tagline: '您可以尝试点击下方的快捷入口开启体验!',
        }
      },
      messageOptions: { // 自定义取值参考:https://docs.nlkit.com/nlux/reference/ui/ai-chat#message-options
        waitTimeBeforeStreamCompletion: 'never'
      }
    },
    dataProcessor: {
      /**
       * 在向后端大模型应用发起请求前改写 Prompt。
       * 比如可以用于总结网页场景,在发送前将网页内容包含在内,同时避免在前端显示这些内容。
       * @param {string} prompt - 用户输入的 Prompt
       * @param {string}  - 改写后的 Prompt
       */
      rewritePrompt(prompt) {
        return prompt;
      }
    }
  };
</script>

2.4 增加私有知识

您可以参考:https://help.aliyun.com/zh/model-studio/use-cases/add-an-ai-assistant-to-your-website-in-10-minutes?spm=a2c4g.2834116.0.0.61423dc7LwOsve增加私有知识。本例中以文档中的知识为例。

2.5 部署与验证

以您的真实网站为例,重新部署后,即可验证:

image.png

案例优势

您可以通过直接向AI助理提问的方式,快速找到您想实现的技术方案,通过简单的对话即可完成整个技术方案的搭建,降低您的学习成本。

相关实践学习
如何快速创建插件agent
阿里云百炼应用基于Assistant API技术架构,结合大语言模型(LLM)的推理、知识检索增强、插件调度等能力,构建应对各类复杂场景任务的场景应用。通过集成化、直观易用的产品界面,为开发者提供了丰富的应用配置选项,包括大型语言模型(LLM)选择、Pro
目录
打赏
0
13
13
1
51
分享
相关文章
使用 Ollama + FastAPI 打造轻量级 AI 应用部署方案
本文介绍了一套基于 Ollama 和 FastAPI 的轻量级 AI 模型部署方案,解决云端部署成本高、本地部署复杂的问题。通过 200 行核心代码实现模型加载到 API 服务的全流程,适用于中小型应用。方案结合 Ollama 的本地化运行能力和 FastAPI 的高性能特性,支持模型量化、并发控制和资源监控,提供 Docker 容器化及 K8s 扩展配置,优化性能与安全性。开发者可在 2 小时内完成环境搭建与部署,满足日均百万级请求需求,为 AI 应用快速落地提供有效支持。
33 0
分享一个非常实用的在线AI工具网站
在线工具网是一个包含AI工具、站长工具、开发人员工具、实用工具、AI助手,能够提供最新AI知识库、在线编码、正则表达式、加密解密、二维码生成、在线进制转换、JSON解析格式化、JavaScript、css、httml格式化/混淆/压缩、时间戳转换等免费在线AI工具平台。
98 34
Agent TARS:一键让AI托管电脑!字节开源PC端多模态AI助手,无缝集成浏览器与系统操作
Agent TARS 是一款开源的多模态AI助手,能够通过视觉解析网页并无缝集成命令行和文件系统,帮助用户高效完成复杂任务。
2803 13
Agent TARS:一键让AI托管电脑!字节开源PC端多模态AI助手,无缝集成浏览器与系统操作
智谱AI新突破!GLM-Z1-Rumination:新一代沉思模型,推动AI助手进入"高智商+高自主"的新阶段
GLM-Z1-Rumination是智谱推出的新一代沉思模型,通过扩展强化学习训练实现长程推理能力,支持动态工具调用与自我验证机制,显著提升AI自主研究能力。
148 13
智谱AI新突破!GLM-Z1-Rumination:新一代沉思模型,推动AI助手进入"高智商+高自主"的新阶段
6.5K star!AI视频翻译配音神器,一键生成多平台适配内容,专业级本地化方案来袭!
KrillinAI 是一款基于 AI 大模型的视频翻译与配音工具,支持 12 种输入语言和 101 种输出语种,提供专业级翻译质量。其核心功能包括跨语言智能转换、全流程自动化处理及多项黑科技如语音克隆、术语替换等。技术架构涵盖 WhisperKit、OpenAI API 和 FFmpeg 等组件,实现从视频输入到多平台输出的一站式服务。项目已开源,详情见 GitHub 地址:https://github.com/krillinai/KrillinAI。
小白避坑指南:国内用Colossal-AI微调DeepSeek 1.5B的完整踩坑记录(附镜像加速方案)
本文详细记录了使用Colossal-Ai对DeepSeek-Qwen模型进行微调的过程,包括模型下载、环境部署、数据集处理及代码实现等环节。重点介绍了LoRA低秩适配方法和Colossal-Ai分布式训练框架的使用技巧,解决了模型封装后函数调用冲突、梯度检查点配置等问题。通过命令行参数灵活调整训练配置,最终在两块A100 GPU上完成训练,单卡显存占用约11GB,利用率达85%。文章总结了常见问题及解决方法,为后续研究提供参考。
198 15
小白避坑指南:国内用Colossal-AI微调DeepSeek 1.5B的完整踩坑记录(附镜像加速方案)
Dify-Plus:企业级AI管理核弹!开源方案吊打SaaS,额度+密钥+鉴权系统全面集成
Dify-Plus 是基于 Dify 二次开发的企业级增强版项目,新增用户额度、密钥管理、Web 登录鉴权等功能,优化权限管理,适合企业场景使用。
358 3
Dify-Plus:企业级AI管理核弹!开源方案吊打SaaS,额度+密钥+鉴权系统全面集成
最新AI大模型数据集解决方案:分享两种AI高质量代码数据集生产方案
本文分享了两种构建高质量AI代码数据集的解决方案。第一种是传统方式,结合动态住宅代理与手动处理,通过分页读取和数据清洗生成结构化数据;第二种是利用Web Scraper API工具,实现自定义配置、自动化抓取及云端存储。两种方法各具优势,适合不同需求和技术水平的团队。同时,文章还提供了专属优惠福利,助力提升数据采集效率,为AI大模型训练提供支持。
73 5
最新AI大模型数据集解决方案:分享两种AI高质量代码数据集生产方案
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
AI大模型进阶系列(02)基于Spring AI实现AI chatbot助理|一句话让deepseek实现
本文介绍了通过DeepSeek生成一个基于Spring AI的在线AI聊天助手项目的全过程。项目采用JDK17+Spring AI+Thymeleaf+Spring Web技术栈,实现了一个简单的聊天界面,用户可输入内容并获得DeepSeek返回的结果。文章详细描述了从需求明确、项目结构设计到配置参数启动的步骤,并展示了核心代码片段如pom.xml、application.properties及主要Java类文件。尽管功能简单,但体现了AI在编程领域的高效应用,未来有望进一步优化上下文记忆等功能,提升开发体验与效率。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等