为你的网站打造一个AI助手

在线体验各类最新模型,更有模型 免费Token 额度领取!
立即体验
简介: 通过简单四步,即可在网站中集成AI助手,提升客户咨询体验。首先点击“立即部署”,创建大模型问答应用并获取API凭证;接着利用函数计算快速搭建示例网站;随后解除代码注释,引入AI助手;最后配置知识库,上传文档并建立索引,使AI助手能提供更精准的回答。新用户可享受免费额度,降低初期成本。

动手实践十分钟在网站上增加一个AI助手
一、首先点击下图中的"去部署“,如下图所示:
屏幕截图 2024-09-22 132456.png
二、方案优势
只需4步,即可体验如何在网站中增加一个AI助手
屏幕截图 2024-09-22 132721.png
三、方案介绍
1、点击下图的”立即部署“
屏幕截图 2024-09-22 133123.png
2、在网站中引入一个 AI 助手,只需 4 步:

创建大模型问答应用:我们将先通过百炼创建一个大模型应用,并获取调用大模型应用 API 的相关凭证。

搭建示例网站:然后我们将通过函数计算,来快速搭建一个网站,模拟您的企业官网或者其他站点。

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

增加私有知识:最后可以通过准备一些私有知识,让 AI 助理能回答原本无法准确回答的问题,帮助您更好的应对客户咨询。
屏幕截图 2024-09-22 133502.png
四、创建大模型问答应用
a.首先我们可以通过创建一个百炼应用,来获取大模型的推理 API 服务,用于实现 AI 助手。

b.提醒:百炼提供的新用户免费额度可以完全覆盖本教程所需资源消耗。额度消耗完后按 token 计费,相比自行部署大模型可以显著降低初期投入成本。
1.1 创建应用
1、进入百炼控制台的我的应用,在页面右侧点击新增应用。在对话框,选择智能体应用并创建。
2、依次点击红色方框。
屏幕截图 2024-09-22 134029.png
3、在应用设置页面,模型选择通义千问-Plus,其他参数保持默认。
提醒:您也可以选择输入一些 Prompt,比如设置一些人设以引导大模型更好的应对客户咨询。
{3B7E8269-3706-4305-8159-D4A1F9D7AC08}.png
4、在页面右侧可以提问验证模型效果。不过您会发现,目前它还无法准确回答你们公司的商品信息。点击右上角的发布,我们将在后面的步骤中去解决这一问题。
{B7419ABD-7B87-4CA5-AE8D-AB16018B2AB5}.png
1.2 获取调用 API 所需的凭证
1、为了在后续通过API调用大模型应用的能力,我们需要获取一个百炼应用的API-KEY和应用ID:

在顶部导航栏右侧,点击人型图标,点击API-KEY进入我的API-KEY页面。在页面右侧,点击创建我的API-KEY,在弹出窗口中创建一个新 API-KEY。保存 API-KEY 到本地用于后续配置。
{03C26C8C-95B1-45EA-B618-ABA559376DC7}.png
2、在应用列表中可以查看所有百炼应用 ID。保存应用 ID 到本地用于后续配置。
{C0AB5716-F277-49E4-AB7A-56E7D09FD3EF}.png
二、 搭建示例网站
在让 AI 助手能准确回答问题之前,我们可以先尝试快速将 AI 助手集成到网站中。

您可以通过我们提前准备好的应用模板,快速搭建一个空白的示例网站,用于模拟您的企业官网或者其他站点。详细步骤如下:

函数计算提供的免费试用额度可以完全覆盖本教程所需资源消耗。额度消耗完后按量计费,对于本教程所涉及的 web 服务,只在有访问的情况下会产生费用。
2.1 创建应用
1、请打开我们提供的函数计算应用模板,参考下图选择直接部署、并填写前面获取到的百炼应用 ID 以及 API-KEY。

2、然后其他表单项保持默认,点击页面左下角的创建并部署默认环境,等待项目部署完成即可(预计耗时 1 分钟)。

3、这里需要填写百炼应用 ID 和 API-KEY,是因为我们预置的应用模板中包含了通过百炼应用调用大模型的代码,以便您在后续快速完成体验。
a.提醒:这里需要填写百炼应用 ID 和 API-KEY,是因为我们预置的应用模板中包含了通过百炼应用调用大模型的代码,以便您在后续快速完成体验。
{A8F4044C-DAFB-493E-B828-29E5B10A7333}.png
2.2 访问网站
应用部署完成后,您可以在应用详情的环境信息中找到示例网站的访问域名,点击即可查看,确认示例网站已经部署成功。
{69545EEA-169B-4EB8-B464-D264534AB7C1}.png
{65F51259-B9B7-4CE7-99EF-A2D6392C80E3}.png

  1. 为网站增加 AI 助手
    3.1 增加 AI 助手相关代码
    示例工程中包含了被注释的引入 AI 助手代码,您需要找到并解除注释。详细操作步骤如下:

1、回到应用详情页,在环境详情的最底部找到函数资源,点击函数名称,进入函数详情页
{B8A772DC-427F-4CC8-87DF-068F75698870}.png
2、进入函数详情页后,在代码视图中找到public/index.html文件,然后取消③所在位置的代码注释即可。
{5807F002-989B-49F2-BD1D-2CA86746F036}.png
3、最后点击部署代码,等待部署完成即可。
四、为 AI 助手增加私有知识
1、我们还需要为大模型应用配置知识库
2、假设您在一家售卖智能手机的公司工作。您的网站上会有很多与智能手机相关的信息,如支持双卡双待、屏幕、电池容量、内存等信息。不同机型的详细配置清单参考:百炼系列手机产品介绍.docx。
3、 配置知识库
a.接下来,我们可以尝试让大模型在面对客户问题时参考这份文档,以产出一个更准确的回答和建议。

