⚠️ This blog post was created with the help of AI tools. Yes, I used a bit of magic from language models to organize my thoughts and automate the boring parts, but the geeky fun and the 🤖 in C# are 100% mine.

📺 VIDEO COMING SOON — stay tuned!
(I’ll embed the YouTube player here as soon as the video goes live.)

Hola friends! Bruno here 🙋‍♂️ — Cloud Advocate at Microsoft, lover of .NET, AI, Blazor, and the occasional dog-walk debugging session with ACE 🐶.

Today we’re diving into something very cool for .NET AI developers:
👉 How to expose your Agent Framework agents to the web using AG-UI
👉 How Aspire orchestrates everything for you
👉 And how this makes building multi-client, AI-powered experiences ridiculously easier

This post accompanies my 5-minute video… which is coming in hot 🔥
Until then, let’s go step-by-step and explore what AG-UI brings to your .NET AI apps.

🎯 What We’re Building

A Web Server hosting an Agent Framework agent, orchestrated by Aspire, and consumed by two different websites via AG-UI.

Here’s the diagram that I also use in the video:

           ┌──────────────────────┐
           │     Aspire App       │
           │    (Orchestrator)    │
           └───────────▲──────────┘
                       │
           ┌───────────┴──────────┐
           │    Web Server         │
           │ (Agent Hosted Here)   │
           └───────▲───────▲──────┘
                   │       │
          AG-UI     │       │     AG-UI
                   │       │
      ┌────────────┘       └──────────────┐
      │                                     │
┌───────────────┐                 ┌────────────────┐
│  Website A     │                 │   Website B    │
│  AG-UI Client  │                 │  AG-UI Client  │
└───────────────┘                 └────────────────┘

🧠 What is AG-UI?

AG-UI is the Agent-User Interaction protocol used by Agent Framework apps to:

• Stream messages (via SSE)
• Sync agent → UI state
• Trigger human-in-the-loop workflows
• Connect multiple frontends to the same agent

If you’re building AI-powered web apps with .NET — AG-UI is your new best friend.

🧪 Demo – Web Server Agent + Web Client + Aspire Orchestration

We’ll use the sample repo structure:

samples/
  AgentFx-AIWebChatApp-AG-UI/
    Agents/
    Web/
    AppHost/

1. Create & Publish Agent (Agents/Program.cs)

In the Agents project you’ll find Program.cs like this (trimmed):

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddAGUI();
builder.Services.AddHttpClient();

var app = builder.Build();

// create the agent
var azureOpenAiEndpoint = builder.Configuration["AZURE_OPENAI_ENDPOINT"];
var openAiKey = builder.Configuration["AZURE_OPENAI_KEY"];
var client = new AzureOpenAIClient(new Uri(azureOpenAiEndpoint), new AzureKeyCredential(openAiKey)).GetChatClient();

var agent = client.AsIChatClient().CreateAIAgent(
    name: "aiwebagent",
    instructions: "You are an AI assistant..." );

app.MapAGUI("/", agent);

await app.RunAsync();

Key points

• The AddAGUI() call wires up the AG-UI protocol endpoint.
• MapAGUI("/") exposes the agent at the root.
• The agent is built from Azure OpenAI client (could be swapped).

2. Web Front-end (Web/Program.cs)

In the Web project’s Program.cs we have:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

var aguiServerUrl = builder.Configuration["AGUI_SERVER_URL"];

builder.Services.AddHttpClient<AGUIChatClient>(client =>
    client.BaseAddress = new Uri(aguiServerUrl));

builder.Services.AddScoped(sp => {
    var chatClient = sp.GetRequiredService<AGUIChatClient>();
    return chatClient.CreateAIAgent(
        name: "web-client-agent",
        description: "Talks to remote AG-UI server");
});

var app = builder.Build();
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
await app.RunAsync();

Key points

• AGUI_SERVER_URL from config points to the agent host.
• AGUIChatClient wraps HTTP + SSE to communicate with the agent.
• The front-end is a Blazor app (could be any web tech) that uses the agent via DI.

3. Aspire Orchestration (AppHost/AppHost.cs)

In the AppHost project:

var builder = DistributedApplication.CreateBuilder(args);

var agents = builder.AddProject<Projects.Agents>("agents")
    .WithEndpoint("http", e => e.Port = 8888);

var web = builder.AddProject<Projects.Web>("web")
    .WithReference(agents)
    .WithEnvironment("AGUI_SERVER_URL", agents.GetEndpoint("http")!.Uri);

web.WithExternalHttpEndpoints();

await builder.Build().RunAsync();

Key points

• AddProject defines the components (Agents, Web).
• WithReference(agents) ensures Web knows about the agent project.
• WithEnvironment("AGUI_SERVER_URL", …) injects the correct URL dynamically.
• WithExternalHttpEndpoints() exposes the web front-end externally (for QA/dev).

🏁 Final Thoughts

AG-UI + Agent Framework + Aspire is what I call the modern stack for .NET AI applications:

• Agents with memory, tools, streaming, context
• Web UI with state sync and rich interactivity
• Full orchestration with Aspire
• Easy deployment to Azure Container Apps or Azure App Service

It’s everything we wished we had when trying to build AI-powered web apps without reinventing the streaming / workflow / UI plumbing.

📺 VIDEO COMING SOON

Stay tuned — I’ll embed the YouTube video right here as soon as it’s uploaded.

🔗 Useful References

• Agent Framework Overview
  https://learn.microsoft.com/en-us/agent-framework/overview/agent-framework-overview
• AG-UI Integration (C#)
  https://learn.microsoft.com/en-us/agent-framework/integrations/ag-ui/?pivots=programming-language-csharp
• Generative AI for .NET
  https://aka.ms/genainet
• Full Blazor Aspire AG-UI demo
  https://github.com/microsoft/Generative-AI-for-beginners-dotnet/tree/main/samples/AgentFx/AgentFx-AIWebChatApp-AG-UI