ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

AG-UI协议:解决AI Agent与前端交互难题,开发效率提升10倍!

AG-UI协议:解决AI Agent与前端交互难题,开发效率提升10倍! 随着 AI Agent 在企业中应用越来越广AI Agent 在落地过程中MCP 解决了 AI Agent 到 Tools 之间的通信标准A2A 解决了 AI Agent 到 AI Agent 之间的通信标准。但是仍缺少一块用户到 AI Agent 的通信协议。AG-UI 协议横空出世专为解决前端应用与 AI Agent 的通信交互而设计。AG-UI 让你能够轻松地在网页、APP、应用程序或嵌入式设备中集成 AI 助手、AI 客服和智能问答 UI避免了为每个应用程序重复开发基础功能的麻烦也省去了处理交互逻辑的烦恼。AG-UI 完善了 AI 协议栈专注于构建 AI Agent 与用户前端之间的桥梁。它采用事件驱动的设计定义了16种标准事件并支持 SSE、WebSocket 和 Webhook 等传输方式与 LangGraph、CrewAI 等框架兼容。它就像是为你的前端安装了一个 AI “大脑”无需绑定到特定的模型或框架一套协议就能满足所有的交互需求。为什么需要 AG-UI每个 AI Agent 后端都有自己的工具调用、ReAct 样式规划、状态差异和输出格式机制。如果你使用 LangGraph前端将实现自定义的 WebSocket 逻辑、杂乱的 JSON 格式和特定于 LangGraph 的 UI 适配器。但要迁移到 CrewAI/Dify 等一切都必须进行调整这样工作量大大增加。Github 地址https://github.com/ag-ui-protocol/ag-ui使用文档地址https://docs.ag-ui.com/introduction下文对 AG-UI 详细剖析之。—1—AG-UI 架构设计剖析第一、AG-UI 架构设计AG-UI 使用一个轻量级、事件驱动的协议来连接 AI Agents 和前端应用程序架构设计如图所示Front-end通过 AG-UI 进行通信的应用聊天或任何启用 AI 应用 AI Agent A前端可以直接连接的 AI Agent无需通过代理Secure Proxy一个中介代理安全地将前端的请求路由到多个 AI AgentsAI Agent B 和 C由代理服务管理的 AI Agents。第二、AG-UI 工作机制AG-UI 的核心工作机制非常简洁而优雅如下图所示客户端通过 POST 请求启动一次 AI Agent 会话随后建立一个 HTTP 流可通过 SSE/WebSocket 等传输协议用于实时监听事件每条事件都有类型和元信息MetadataAI Agent 持续将事件流式推送给 UIUI 端根据每条事件实时更新界面与此同时UI 也可反向发送事件、上下文信息供 AI Agent 使用。AG-UI 不再是单向的信息流而是一种真正的双向“心跳式”交互机制。AG-UI 就像 REST 是客户端到服务器请求的标准一样AG-UI 将实时 AI Agent 更新流式传输回 UI 的标准。从技术上讲AG-UI 使用服务器发送事件SSE将结构化 JSON 事件流式传输到前端。每个事件都有一个显式的有效负载比如Python 字典中的 keysTEXT_MESSAGE_CONTENT 用于令牌流式处理TOOL_CALL_START 以显示工具执行情况STATE_DELTA 更新共享状态代码、数据等AGENT_HANDOFF 在 AI Agent 之间顺利传递控制权。并且 AG-UI 带有 TypeScript 和 Python 的 SDK即插即用适用于任何技术栈如下图所示在上图中来自 AI Agent 的响应并不特定于任何工具包。这是一个标准化的 AG-UI 响应。AG-UI 提供了前端 TypeScript 和后端 Python 的 SDK可无缝接入到现有 AI Agent 代码中核心模块包括RunAgentInput运行 AI Agent 的输入参数Message用户助手通信和工具使用Context提供给 AI Agent 的上下文信息Tool定义 AI Agent 可以调用的函数StateAI Agent 状态管理。1、前端接入npm install ag-ui/core npm install ag-ui/client2、后端 Python 端接入from ag_ui.core import TextMessageContentEvent, EventType from ag_ui.encoder import EventEncoder # Create an event event TextMessageContentEvent( typeEventType.TEXT_MESSAGE_CONTENT, message_idmsg_123, deltaHello, world! ) # Initialize the encoder encoder EventEncoder() # Encode the event encoded_event encoder.encode(event) print(encoded_event) # Output: data: {type:TEXT_MESSAGE_CONTENT,messageId:msg_123,delta:Hello, world!}\n\n第三、AG-UI 关键特性 轻量级设计简单易于理解与扩展 支持多种传输协议Server-Sent EventsSSE、WebSocket、Webhook 任你选择 真正双向同步支持实时对话、工具调用、上下文更新等 框架无关LangGraph、CrewAI、Mastra 等框架均可无缝对接️ 宽松的 Schema 匹配策略低耦合、高兼容降低开发门槛⚙️ 即插即用开源协议前端比如React/Vue快速集成无门槛。第四、AG-UI、A2A、MCP 协议对比AG-UI 明确且专门针对 AI Agent-用户交互层。它不与诸如 A2AAI Agent 到 AI Agent 协议和 MCP模型上下文协议等协议竞争。比如同一个 AI Agent 可能通过 A2A 与另一个 AI Agent 通信同时通过 AG-UI 与用户通信同时调用由 MCP Server 提供的工具。这些协议在 AI Agent 生态系统中起到互补的作用AG-UI处理人在循环中的交互和流式 UI 更新A2A促进 AI Agent 到 AI Agent 之间的通信和协作MCP在不同模型之间标准化工具调用和上下文处理。如何学习AI大模型我在一线互联网企业工作十余年里指导过不少同行后辈。帮助很多人得到了学习和成长。我意识到有很多经验和知识值得分享给大家也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限很多互联网行业朋友无法获得正确的资料得到学习提升故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。这份完整版的大模型 AI 学习和面试资料已经上传CSDN朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】第一阶段从大模型系统设计入手讲解大模型的主要方法第二阶段在通过大模型提示词工程从Prompts角度入手更好发挥模型的作用第三阶段大模型平台应用开发借助阿里云PAI平台构建电商领域虚拟试衣系统第四阶段大模型知识库应用开发以LangChain框架为例构建物流行业咨询智能问答系统第五阶段大模型微调开发借助以大健康、新零售、新媒体领域构建适合当前领域大模型第六阶段以SD多模态大模型为主搭建了文生图小程序案例第七阶段以大模型平台应用与开发为主通过星火大模型文心大模型等成熟大模型构建大模型行业应用。学会后的收获• 基于大模型全栈工程实现前端、后端、产品经理、设计、数据分析等通过这门课可获得不同能力• 能够利用大模型解决相关实际项目需求 大数据时代越来越多的企业和机构需要处理海量数据利用大模型技术可以更好地处理这些数据提高数据分析和决策的准确性。因此掌握大模型应用开发技能可以让程序员更好地应对实际项目需求• 基于大模型和企业数据AI应用开发实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能 学会Fine-tuning垂直训练大模型数据准备、数据蒸馏、大模型部署一站式掌握• 能够完成时下热门大模型垂直领域模型训练能力提高程序员的编码能力 大模型应用开发需要掌握机器学习算法、深度学习框架等技术这些技术的掌握可以提高程序员的编码能力和分析能力让程序员更加熟练地编写高质量的代码。1.AI大模型学习路线图2.100套AI大模型商业化落地方案3.100集大模型视频教程4.200本大模型PDF书籍5.LLM面试题合集6.AI产品经理资源合集获取方式有需要的小伙伴可以保存图片到wx扫描二v码免费领取【保证100%免费】
返回列表