案例简述
在网站上增加一个AI助手后，可以提供7*24的全天候服务，即时回答用户的问题和解决他们可能遇到的问题，无需等待人工客服上班，显著提升用户体验。
本例中，您可以通过向AI助理提问来为您提供方案，便于您快速完成AI助手的搭建。
使用AI助理获取方案并配置
1. 向AI助手提问，获取方案
点击阿里云官网右下角AI助理图标，向AI助理提问：
详细告诉我，如何在我的网站上增加一个和你一样的AI助手
得到结果：
根据AI助理给的方案，您可以通过百炼来增加AI助手到自己的网站，基本步骤为：
创建大模型应用->准备示例网站->引入AI助手到网站->增加私有知识->部署与验证。
2. 根据AI助手提供的方案搭建在您的网站上搭建AI助手
2.1 创建大模型应用
跟随操作即可：
进入百炼控制台的我的应用，在页面右侧点击新增应用。在对话框，选择智能体应用并创建。
填写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> 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 部署与验证
以您的真实网站为例，重新部署后，即可验证：
案例优势
您可以通过直接向AI助理提问的方式，快速找到您想实现的技术方案，通过简单的对话即可完成整个技术方案的搭建，降低您的学习成本。
![无缝融入，即刻智能[二]：Dify-LLM平台(聊天智能助手、AI工作流)快速使用指南，42K+星标见证专属智能方案](https://ucc.alicdn.com/fnj5anauszhew_20240819_1d1a574e34e6463ab6585a9d8f594cd6.png?x-oss-process=image/resize,h_160,m_lfit)