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

2024-10-09 18

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 通过向AI助理提问的方式，生成一个技术方案：在网站上增加一个AI助手，提供7*24的全天候服务，即时回答用户的问题和解决他们可能遇到的问题，无需等待人工客服上班，显著提升用户体验。

案例简述

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

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

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

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

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

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

得到结果：

根据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

跟随操作即可：

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

填写prompt并发布：

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

API-KEY：

应用ID：

2.2 准备示例网站

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

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

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

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

效果：

2.3 引入AI助手到网站

2.3.1 示例网站

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

最后点击部署代码，等待部署完成即可。

完成后：

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>
  // 使用 async/await 来处理异步请求
  async function fetchChatbotConfig() {
    try {
      const response = await fetch('/api/get_chatbot');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const config = await response.json(); // 假设后端返回的是JSON格式的数据
      console.log(config.endpoint);

      return config; // 返回配置信息
    } catch (error) {
      console.error('There was a problem with the fetch operation:', error);
      throw error; // 抛出错误以便调用者处理
    }
  }
  // 初始化 chatBotEndpoint 为默认值，您可以为FC提供的测试域名绑定自己的自定义域名
  let chatBotEndpoint = 'https://your.domin.cn/chat';

  // 异步获取配置信息并更新 chatBotEndpoint
  (async () => {
    try {
      const config = await fetchChatbotConfig();
      chatBotEndpoint = config.endpoint;
      console.log('Updated chatBotEndpoint:', chatBotEndpoint);
    } catch (error) {
      console.error('Failed to update chatBotEndpoint:', error);
    }
  })();

  window.CHATBOT_CONFIG = {
    endpoint: chatBotEndpoint, // 可以替换为 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>