{"id":5069,"date":"2025-12-01T09:08:48","date_gmt":"2025-12-01T17:08:48","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/semantic-kernel\/?p=5069"},"modified":"2025-12-08T00:26:15","modified_gmt":"2025-12-08T08:26:15","slug":"the-golden-triangle-of-agentic-development-with-microsoft-agent-framework-ag-ui-devui-opentelemetry-deep-dive","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/agent-framework\/the-golden-triangle-of-agentic-development-with-microsoft-agent-framework-ag-ui-devui-opentelemetry-deep-dive\/","title":{"rendered":"The &#8220;Golden Triangle&#8221; of Agentic Development with Microsoft Agent Framework: AG-UI, DevUI &#038; OpenTelemetry Deep Dive"},"content":{"rendered":"<p class=\"code-line\" dir=\"auto\" data-line=\"4\">In the explosive era of Agentic AI, we&#8217;re not just seeking more powerful models\u2014we&#8217;re searching for a development experience that lets developers\u00a0<strong>actually get some sleep<\/strong>. When building Agents locally, we&#8217;ve traditionally faced three major challenges:<\/p>\n<ol class=\"code-line\" dir=\"auto\" data-line=\"11\">\n<li class=\"code-line\" dir=\"auto\" data-line=\"6\"><strong>Black-Box Execution<\/strong>: What is my Agent thinking? Why is it stuck?\u00a0<em>(Debugging is hard)<\/em><\/li>\n<li class=\"code-line\" dir=\"auto\" data-line=\"7\"><strong>Interaction Silos<\/strong>: I&#8217;ve built my Agent\u2014how do I quickly demo a beautiful UI to stakeholders?\u00a0<em>(Productization is hard)<\/em><\/li>\n<li class=\"code-line\" dir=\"auto\" data-line=\"8\"><strong>Performance Blind Spots<\/strong>: How many tokens are being consumed? Where&#8217;s the latency?\u00a0<em>(Optimization is hard)<\/em><\/li>\n<\/ol>\n<p class=\"code-line\" dir=\"auto\" data-line=\"15\">Today, I&#8217;ll walk you through a classic case from Microsoft Agent Framework Samples\u2014<strong><a href=\"https:\/\/github.com\/microsoft\/Agent-Framework-Samples\/tree\/main\/09.Cases\/GHModel.AI\" data-href=\"https:\/\/github.com\/microsoft\/Agent-Framework-Samples\/tree\/main\/09.Cases\/GHModel.AI\">GHModel.AI<\/a><\/strong>\u2014to reveal the\u00a0<strong>&#8220;Golden Triangle&#8221;<\/strong>\u00a0development stack that perfectly solves these pain points:\u00a0<strong>DevUI<\/strong>,\u00a0<strong>AG-UI<\/strong>, and\u00a0<strong>OpenTelemetry<\/strong>.<\/p>\n<p class=\"code-line\" dir=\"auto\" data-line=\"17\">Let&#8217;s explore how this powerful combination empowers the entire local development lifecycle.<\/p>\n<div>\n<h2 class=\"code-line\" dir=\"auto\" data-line=\"16\">Phase 1: Creation \u2014 Standing on the Shoulders of GitHub Models<\/h2>\n<p class=\"code-line\" dir=\"auto\" data-line=\"18\">In the\u00a0<code>GHModel.AI<\/code>\u00a0case, we first address the &#8220;brain&#8221; problem.<\/p>\n<p class=\"code-line\" dir=\"auto\" data-line=\"20\">Traditional local development is often constrained by computing resources or expensive API keys. This case cleverly leverages\u00a0<strong>GitHub Models<\/strong>. As an evangelist, I must strongly recommend this combination:<\/p>\n<ul class=\"code-line\" dir=\"auto\" data-line=\"22\">\n<li class=\"code-line\" dir=\"auto\" data-line=\"22\"><strong>Zero-Barrier Access<\/strong>: Call GPT-4o, Llama 3, and other cutting-edge models directly with your GitHub account\u2014no complex Azure configuration or credit card binding required.<\/li>\n<li class=\"code-line\" dir=\"auto\" data-line=\"23\"><strong>Standardized SDK<\/strong>: Through Agent Framework&#8217;s abstraction layer, we can switch model backends with just a few lines of code.<\/li>\n<\/ul>\n<p class=\"code-line\" dir=\"auto\" data-line=\"25\">In this case&#8217;s code structure, you&#8217;ll find Agent definitions become exceptionally clear. No more spaghetti-style Python\/C# scripts\u2014just structured &#8220;declarations.&#8221;<\/p>\n<h3 id=\"%F0%9F%92%BB-quick-start-code\" class=\"code-line\" dir=\"auto\" data-line=\"27\">Quick Start Code<\/h3>\n<h3 class=\"code-line\" dir=\"auto\" data-line=\"72\"><strong>Python:<\/strong><\/h3>\n<pre class=\"prettyprint language-py\"><code class=\"language-py\"># Python - Create Agents with GitModels\r\n\r\nfrom agent_framework.openai import OpenAIChatClient  \r\n\r\nchat_client = OpenAIChatClient(\r\n    base_url=os.environ.get(\"GITHUB_ENDPOINT\"),    # \ud83c\udf10 GitHub Models API endpoint\r\n    api_key=os.environ.get(\"GITHUB_TOKEN\"),        # \ud83d\udd11 Authentication token\r\n    model_id=os.environ.get(\"GITHUB_MODEL_ID\")     # \ud83c\udfaf Selected AI model\r\n)\r\n\r\n\r\n# Create Concierge Agent\r\n\r\nCONCIERGE_AGENT_NAMES = \"Concierge\"\r\nCONCIERGE_AGENT_INSTRUCTIONS = \"\"\"\r\n            You are an are hotel concierge who has opinions about providing the most local and authentic experiences for travelers.\r\n            The goal is to determine if the front desk travel agent has recommended the best non-touristy experience for a traveler.\r\n            If so, state that it is approved.\r\n            If not, provide insight on how to refine the recommendation without using a specific example. \"\"\"\r\n\r\n\r\nconcierge_agent = chat_client.create_agent(\r\n    instructions=CONCIERGE_AGENT_INSTRUCTIONS,\r\n    name=CONCIERGE_AGENT_NAMES,\r\n)\r\n\r\n# Create FrontDesk Agent\r\n\r\nFRONTEND_AGENT_NAMES = \"FrontDesk\"\r\nFRONTEND_AGENT_INSTRUCTIONS = \"\"\"\r\n            You are a Front Desk Travel Agent with ten years of experience and are known for brevity as you deal with many customers.\r\n            The goal is to provide the best activities and locations for a traveler to visit.\r\n            Only provide a single recommendation per response.\r\n            You're laser focused on the goal at hand.\r\n            Don't waste time with chit chat.\r\n            Consider suggestions when refining an idea.\r\n            \"\"\"\r\n\r\n\r\nfrontend_agent = chat_client.create_agent(\r\n    instructions=FRONTEND_AGENT_INSTRUCTIONS,\r\n    name=FRONTEND_AGENT_NAMES,\r\n)\r\n\r\n# Create Workflow\r\n\r\nfrontend_executor = AgentExecutor(frontend_agent, id=\"frontend_agent\")\r\nconcierge_executor = AgentExecutor(concierge_agent, id=\"concierge_agent\")\r\n\r\nworkflow = (\r\nWorkflowBuilder()\r\n.set_start_executor(frontend_executor)\r\n.add_edge(frontend_executor, concierge_executor)\r\n.build()\r\n)\r\n<\/code><\/pre>\n<h3 class=\"code-line\" dir=\"auto\" data-line=\"72\"><strong>.NET:<\/strong><\/h3>\n<pre class=\"prettyprint language-py\"><code class=\"language-cs language-csharp\">\/\/ .NET - Creat Agents with GitHub Models\r\n\r\nvar openAIOptions = new OpenAIClientOptions()\r\n{\r\n    Endpoint = new Uri(github_endpoint)\r\n};\r\n        \r\nvar openAIClient = new OpenAIClient(new ApiKeyCredential(github_token), openAIOptions);\r\n\r\nvar chatClient = openAIClient.GetChatClient(github_model_id).AsIChatClient();\r\n\r\nconst string ReviewerAgentName = \"Concierge\";\r\nconst string ReviewerAgentInstructions = @\"\r\n    You are an are hotel concierge who has opinions about providing the most local and authentic experiences for travelers.\r\n    The goal is to determine if the front desk travel agent has recommended the best non-touristy experience for a traveler.\r\n    If so, state that it is approved.\r\n    If not, provide insight on how to refine the recommendation without using a specific example. \";\r\n\r\nconst string FrontDeskAgentName = \"FrontDesk\";\r\nconst string FrontDeskAgentInstructions = @\"\"\"\r\n    You are a Front Desk Travel Agent with ten years of experience and are known for brevity as you deal with many customers.\r\n    The goal is to provide the best activities and locations for a traveler to visit.\r\n    Only provide a single recommendation per response.\r\n    You're laser focused on the goal at hand.\r\n    Don't waste time with chit chat.\r\n    Consider suggestions when refining an idea.\r\n    \"\"\";\r\n\r\nvar reviewerAgentBuilder = new AIAgentBuilder(chatClient.CreateAIAgent(\r\n    name: ReviewerAgentName,\r\n    instructions: ReviewerAgentInstructions));\r\n\r\nvar frontDeskAgentBuilder = new AIAgentBuilder(chatClient.CreateAIAgent(\r\n    name: FrontDeskAgentName,\r\n    instructions: FrontDeskAgentInstructions));\r\n\r\nAIAgent reviewerAgent = reviewerAgentBuilder.Build(serviceProvider);\r\nAIAgent frontDeskAgent = frontDeskAgentBuilder.Build(serviceProvider);\r\n\r\n\/\/ Create Workflow\r\nvar workflow = new WorkflowBuilder(frontDeskAgent)\r\n.AddEdge(frontDeskAgent, reviewerAgent)\r\n.Build();\r\n<\/code><\/pre>\n<h2 id=\"%F0%9F%94%AC-phase-2-testing--debugging--devuis-god-mode-view\" class=\"code-line\" dir=\"auto\" data-line=\"59\">Phase 2: Testing &amp; Debugging \u2014 DevUI<\/h2>\n<p class=\"code-line\" dir=\"auto\" data-line=\"61\">This is the highlight of this article. Previously, we debugged Agents using the\u00a0<code>print()<\/code>\u00a0method and endless console logs. Now, we have\u00a0<strong>DevUI<\/strong>.<\/p>\n<p class=\"code-line\" dir=\"auto\" data-line=\"63\"><strong>What is DevUI?<\/strong>\u00a0It&#8217;s an &#8220;inner-loop&#8221; tool designed specifically for developers within Agent Framework. When\u00a0<code>GHModel.AI<\/code>\u00a0runs, DevUI provides a visual console:<\/p>\n<ol class=\"code-line\" dir=\"auto\" data-line=\"66\">\n<li class=\"code-line code-active-line\" dir=\"auto\" data-line=\"66\">\n<p class=\"code-line\" dir=\"auto\" data-line=\"66\"><strong>Chain of Thought Visualization<\/strong>: You no longer need to guess why the Agent chose Tool A over Tool B. In DevUI, you can see each\u00a0<strong>Reasoning<\/strong>,\u00a0<strong>Action<\/strong>, and\u00a0<strong>Observation<\/strong>\u00a0step like a flowchart. This isn&#8217;t just debugging\u2014it&#8217;s an &#8220;X-ray&#8221; of Agent behavior.<\/p>\n<\/li>\n<li class=\"code-line\" dir=\"auto\" data-line=\"69\">\n<p class=\"code-line\" dir=\"auto\" data-line=\"69\"><strong>Real-Time State Monitoring<\/strong>: What&#8217;s stored in the Agent&#8217;s Memory? Is the context overflowing? DevUI lets you view Conversation State in real-time, quickly pinpointing the root cause of &#8220;hallucinations.&#8221;<\/p>\n<\/li>\n<\/ol>\n<h3 class=\"code-line\" dir=\"auto\" data-line=\"72\"><strong>Python:<\/strong><\/h3>\n<\/div>\n<pre class=\"prettyprint language-default\"><code class=\"language-default\">cd GHModel.Python.AI\/GHModel.Python.AI.Workflow.DevUI\r\npip install agent-framework agent-framework-devui python-dotenv\r\npython main.py\r\n# Browser opens automatically at http:\/\/localhost:8090<\/code><\/pre>\n<h3><strong>.NET:<\/strong><\/h3>\n<pre class=\"prettyprint language-default\"><code class=\"language-default\">cd GHModel.dotNET.AI\/GHModel.dotNET.AI.Workflow.DevUI\r\ndotnet run\r\n# DevUI: https:\/\/localhost:50516\/devui\r\n# OpenAI API: https:\/\/localhost:50516\/v1\/responses\r\n<\/code> <strong>DevUI dramatically shortens the \"write-run-fix\" feedback loop. For complex Multi-Agent collaboration scenarios, it's your command center.<\/strong><\/pre>\n<div>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/semantic-kernel\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.24.26-PM.webp\"><img decoding=\"async\" class=\"alignnone wp-image-5078 size-full\" src=\"https:\/\/devblogs.microsoft.com\/semantic-kernel\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.24.26-PM.webp\" alt=\"Screenshot 2025 12 01 at 4 24 26 PM image\" width=\"1897\" height=\"961\" srcset=\"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.24.26-PM.webp 1897w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.24.26-PM-300x152.webp 300w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.24.26-PM-1024x519.webp 1024w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.24.26-PM-768x389.webp 768w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.24.26-PM-1536x778.webp 1536w\" sizes=\"(max-width: 1897px) 100vw, 1897px\" \/><\/a><\/p>\n<h2 class=\"code-line\" dir=\"auto\" data-line=\"108\">Phase 3: Delivery &amp; Interaction \u2014 AG-UI<\/h2>\n<p class=\"code-line\" dir=\"auto\" data-line=\"110\">Debugging is done, and your boss says: &#8220;Can you send me a link so I can try it too?&#8221; At this moment,\u00a0<strong>don&#8217;t hand-write a React frontend!<\/strong>\u00a0What you need is\u00a0<strong>AG-UI<\/strong>.<\/p>\n<p class=\"code-line\" dir=\"auto\" data-line=\"113\"><strong>What does AG-UI solve?<\/strong>\u00a0It&#8217;s a standardized\u00a0<strong>Agent-User interaction protocol<\/strong>. In the\u00a0<code>GHModel.AI<\/code>\u00a0case, by integrating AG-UI:<\/p>\n<ul class=\"code-line\" dir=\"auto\" data-line=\"116\">\n<li class=\"code-line\" dir=\"auto\" data-line=\"116\"><strong>Out-of-the-Box Frontend<\/strong>: Agent Framework can directly expose interfaces compliant with the AG-UI protocol. Any frontend supporting AG-UI (like components provided by CopilotKit) can connect directly to your local Agent.<\/li>\n<li class=\"code-line\" dir=\"auto\" data-line=\"117\"><strong>Streaming Responses &amp; Generative UI<\/strong>: It supports not only text streaming but also server-side UI component pushing. This means your Agent can dynamically render charts, tables, or cards on the user interface based on content\u2014no frontend hardcoding required.<\/li>\n<\/ul>\n<h3 class=\"code-line\" dir=\"auto\" data-line=\"119\">AG-UI Supported Features<\/h3>\n<ul class=\"code-line\" dir=\"auto\" data-line=\"121\">\n<li class=\"code-line\" dir=\"auto\" data-line=\"121\">\u2705 Streaming responses (SSE)<\/li>\n<li class=\"code-line\" dir=\"auto\" data-line=\"122\">\u2705 Backend tool rendering<\/li>\n<li class=\"code-line\" dir=\"auto\" data-line=\"123\">\u2705 Human-in-the-Loop approvals<\/li>\n<li class=\"code-line\" dir=\"auto\" data-line=\"124\">\u2705 Shared state synchronization<\/li>\n<li class=\"code-line\" dir=\"auto\" data-line=\"125\">\u2705 Seamless\u00a0<a href=\"https:\/\/copilotkit.ai\/\" data-href=\"https:\/\/copilotkit.ai\/\">CopilotKit<\/a>\u00a0integration<\/li>\n<\/ul>\n<h3 class=\"code-line\" dir=\"auto\" data-line=\"127\">Implementation Examples<\/h3>\n<p><strong>Python Server:<\/strong><\/p>\n<pre class=\"prettyprint language-py\"><code class=\"language-py\"># Server \u2014 Register AG-UI endpoint\r\nfrom agent_framework_ag_ui import add_agent_framework_fastapi_endpoint\r\nfrom workflow import workflow\r\n\r\napp = FastAPI()\r\nagent = workflow.as_agent(name=\"Travel Agent\")\r\nadd_agent_framework_fastapi_endpoint(app, agent, \"\/\")<\/code><\/pre>\n<h3 class=\"code-line\" dir=\"auto\" data-line=\"127\"><strong>.NET Server:<\/strong><\/h3>\n<pre class=\"prettyprint language-cs language-csharp\"><code class=\"language-cs language-csharp\">\/\/ Program.cs \u2014 ASP.NET Core AG-UI endpoint registration\r\nusing Microsoft.Agents.AI.Hosting.AGUI.AspNetCore;\r\n\r\nvar builder = WebApplication.CreateBuilder(args);\r\nbuilder.Services.AddAGUI();\r\n\r\nvar app = builder.Build();\r\nAIAgent workflowAgent = ChatClientAgentFactory.CreateTravelAgenticChat();\r\napp.MapAGUI(\"\/\", workflowAgent);\r\nawait app.RunAsync();<\/code><\/pre>\n<p class=\"code-line\" dir=\"auto\" data-line=\"127\">The transition from DevUI to AG-UI is a seamless switch from &#8220;developer perspective&#8221; to &#8220;user perspective.&#8221; We can use CopilotKit to create UI<\/p>\n<p dir=\"auto\" data-line=\"127\"><a href=\"https:\/\/devblogs.microsoft.com\/semantic-kernel\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.27.36-PM.webp\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5079\" src=\"https:\/\/devblogs.microsoft.com\/semantic-kernel\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.27.36-PM.webp\" alt=\"Screenshot 2025 12 01 at 4 27 36 PM image\" width=\"1799\" height=\"959\" srcset=\"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.27.36-PM.webp 1799w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.27.36-PM-300x160.webp 300w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.27.36-PM-1024x546.webp 1024w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.27.36-PM-768x409.webp 768w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.27.36-PM-1536x819.webp 1536w\" sizes=\"(max-width: 1799px) 100vw, 1799px\" \/><\/a><\/p>\n<h2 id=\"%F0%9F%93%8A-phase-4-performance-tracking--opentelemetrys-precision-metrics\" class=\"code-line\" dir=\"auto\" data-line=\"158\">Phase 4: Performance Tracking \u2014 OpenTelemetry<\/h2>\n<p class=\"code-line\" dir=\"auto\" data-line=\"160\">Before the Agent goes live, besides functioning correctly, we must answer:\u00a0<strong>&#8220;Is it fast? Is it expensive?&#8221;<\/strong><\/p>\n<p class=\"code-line\" dir=\"auto\" data-line=\"162\">This is where\u00a0<strong>OpenTelemetry (OTel)<\/strong>\u00a0enters. In Agent Framework, OpenTelemetry support is\u00a0<strong>baked-in<\/strong>. In\u00a0<code>GHModel.AI<\/code>\u00a0code, typically just one line of configuration (like\u00a0<code>AddOpenTelemetry<\/code>\u00a0or\u00a0<code>setup_observability<\/code>):<\/p>\n<ol class=\"code-line\" dir=\"auto\" data-line=\"165\">\n<li class=\"code-line\" dir=\"auto\" data-line=\"165\">\n<p class=\"code-line\" dir=\"auto\" data-line=\"165\"><strong>Distributed Tracing<\/strong>: When a request comes in, passes through routing, Guardrails, calls GitHub Models, and returns results\u2014OTel generates a complete Flame Graph. You can precisely see:<\/p>\n<ul class=\"code-line\" dir=\"auto\" data-line=\"167\">\n<li class=\"code-line\" dir=\"auto\" data-line=\"167\">How long does network I\/O take?<\/li>\n<li class=\"code-line\" dir=\"auto\" data-line=\"168\">How long does LLM Token generation take?<\/li>\n<li class=\"code-line\" dir=\"auto\" data-line=\"169\">How long does local logic processing take?<\/li>\n<\/ul>\n<\/li>\n<li class=\"code-line\" dir=\"auto\" data-line=\"171\">\n<p class=\"code-line\" dir=\"auto\" data-line=\"171\"><strong>Cost Transparency<\/strong>: Combined with OTel Metrics, we can monitor Token consumption rates. This is crucial for cost estimation when migrating from GitHub Models (free\/prototype stage) to Azure OpenAI (paid\/production stage).<\/p>\n<\/li>\n<\/ol>\n<h3 id=\"%F0%9F%94%A7-quick-setup\" class=\"code-line\" dir=\"auto\" data-line=\"174\">\ud83d\udd27 Quick Setup<\/h3>\n<p class=\"code-line\" dir=\"auto\" data-line=\"176\"><strong>Python:<\/strong><\/p>\n<pre class=\"prettyprint language-py\"><code class=\"language-py\"># Enable telemetry in one line\r\nfrom agent_framework.observability import setup_observability\r\nfrom agent_framework import setup_logging\r\n\r\nsetup_observability()\r\nsetup_logging()<\/code><\/pre>\n<p dir=\"auto\" data-line=\"176\"><strong>.NET:<\/strong><\/p>\n<pre class=\"prettyprint language-cs language-csharp\"><code class=\"language-cs language-csharp\">\/\/ OpenTelemetry configuration\r\nvar tracerProvider = Sdk.CreateTracerProviderBuilder()\r\n    .AddSource(\"*Microsoft.Agents.AI\")\r\n    .AddOtlpExporter(options =&gt; options.Endpoint = new Uri(\"http:\/\/localhost:4317\"))\r\n    .Build();<\/code><\/pre>\n<p dir=\"auto\" data-line=\"176\"><strong>Environment Variables:<\/strong><\/p>\n<pre class=\"prettyprint language-default\"><code class=\"language-default\">ENABLE_OTEL=true\r\nENABLE_SENSITIVE_DATA=true               # Enable sensitive data logging in dev\r\nOTLP_ENDPOINT=http:\/\/localhost:4317       # Aspire Dashboard \/ OTLP Collector\r\nAPPLICATIONINSIGHTS_CONNECTION_STRING=... # Azure Application Insights (optional)<\/code><\/pre>\n<h3 class=\"code-line\" dir=\"auto\" data-line=\"203\">\ud83d\udcc8 Visualization Options<\/h3>\n<table class=\"code-line\" dir=\"auto\" data-line=\"205\">\n<thead class=\"code-line\" dir=\"auto\" data-line=\"205\">\n<tr class=\"code-line\" dir=\"auto\" data-line=\"205\">\n<th>Platform<\/th>\n<th>Use Case<\/th>\n<th>Quick Start<\/th>\n<\/tr>\n<\/thead>\n<tbody class=\"code-line\" dir=\"auto\" data-line=\"207\">\n<tr class=\"code-line\" dir=\"auto\" data-line=\"207\">\n<td><strong>Aspire Dashboard<\/strong><\/td>\n<td>Local development<\/td>\n<td><code>docker run --rm -d -p 18888:18888 -p 4317:18889 mcr.microsoft.com\/dotnet\/aspire-dashboard:latest<\/code><\/td>\n<\/tr>\n<tr class=\"code-line\" dir=\"auto\" data-line=\"208\">\n<td><strong>Application Insights<\/strong><\/td>\n<td>Production monitoring<\/td>\n<td>Set\u00a0<code>APPLICATIONINSIGHTS_CONNECTION_STRING<\/code><\/td>\n<\/tr>\n<tr class=\"code-line\" dir=\"auto\" data-line=\"209\">\n<td><strong>Grafana Dashboards<\/strong><\/td>\n<td>Advanced visualization<\/td>\n<td><a href=\"https:\/\/aka.ms\/amg\/dash\/af-agent\" data-href=\"https:\/\/aka.ms\/amg\/dash\/af-agent\">Agent Overview<\/a>,\u00a0<a href=\"https:\/\/aka.ms\/amg\/dash\/af-workflow\" data-href=\"https:\/\/aka.ms\/amg\/dash\/af-workflow\">Workflow Overview<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 dir=\"auto\" data-line=\"213\"><a href=\"https:\/\/devblogs.microsoft.com\/semantic-kernel\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.30.48-PM.webp\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5080\" src=\"https:\/\/devblogs.microsoft.com\/semantic-kernel\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.30.48-PM.webp\" alt=\"Screenshot 2025 12 01 at 4 30 48 PM image\" width=\"1898\" height=\"540\" srcset=\"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.30.48-PM.webp 1898w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.30.48-PM-300x85.webp 300w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.30.48-PM-1024x291.webp 1024w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.30.48-PM-768x219.webp 768w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.30.48-PM-1536x437.webp 1536w\" sizes=\"(max-width: 1898px) 100vw, 1898px\" \/><\/a><\/h2>\n<h2 class=\"code-line\" dir=\"auto\" data-line=\"213\">Architecture Overview<\/h2>\n<h2 class=\"code-line\" dir=\"auto\" data-line=\"213\"><a href=\"https:\/\/devblogs.microsoft.com\/semantic-kernel\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.13.34-PM.webp\"><img decoding=\"async\" class=\"aligncenter wp-image-5073 size-full\" src=\"https:\/\/devblogs.microsoft.com\/semantic-kernel\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.13.34-PM.webp\" alt=\"Screenshot 2025 12 01 at 4 13 34 PM image\" width=\"617\" height=\"756\" srcset=\"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.13.34-PM.webp 617w, https:\/\/devblogs.microsoft.com\/agent-framework\/wp-content\/uploads\/sites\/78\/2025\/12\/Screenshot-2025-12-01-at-4.13.34-PM-245x300.webp 245w\" sizes=\"(max-width: 617px) 100vw, 617px\" \/><\/a><\/h2>\n<h2 id=\"%F0%9F%8E%AF-summary-build-your-efficiency-closed-loop\" class=\"code-line\" dir=\"auto\" data-line=\"250\">Summary: Build Your &#8220;Efficiency Closed Loop&#8221;<\/h2>\n<p class=\"code-line\" dir=\"auto\" data-line=\"252\">Returning to the\u00a0<code>GHModel.AI<\/code>\u00a0case, it&#8217;s not just a code sample\u2014it demonstrates best practice architecture for modern Agent development:<\/p>\n<table class=\"code-line\" dir=\"auto\" data-line=\"254\">\n<thead class=\"code-line\" dir=\"auto\" data-line=\"254\">\n<tr class=\"code-line\" dir=\"auto\" data-line=\"254\">\n<th>Layer<\/th>\n<th>Tool<\/th>\n<th>Purpose<\/th>\n<\/tr>\n<\/thead>\n<tbody class=\"code-line\" dir=\"auto\" data-line=\"256\">\n<tr class=\"code-line\" dir=\"auto\" data-line=\"256\">\n<td><strong>Model Layer<\/strong><\/td>\n<td>GitHub Models<\/td>\n<td>Rapidly validate ideas with free, cutting-edge models<\/td>\n<\/tr>\n<tr class=\"code-line\" dir=\"auto\" data-line=\"257\">\n<td><strong>Debug Layer<\/strong><\/td>\n<td>DevUI<\/td>\n<td>Gain &#8220;God Mode View,&#8221; iterate logic quickly<\/td>\n<\/tr>\n<tr class=\"code-line\" dir=\"auto\" data-line=\"258\">\n<td><strong>Presentation Layer<\/strong><\/td>\n<td>AG-UI<\/td>\n<td>Standardize output, generate user interfaces in seconds<\/td>\n<\/tr>\n<tr class=\"code-line\" dir=\"auto\" data-line=\"259\">\n<td><strong>Observability Layer<\/strong><\/td>\n<td>OpenTelemetry<\/td>\n<td>Data-driven optimization, no more guesswork<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"%F0%9F%92%A1-final-thoughts\" class=\"code-line\" dir=\"auto\" data-line=\"262\">Final Thoughts<\/h2>\n<p class=\"code-line\" dir=\"auto\" data-line=\"264\">I encourage every Agent developer to dive deep into the code in\u00a0<strong><a href=\"https:\/\/github.com\/microsoft\/Agent-Framework-Samples\" data-href=\"https:\/\/github.com\/microsoft\/Agent-Framework-Samples\">Agent-Framework-Samples<\/a><\/strong>. Stop debugging AI with Notepad\u2014arm yourself with these modern weapons and go build next-generation intelligent applications!<\/p>\n<p class=\"code-line\" dir=\"auto\" data-line=\"266\">The combination of\u00a0<strong>GitHub Models<\/strong>\u00a0for rapid prototyping,\u00a0<strong>DevUI<\/strong>\u00a0for visual debugging,\u00a0<strong>AG-UI<\/strong>\u00a0for seamless user interaction, and\u00a0<strong>OpenTelemetry<\/strong>\u00a0for production-grade observability represents a paradigm shift in how we build agentic applications.<\/p>\n<p class=\"code-line\" dir=\"auto\" data-line=\"268\"><strong>Your Agent development journey starts here. The future is agentic. Let&#8217;s build it together!<\/strong><\/p>\n<h2 id=\"%F0%9F%93%9A-resources\" class=\"code-line\" dir=\"auto\" data-line=\"273\">Resources<\/h2>\n<ol>\n<li>\u00a0Microsoft Agent Framework\u00a0\u00a0<a href=\"https:\/\/github.com\/microsoft\/agent-framework\">Microsoft Agent Framework GitHub Repo<\/a><\/li>\n<li>\u00a0Microsoft Agent Framework Samples <a href=\"https:\/\/github.com\/microsoft\/Agent-Framework-Samples\" data-href=\"https:\/\/github.com\/microsoft\/Agent-Framework-Samples\">Microsoft Agent Framework Samples<\/a><\/li>\n<li>\u00a0Microsoft Agent Framework DevUI Samples <a href=\"https:\/\/github.com\/microsoft\/agent-framework\/tree\/main\/python\/samples\/getting_started\/devui\" data-href=\"https:\/\/github.com\/microsoft\/agent-framework\/tree\/main\/python\/samples\/getting_started\/devui\">DevUI Getting Started<\/a><\/li>\n<li>\u00a0Microsoft Agent Framework Observability Guide <a href=\"https:\/\/github.com\/microsoft\/agent-framework\/tree\/main\/python\/samples\/getting_started\/observability\" data-href=\"https:\/\/github.com\/microsoft\/agent-framework\/tree\/main\/python\/samples\/getting_started\/observability\">Observability Samples<\/a><\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In the explosive era of Agentic AI, we&#8217;re not just seeking more powerful models\u2014we&#8217;re searching for a development experience that lets developers\u00a0actually get some sleep. When building Agents locally, we&#8217;ve traditionally faced three major challenges: Black-Box Execution: What is my Agent thinking? Why is it stuck?\u00a0(Debugging is hard) Interaction Silos: I&#8217;ve built my Agent\u2014how do [&hellip;]<\/p>\n","protected":false},"author":106050,"featured_media":5048,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[78,143,27,34],"tags":[],"class_list":["post-5069","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-net","category-agent-framework","category-agents","category-python-2"],"acf":[],"blog_post_summary":"<p>In the explosive era of Agentic AI, we&#8217;re not just seeking more powerful models\u2014we&#8217;re searching for a development experience that lets developers\u00a0actually get some sleep. When building Agents locally, we&#8217;ve traditionally faced three major challenges: Black-Box Execution: What is my Agent thinking? Why is it stuck?\u00a0(Debugging is hard) Interaction Silos: I&#8217;ve built my Agent\u2014how do [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-json\/wp\/v2\/posts\/5069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-json\/wp\/v2\/users\/106050"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-json\/wp\/v2\/comments?post=5069"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-json\/wp\/v2\/posts\/5069\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-json\/wp\/v2\/media\/5048"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-json\/wp\/v2\/media?parent=5069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-json\/wp\/v2\/categories?post=5069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/agent-framework\/wp-json\/wp\/v2\/tags?post=5069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}