上传文件:在百炼控制台的数据管理中点击导入数据,根据引导上传我们虚构的百炼系列手机产品介绍:
{6BF71E4F-14DD-439F-9CBF-7B3A24677CF4}.png
b.建立索引:进入知识索引,根据引导创建一个新的知识库,并选择刚才上传的文件,其他参数保持默认即可。知识库将为上一步骤中准备的文档建立索引,以便后续大模型回答时检索参考。
{62F166B6-3BA1-4603-9EE0-EAB688832662}.png
{223EBF1F-48A7-4470-B117-3DCACE324044}.png
c.选择向量存储类型时,如果您希望集中存储、灵活管理多个应用的向量数据,可选择ADB-PG。
{3654275F-FA40-4E08-A22F-8262D77DFDA3}.png
d.引用知识:完成知识库的创建后,可以返回我的应用进入到刚才创建的应用设置界面,打开知识检索增强开关、选择知识库,测试验证符合预期后点击发布
4、检验效果
{861497E9-8B0E-40D2-935C-DE36D29F1E00}.png

目录
相关文章
|
11月前
|
人工智能 API
LLMs.txt:AI时代网站的"智能身份证"
当AI模型因HTML冗余代码浪费50%上下文窗口时,LLMs.txt正成为网站与AI对话的新语言。这个轻量级标准已被Anthropic、Cursor等企业采用,让AI理解内容效率提升3倍。
503 0
|
9月前
|
数据采集 人工智能 程序员
PHP 程序员如何为 AI 浏览器(如 ChatGPT Atlas)优化网站
OpenAI推出ChatGPT Atlas,标志AI浏览器新方向。虽未颠覆现有格局,但为开发者带来新机遇。PHP建站者需关注AI爬虫抓取特性,优化技术结构(如SSR、Schema标记)、提升内容可读性与语义清晰度,并考虑未来agent调用能力。通过robots.txt授权、结构化数据、内容集群与性能优化,提升网站在AI搜索中的可见性与引用机会,提前布局AI驱动的流量新格局。
470 8
|
人工智能 弹性计算 自然语言处理
Bolt.diy:AI全栈开发,一句话生成网站
Bolt.diy是一个AI驱动的Web开发工具,支持通过自然语言Prompt直接生成、编辑和部署全栈应用,无需本地环境配置。本次实验基于DeepSeek于2025年5月28日发布了DeepSeek-R1-0528升级版本,显著提升了编程能力。
Bolt.diy:AI全栈开发,一句话生成网站
|
存储 人工智能 移动开发
AppFlow —— 给您的网站或企微添加AI助手
AppFlow AI助手提供灵活配置,助您轻松实现AI工具的Web页面访问与多种集成方式(H5页面、悬浮框等)。支持自定义页面生成及样式调整,满足个性化需求。文中详细介绍了创建AI助手、模型配置、Web页面集成等步骤,并展示不同场景下的使用效果。此外,还提供了企业微信集成、模型管理和插件扩展等相关操作指引,助力高效利用AI助手提升工作体验。
1449 15
AppFlow —— 给您的网站或企微添加AI助手
|
数据采集 人工智能 自然语言处理
FireCrawl:开源 AI 网络爬虫工具,自动爬取网站及子页面内容,预处理为结构化数据
FireCrawl 是一款开源的 AI 网络爬虫工具,专为处理动态网页内容、自动爬取网站及子页面而设计,支持多种数据提取和输出格式。
6360 71
FireCrawl:开源 AI 网络爬虫工具,自动爬取网站及子页面内容,预处理为结构化数据
|
人工智能 JSON 前端开发
分享一个非常实用的在线AI工具网站
在线工具网是一个包含AI工具、站长工具、开发人员工具、实用工具、AI助手,能够提供最新AI知识库、在线编码、正则表达式、加密解密、二维码生成、在线进制转换、JSON解析格式化、JavaScript、css、httml格式化/混淆/压缩、时间戳转换等免费在线AI工具平台。
488 34
|
人工智能
AI对话网站一键生成系统源码
可以添加进自己的工具箱,也可以嵌入自己博客的页面中,引流效果杠杠的,新拟态设计风格,有能力的大佬可以进行二开,仅提供学习,用户可输入网站名称、AI默认的开场白、AI头像昵称、AI网站中引流的你的网站等等内容,所有生成的网页全部保存到你的服务器上
406 27
AI对话网站一键生成系统源码
|
人工智能 自然语言处理 语音技术
AI 工具导航网站分享
一个致力于成为您在 AI 世界探索旅程中的可靠伙伴,为您搭建起一座通往便捷与高效的桥梁的网站。
470 29
AI 工具导航网站分享
|
人工智能 自然语言处理 前端开发
用户说 | 零基础用通义灵码 AI 程序员开发个人笔记网站
通义灵码是一款基于通义大模型的智能编码辅助工具,支持自然语言生成代码、单元测试生成、代码注释生成等功能,兼容多种主流IDE和编程语言。对于零基础用户,只需通过自然语言描述需求,通义灵码即可自动生成代码,帮助快速开发个人笔记网站,极大简化开发流程,提升效率。
|
人工智能 自然语言处理 搜索推荐
grok3 ai官网 _ Grok3官方网站入口 _ grok3网页版下载
人工智能领域风起云涌,xAI 近期重磅发布了其最新旗舰模型 Grok 3,同时推出了全新的 Grok iOS 及 Web 应用体验。此举标志着 xAI 正式向 AI 霸主地位发起冲击!
3400 6