主页 > 开源代码 >

使用Dify将AI机器人嵌入到你的前端页面中及chrome的扩展应用

开源代码
2025-08-23 04:48:01

目录 1 博主有话说2 前提环境3 Dify创建个聊天助手应用4 将AI聊天机器人嵌入到html中5 将AI聊天机器人设置为chrome的扩展应用6 博主增语

1 博主有话说

那博主话不多说，先展示一下成果！这个界面是使用dify配置的一个“聊天助手”的应用，助手使用的是deepseek-r1的大模型，并将这个机器人嵌入了html中。

那么是如何实现的呢？？请看下文！

2 前提环境

这里只展示一下我的环境，你只要有下面的工具就行

电脑：芯片->Apple M1 Max 内存->32G本地安装的deepseek-r1 7b（ps：也可以选择远程的大模型服务器）本地安装的dify

如果你还没有安装，可以参考我的另一篇文章：Mac下Deepseek及Dify的本地搭建

3 Dify创建个聊天助手应用

进入到dify的主页面

创建个聊天助手的应用

点击创建此时我们就获取了一个聊天助手了，点击右上角的发布+更新保存到数据库中

4 将AI聊天机器人嵌入到html中

点击右上角的发布+嵌入网站会自动为我们生成代码，用于嵌入到自己的网页中前两个是iframe和js方式嵌入到用户的业务代码里，最后一个是嵌入到chrome的扩展应用中，作为插件使用

写一个html，嵌入iframe代码，这里加了点样式（ps：代码我是用cursor生成的！！方便且高效！！！😆）

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>聊天机器人页面</title> <style> /* 设置页面基本样式 */ body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; /* 添加这行使页面内容居中 */ } /* 设置标题样式 */ h1 { margin-bottom: 20px; /* 添加一些底部间距 */ } /* 设置聊天机器人容器样式 */ .chatbot-container { width: 800px; height: 700px; margin: 0 auto; border: 1px solid #eee; border-radius: 8px; overflow: hidden; } </style> </head> <body> <h1>欢迎使用聊天机器人</h1>  <div class="chatbot-container"> <iframe src="http://localhost/chatbot/GM63ZTSrVPSufNzi" style="width: 100%; height: 100%; min-height: 700px" frameborder="0" allow="microphone"> </iframe> </div> </body> </html>

接下来就是展示了，使用谷歌打开你的html

是不是还是挺便捷的！

5 将AI聊天机器人设置为chrome的扩展应用

点击右上角的发布+嵌入网站点击安装安装Dify Chrome浏览器扩展跳转到安装Dify扩展程序的界面，安装！我这里安装完了打开扩展程序，将url粘贴进来，点击save

这时候你就有一个网页版本的聊天机器人了，新打开一个网页，一定是要有数据的网页，空白页不展示我这里访问了deepseek了这里就有机器人了！！！点它！！！和它聊天！！！

6 博主增语

Dify使开发AI应用变得简单，毕竟Dify是封装了调用大模型的技术栈，肯定是有局限性，但是现有的功能也可以实现不少有用的场景啦！！！可以参考Dify的探索模块，里面有大佬们配置的模板！！

标签：

使用Dify将AI机器人嵌入到你的前端页面中及chrome的扩展应用由讯客互联开源代码栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“使用Dify将AI机器人嵌入到你的前端页面中及chrome的扩展应用”

上一篇
基于Linux平台的多实例RTSP|RTMP直播播放器深度解

下一篇
抖音试水AI分身；腾讯AI战略调整架构；百度旗下小度官宣接入