微软 Agent Framework 的“黄金三角”

在 Agentic AI（智能体 AI）爆发的时代，我们追求的不只是更强的大模型——而是让开发者能真正睡个好觉的开发体验。

过去，本地开发智能体（Agent）时，开发者常被三大痛点折磨：

•执行黑箱：我的 Agent 在想什么？为啥卡住了？（调试太难）•交互孤岛：Agent 写好了，怎么快速给老板/客户演示一个漂亮 UI？（产品化太难）•性能盲区：Token 花了多少？延迟在哪一步？（优化太难）

今天，我们就以微软官方示例项目 GHModel.AI为例，揭秘解决这三大痛点的“黄金三角”开发栈：DevUI + AG-UI + OpenTelemetry✨

GHModel.AI的第一步，是解决“大脑”问题。

传统本地开发受限于算力或昂贵的 API 密钥。而本例巧妙接入 GitHub Models，强烈推荐这个组合：

•零门槛接入：用 GitHub 账号直接调用 GPT-4o、Llama 3 等前沿模型，无需 Azure 配置，无需绑信用卡。•标准化 SDK：通过 Agent Framework 的抽象层，几行代码就能切换模型后端。

快速上手代码（.NET）// 使用 GitHub Models 创建智能体var openAIOptions = new openAIClientOptions{ Endpoint = new Uri(github_endpoint)};var OpenAIClient = new OpenAIClient(new ApiKeyCredential(github_token), openAIOptions);var chatClient = openAIClient.GetChatClient(github_model_id).AsIChatClient;// 定义两个智能体：前台客服 + 审核员const string ReviewerAgentName = "Concierge";const string ReviewerAgentInstructions = @" 你是酒店礼宾员，擅长为旅行者推荐地道、非游客化的本地体验。 任务：判断前台推荐是否足够好。 若好，直接批准；若不够好，给出优化方向（但不要具体举例）。";const string FrontDeskAgentName = "FrontDesk";const string FrontDeskAgentInstructions = @""" 你是有十年经验的前台旅行顾问，以简洁高效著称。 任务：为旅行者推荐最佳活动或地点。 每次只给一个推荐，聚焦目标，拒绝闲聊。 可根据反馈优化建议，但保持简洁。""";// 构建智能体var reviewerAgent = new AIAgentBuilder(chatClient.CreateAIAgent(ReviewerAgentName, ReviewerAgentInstructions)).Build(serviceProvider);var frontDeskAgent = new AIAgentBuilder(chatClient.CreateAIAgent(FrontDeskAgentName, FrontDeskAgentInstructions)).Build(serviceProvider);// 定义工作流：前台 → 审核员var workflow = new WorkflowBuilder(frontDeskAgent) .AddEdge(frontDeskAgent, reviewerAgent) .Build;print和满屏日志猜 Agent 到底在干啥。

现在：用DevUI—— Agent Framework 专为开发者打造的内循环（inner-loop）调试神器！

运行GHModel.AI时，访问 DevUI，你将获得：

•思维链可视化：Agent 为什么选工具 A 而不是 B？每一步的推理（Reasoning）→ 行动（Action）→ 观察（Observation）都像流程图一样清晰呈现。这不叫调试，这叫“透视 Agent 行为”！•实时状态监控：Agent 的记忆里存了啥？上下文是否爆了？对话状态实时查看，快速定位“幻觉”根源。

cd GHModel.dotnet.AI/GHModel.dotnet.AI.Workflow.DevUIdotnet run# DevUI 地址：https://localhost:50516/devui

对于复杂多智能体协作场景，DevUI 就是你的 指挥中心！

别手搓 React 前端了！你需要的是AG-UI（Agent Generic UI）。

它是一套 标准化的智能体-用户交互协议。在中集成后：

•开箱即用前端：Agent Framework 自动暴露 AG-UI 兼容接口，任何支持 AG-UI 的前端（如 CopilotKit 组件）都能直接连上你的本地 Agent。•流式响应 + 动态 UI：不仅支持文本流，还能从服务端推送 UI 组件！Agent 可根据内容动态渲染图表、卡片、表格——前端无需硬编码！

✅ AG-UI 支持特性

•流式响应（SSE）•后端工具渲染（如地图、图表）•人工审批节点（Human-in-the-Loop）•共享状态同步•无缝对接 CopilotKit

一行代码接入 AG-UI// Program.csusing Microsoft.Agents.AI.Hosting.AGUI.AspNetCore;var builder = WebApplication.CreateBuilder(args);builder.Services.AddAGUI;var app = builder.Build;AIAgent workflowAgent = ChatClientAgentFactory.CreateTravelAgenticChat;app.MapAGUI("/", workflowAgent); // 挂载 AG-UI 端点await app.RunAsync;

从 DevUI 到 AG-UI，是从 “开发者视角”到“用户视角”的无缝切换！

OpenTelemetry（OTel）就是答案。Agent Framework 已原生集成 OTel，通常只需一行配置（如AddOpenTelemetry）：

分布式追踪：从请求进入、路由、守卫规则（GuardrAIls）、调用 GitHub 模型到返回——完整火焰图（Flame Graph）一目了然：

•网络 I/O 耗时多少？•LLM 生成 Token 花了多久？•本地逻辑处理是否拖后腿？

•成本透明化：结合 OTel 指标，实时监控 Token 消耗。从免费原型（GitHub Models）迁移到生产付费（Azure OpenAI）时，成本估算不再拍脑袋！

快速启用 OTel平台 适用场景 快速启动命令 Aspire Dashboard本地开发 docker run -d -p 18888:18888 -p 4317:18889 mcr.microsoft.com/dotnet/aspire-dashboard:latestApplication Insights生产监控 设置 APPLICATIONINSIGHTS_CONNECTION_STRINGGrafana高级可视化 查看 Agent 概览、工作流概览 不只是一个示例，更是现代智能体开发的最佳实践架构：层级 工具 价值 模型层GitHub Models 用免费前沿模型快速验证想法 调试层DevUI “上帝视角”洞察行为，快速迭代逻辑 交互层AG-UI 标准化输出，秒级生成用户界面 可观测层OpenTelemetry 数据驱动优化，告别经验主义

建议每位智能体开发者深入研究 Agent-Framework-Samples中的代码。

别再用记事本调试 AI 了！

拿起 DevUI、AG-UI、OpenTelemetry 这三件“现代武器”，去构建下一代智能应用吧！

GitHub Models 快速原型 + DevUI 可视化调试 + AG-UI 无缝交互 + OpenTelemetry 生产级可观测

—— 这就是 Agentic 开发的新范式。

你的智能体开发之旅，从此刻开始。未来已来，一起构建！