从零打造一个跨框架通用的 AI Agent 插件
📝 前言
在 AI 大模型时代，越来越多的 Web 应用需要集成智能对话功能。然而，前端技术栈的多样性（Vue、React、jQuery 等）给开发者带来了一个难题：如何开发一个一次编写、到处运行的 AI 对话插件？
本文记录了 AI Agent Plugin 项目从诞生到完成的全过程，分享技术选型、架构设计、核心实现以及遇到的挑战与解决方案。
🎯 项目背景与目标
痛点分析
在实际项目中，我们遇到以下问题：
- 技术栈碎片化：公司不同项目使用 Vue 2、Vue 3、React、jQuery 等不同技术栈
- 重复开发成本高：每个技术栈都要单独开发一套 AI 对话组件
- 维护困难：功能更新需要同步修改多个版本
- 样式冲突：插件样式容易被宿主项目覆盖
设计目标
基于以上痛点，我们确定了以下核心目标：
- ✅ 跨框架兼容：一套代码支持 Vue、React、jQuery 等任意前端框架
- ✅ 零依赖：不依赖任何第三方框架，纯原生实现
- ✅ 样式隔离：避免与宿主项目样式冲突
- ✅ TypeScript 支持：提供完整的类型定义
- ✅ 主题定制：支持浅色/深色主题和自定义配色
- ✅ 灵活配置：支持流式/普通响应、四角定位等