人工智能AI 应用可观测性链路追踪数据可视化AI 评测前端后端【免费下载链接】agentscope-studioA development-oriented visualization toolkit项目地址https://gitcode.com/gh_mirrors/ag/agentscope-studio点击查看免费下载AgentScope Studio是一个专为 AI 智能体开发打造的本地可视化调试工具核心能力是运行时可视化与实时用户输入托管它把智能体的一次次运行变成聊天窗口把每一次大模型调用、工具执行变成可点击的追踪链路让你在浏览器里就能完成开发、调试和评测。本文带你 5 分钟看懂这套工具的完整玩法。一、它解决了智能体开发的什么痛点调试 AI 智能体时大家通常面对这样的困境黑盒运行智能体在命令行跑只能看日志猜它到底干了什么交互割裂智能体需要用户输入时程序阻塞等待只能回到终端敲键盘链路难查一次回复背后有多轮 LLM 调用和工具执行token 消耗、耗时全凭猜测。AgentScope Studio 的思路是把这三件事全部搬到浏览器里以Chatbot 风格的界面呈现智能体的运行过程并基于OpenTelemetry协议接收追踪数据。它的技术栈为层级技术前端TypeScript、React、Vite、TailwindCSS通信HTTPtRPC WebSocket后端Node.js、Express数据库TypeORM SQLite 更多架构细节见 docs/tutorial/zh_CN/tutorial/overview.md。二、快速上手3 步启动可视化调试台前置要求Node.js ≥ 20.0.0、npm ≥ 10.0.0。第 1 步从 NPM 一键安装推荐方式npm install -g agentscope/studio # 启动 AgentScope-Studio as_studio第 2 步在你的 AgentScope 应用中指定 Studio 地址完成连接import agentscope agentscope.init( # 替换为你启动 AgentScope-Studio 的端口 studio_urlhttp://localhost:3000, )第 3 步打开浏览器访问http://localhost:3000运行实例、聊天界面和追踪数据就会实时出现在页面上。 也可选择 Docker 部署见 docker/README.md或从源码启动。完整的安装与配置说明参考 docs/tutorial/zh_CN/tutorial/quick_start.md。三、运行时可视化像刷聊天窗口一样调试智能体运行可视化是 AgentScope Studio 最直观的亮点。项目页面按Projects项目→ Runs运行实例两级组织你的可观测数据一个项目下按时间顺序堆叠着每次运行实例点击任意一条即可在 Chatbot 风格的界面中查看该次运行的完整交互历史与状态。在上面的示例中你可以看到左侧运行实例列表实时显示每条运行的状态Done / Running / Error中间User 与智能体的多轮对话气泡工具调用、回复内容逐条流式呈现右侧 Data View切换 RUN / MESSAGE / TRACE 三个标签页查看运行状态、模型调用次数、Token 消耗分布等统计数据。一个容易上手的细节智能体的一次回复调用一次reply实际上会产生多条消息提示消息、工具结果等因此 Studio 在消息之上引入了reply回复概念将多条消息组织为一个完整的回复单元你可以按replyId或msg.id灵活切换查看粒度。 相关设计说明参考 docs/tutorial/zh_CN/develop/project.md。四、实时用户输入托管智能体不再干等终端输入这是 AgentScope Studio 最具托管感的特性当 AgentScope 应用连接到 Studio 后智能体需要用户输入时Studio 会自动在网页端弹出输入框并通过 WebSocket 把内容实时推送回 Python 智能体。你不再需要盯着终端直接在浏览器里回复智能体即可。它支持在同一个运行实例中包含多个UserAgent实例实现多用户协同交互的场景。整个交互流程如下流程拆解为 6 步Agent 发送请求智能体通过POST /trpc/requestUserInput向 Studio 服务器发起输入请求服务器保存并推送Studio 将请求落库并经 WebSocket 推送到 Web 客户端用户输入用户在网页界面上以指定角色输入内容客户端回传Web 客户端通过 WebSocket 把输入发回服务器服务器校验转发服务器验证后转发给智能体的 WebSocket 连接Agent 接收续跑智能体拿到输入继续执行。服务端的核心路由与 Socket 事件分发逻辑可查看 packages/server/src/trpc/socket.ts。此外输入请求还支持structuredInput字段即按 JSON Schema 生成结构化输入表单适合表单类、选择题类的人机交互。如果你不想用 AgentScope 框架也可以直接按三个 API 对接功能接口路径方法注册运行实例/trpc/registerRunPOST推送消息/trpc/pushMessagePOST请求用户输入/trpc/requestUserInputPOST五、Trace 追踪看穿每一次大模型调用与工具执行除了聊天窗口Studio 的 Trace 页面基于OpenTelemetry 语义规范和OTLP 协议把智能体运行时的每个环节变成可钻取的调用树LLM 调用、Agent 调用、工具调用、输入输出、执行耗时一目了然。概览页列出所有上报到 Studio 的链路鼠标悬停在链路名称后的图标上即可查看 Trace ID 等元信息。点击进入详情页可以看到链路的调用顺序与层级关系并查看每次调用详细的输入输出对于 LLM、Agent 这类 AI 调用输入输出按 OpenTelemetry 生成式 AI 语义规范的结构化方式展示Function、Format 等常规调用则遵循 AgentScope 扩展语义规范。在All Attributes区域你能看到本次调用的全部关键元信息 完整的语义规范定义与集成方式包括 LoongSuite / OpenTelemetry 探针接入见 docs/tutorial/zh_CN/develop/tracing.md。六、开箱即用的内置智能体Friday如果你还没有自己的智能体项目Studio 内置了一个由 AgentScope 构建的实验性智能体Friday可以直接用来体验上述全部能力也适合作为二次开发的起点回答 AgentScope 相关问题充当开发助手支持元工具meta tool、实时操控/中断、会话状态管理规划可视化、长期记忆等高级功能持续接入中。首次使用时在设置页配置模型、API KEY 与工具参数即可开聊Friday 的完整源码也开源在仓库中入口是 packages/app/friday/main.py其中hook.py负责把消息实时推送到 Studio 前端utils/connect.py维护用于实时操控与中断的 WebSocket 连接是学习如何把智能体接入 Studio的最佳样例。七、写在最后把智能体调试聊天化本质是让运行时可视化回答它做了什么让实时用户输入托管解决它等我做什么再配合 OpenTelemetry 级的 Trace 数据回答它做得怎么样。AgentScope Studio 把这三件事打包进了一个本地部署、零成本起步的工具里。 建议的体验路径先按第二节的三步启动 Studio → 用内置 Friday 跑一轮对话感受运行时可视化 → 再看 Trace 页面理解调用链路 → 最后在自己的 AgentScope 应用里加上studio_url参数完成接入。赞分享人工智能AI 应用可观测性链路追踪数据可视化AI 评测前端后端【免费下载链接】agentscope-studioA development-oriented visualization toolkit项目地址https://gitcode.com/gh_mirrors/ag/agentscope-studio点击查看免费下载相关推荐把TaskStateGuard接入AI智能体运行时Ledger、ReconcilePolicy与reconcile_restart API完整指南把TaskStateGuard接入AI智能体运行时Ledger、ReconcilePolicy与reconcile_restart API完整指南 TaskS把AI Agent变成你的同事Deft Agent员工入职与托管运行时完整教程把AI Agent变成你的同事Deft Agent员工入职与托管运行时完整教程 Deft 是一个可自托管的开源团队工作区让人类和 AI Agent 共享聊天5分钟上手Coze Studio数据可视化AI智能体运行指标实时监控指南5分钟上手Coze Studio数据可视化AI智能体运行指标实时监控指南 Coze Studio是一款功能强大的AI智能体开发平台提供一站式可视化工具帮助人工智能AI AgentRAG低代码后端前端工作流自动化上一篇Vercel React 性能优化最佳实践8 大分类规则体系与 69 条实战规则深度解析下一篇Current State — Money创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考