Build a Frontend for your Microsoft Agent Framework Agents with AG-UI

npx copilotkit@latest init -m microsoft-agent-framework 

# Using pnpm (recommended) pnpm install # Using npm npm install # Using yarn yarn install # Using bun bun install 

gh auth token 

cd agent dotnet user-secrets set GitHubToken "<your-token>" cd .. 

# Using pnpm pnpm dev # Using npm npm run dev # Using yarn yarn dev # Using bun bun run dev 

dotnet new web -n AGUIServer cd AGUIServer dotnet add package Microsoft.Agents.AI.Hosting.AGUI.AspNetCore dotnet add package Microsoft.Extensions.AI.OpenAI dotnet add package OpenAI 

using Microsoft.Agents.AI; using Microsoft.Agents.AI.Hosting.AGUI.AspNetCore; using Microsoft.AspNetCore.Http.Json; using Microsoft.Extensions.AI; using Microsoft.Extensions.Options; using OpenAI; using System.ComponentModel; using System.Text.Json.Serialization; 

// ... // Create a new WebApplicationBuilder instance with command-line arguments WebApplicationBuilder builder = WebApplication.CreateBuilder(args); // Configure JSON Serialization Options builder.Services.ConfigureHttpJsonOptions(options => options.SerializerOptions.TypeInfoResolverChain.Add(ProverbsAgentSerializerContext.Default)); // Register AG-UI Services builder.Services.AddAGUI(); // Build the WebApplication instance from the builder // This compiles all registered services and configurations WebApplication app = builder.Build(); // ... 

// ... // Get Required Services from Dependency Injection Container // Retrieve the logger factory for creating loggers var loggerFactory = app.Services.GetRequiredService<ILoggerFactory>(); // Retrieve JSON options for serialization configuration var jsonOptions = app.Services.GetRequiredService<IOptions<JsonOptions>>(); // Create Agent Factory Instance // Instantiate the ProverbsAgentFactory with: // - Application configuration (for accessing appsettings, environment variables, etc.) // - Logger factory (for creating loggers within the factory) // - JSON serializer options (for serializing agent data) var agentFactory = new ProverbsAgentFactory(builder.Configuration, loggerFactory, jsonOptions.Value.SerializerOptions); // Map AG-UI Endpoint // Map the root path ("/") to the AG-UI agent endpoint // The CreateProverbsAgent() method returns a configured AI agent instance // This allows the agent to handle requests at the root URL app.MapAGUI("/", agentFactory.CreateProverbsAgent()); // Start the web application and begin listening for HTTP requests // This is an async operation that will run until the application is stopped await app.RunAsync(); // ... 

// ... public class ProverbsState { // Initialize the Proverbs list as an empty list to avoid null reference issues public List<string> Proverbs { get; set; } = new List<string>(); } // ... 

// ... public class ProverbsAgentFactory { // Store configuration for accessing settings (like API tokens) private readonly IConfiguration _configuration; // Reference to the shared state instance private readonly ProverbsState _state; // OpenAI client instance for making API calls private readonly OpenAIClient _openAiClient; // Logger instance for logging agent activities private readonly ILogger _logger; // JSON serializer options for serializing/deserializing agent data private readonly System.Text.Json.JsonSerializerOptions _jsonSerializerOptions; // ... } // ... 

// ... public class ProverbsAgentFactory { // Store configuration for accessing settings (like API tokens) private readonly IConfiguration _configuration; // Reference to the shared state instance private readonly ProverbsState _state; // OpenAI client instance for making API calls private readonly OpenAIClient _openAiClient; // Logger instance for logging agent activities private readonly ILogger _logger; // JSON serializer options for serializing/deserializing agent data private readonly System.Text.Json.JsonSerializerOptions _jsonSerializerOptions; // Step 3.1: Constructor - Initialize the factory with dependencies // This constructor is called by the dependency injection container public ProverbsAgentFactory(IConfiguration configuration, ProverbsState state) { // Store injected dependencies _configuration = configuration; _state = new(); // Step 3.2: Retrieve the GitHub token from configuration // The token is used to authenticate with the Azure OpenAI endpoint // If the token is not found, throw an exception with helpful instructions var githubToken = _configuration["GitHubToken"] ?? throw new InvalidOperationException( "GitHubToken not found in configuration. " + "Please set it using: dotnet user-secrets set GitHubToken \"<your-token>\" " + "or get it using: gh auth token"); // Step 3.3: Create and configure the OpenAI client // - Use the GitHub token as the API key credential // - Set the endpoint to Azure's inference API endpoint _openAiClient = new OpenAIClient( new System.ClientModel.ApiKeyCredential(githubToken), new OpenAIClientOptions { Endpoint = new Uri("https://models.inference.ai.azure.com") }); } // ... } 

// ... public class ProverbsAgentFactory { // Store configuration for accessing settings (like API tokens) private readonly IConfiguration _configuration; // Reference to the shared state instance private readonly ProverbsState _state; // OpenAI client instance for making API calls private readonly OpenAIClient _openAiClient; // Logger instance for logging agent activities private readonly ILogger _logger; // JSON serializer options for serializing/deserializing agent data private readonly System.Text.Json.JsonSerializerOptions _jsonSerializerOptions; // ... // Create Proverbs Agent // This method creates and configures the AI agent with its tools and capabilities public AIAgent CreateProverbsAgent() { // Get Chat Client // Retrieve a chat client for the "gpt-4o-mini" model // Convert it to the IChatClient interface required by the agent framework var chatClient = _openAiClient.GetChatClient("gpt-4o-mini").AsIChatClient(); // Create Chat Client Agent // Create a ChatClientAgent that wraps the chat client with agent capabilities // - name: Identifier for the agent // - description: System prompt that describes the agent's role and behavior // This instructs the agent to always check the current proverbs list before discussing them // - tools: Array of functions the agent can call to perform actions var chatClientAgent = new ChatClientAgent( chatClient, name: "ProverbsAgent", description: @"A helpful assistant that helps manage and discuss proverbs. You have tools available to add, set, or retrieve proverbs from the list. When discussing proverbs, ALWAYS use the get_proverbs tool to see the current list before mentioning, updating, or discussing proverbs with the user.", tools: [ // Tool 1: Get the current list of proverbs AIFunctionFactory.Create(GetProverbs, options: new() { Name = "get_proverbs", SerializerOptions = _jsonSerializerOptions }), // Tool 2: Add new proverbs to the existing list AIFunctionFactory.Create(AddProverbs, options: new() { Name = "add_proverbs", SerializerOptions = _jsonSerializerOptions }), // Tool 3: Replace the entire list of proverbs AIFunctionFactory.Create(SetProverbs, options: new() { Name = "set_proverbs", SerializerOptions = _jsonSerializerOptions }), // Tool 4: Get weather information for a location AIFunctionFactory.Create(GetWeather, options: new() { Name = "get_weather", SerializerOptions = _jsonSerializerOptions }) ]); // Wrap with Shared State Agent // Wrap the chat client agent with SharedStateAgent to enable state persistence // This allows the agent to maintain state across multiple interactions // The JSON serializer options are used for state serialization return new SharedStateAgent(chatClientAgent, _jsonSerializerOptions); } // ... } 

// ... public class ProverbsAgentFactory { // Store configuration for accessing settings (like API tokens) private readonly IConfiguration _configuration; // Reference to the shared state instance private readonly ProverbsState _state; // OpenAI client instance for making API calls private readonly OpenAIClient _openAiClient; // ... // Tool 1: Get Proverbs // Retrieves the current list of proverbs from the shared state [Description("Get the current list of proverbs.")] private List<string> GetProverbs() { // Log the operation for debugging and monitoring _logger.LogInformation("📖 Getting proverbs: {Proverbs}", string.Join(", ", _state.Proverbs)); // Return the current list of proverbs from the shared state return _state.Proverbs; } // Tool 2: Add Proverbs // Adds new proverbs to the existing list without removing existing ones [Description("Add new proverbs to the list.")] private void AddProverbs([Description("The proverbs to add")] List<string> proverbs) { // Log the operation with the proverbs being added _logger.LogInformation("➕ Adding proverbs: {Proverbs}", string.Join(", ", proverbs)); // Add the new proverbs to the end of the existing list // AddRange appends all items from the input list to the state's Proverbs list _state.Proverbs.AddRange(proverbs); } // Tool 3: Set Proverbs // Replaces the entire list of proverbs with a new list [Description("Replace the entire list of proverbs.")] private void SetProverbs([Description("The new list of proverbs")] List<string> proverbs) { // Log the operation with the new list of proverbs _logger.LogInformation("📝 Setting proverbs: {Proverbs}", string.Join(", ", proverbs)); // Replace the entire list using collection expression syntax // The [.. proverbs] syntax creates a new list with a copy of all items from proverbs _state.Proverbs = [.. proverbs]; } // Tool 4: Get Weather // Retrieves weather information for a specified location // Note: This is a mock implementation that returns hardcoded values // In a real application, this would call a weather API [Description("Get the weather for a given location. Ensure location is fully spelled out.")] private WeatherInfo GetWeather([Description("The location to get the weather for")] string location) { // Log the operation with the requested location _logger.LogInformation("🌤️ Getting weather for: {Location}", location); // Return a mock WeatherInfo object with sample data // In production, this would make an API call to a weather service return new() { Temperature = 20, Conditions = "sunny", Humidity = 50, WindSpeed = 10, FeelsLike = 25 }; } } // ... 

// ... // Step 5.1: Model for returning proverbs state snapshots // Used by tools that modify proverbs to return the updated state public class ProverbsStateSnapshot { // Map the C# property name "Proverbs" to JSON property name "proverbs" // This follows JSON naming conventions (camelCase) [JsonPropertyName("proverbs")] public List<string> Proverbs { get; set; } = new(); } // Step 5.2: Model for weather information // Used by the GetWeather tool to return structured weather data public class WeatherInfo { // Temperature in degrees (example uses Celsius) [JsonPropertyName("temperature")] public int Temperature { get; init; } // Weather conditions description (e.g., "sunny", "cloudy", "rainy") [JsonPropertyName("conditions")] public string Conditions { get; init; } = string.Empty; // Humidity percentage (0-100) [JsonPropertyName("humidity")] public int Humidity { get; init; } // Wind speed (units depend on implementation) [JsonPropertyName("wind_speed")] public int WindSpeed { get; init; } // "Feels like" temperature (accounts for wind, humidity, etc.) [JsonPropertyName("feelsLike")] public int FeelsLike { get; init; } } // Step 5.3: Partial class declaration // This allows the Program class to be extended with the top-level statements below // (C# 9+ top-level statements are compiled into a Program class) public partial class Program { } // ... 

// ... // Register ProverbsStateSnapshot for JSON serialization [JsonSerializable(typeof(ProverbsStateSnapshot))] // Register WeatherInfo for JSON serialization [JsonSerializable(typeof(WeatherInfo))] // Sealed partial class that provides type information for JSON serialization // The JsonSerializerContext base class enables source generation internal sealed partial class ProverbsAgentSerializerContext : JsonSerializerContext; 

dotnet run 

npm install @copilotkit/react-ui @copilotkit/react-core @copilotkit/runtime 

import { CopilotRuntime, // Main runtime that manages agent communication ExperimentalEmptyAdapter, // Service adapter for single-agent setups copilotRuntimeNextJSAppRouterEndpoint, // Next.js App Router endpoint handler } from "@copilotkit/runtime"; // Import AG-UI client for connecting to Microsoft Agent Framework agents import { HttpAgent } from "@ag-ui/client"; // Import Next.js types for request handling import { NextRequest } from "next/server"; // Create a service adapter for the CopilotKit runtime const serviceAdapter = new ExperimentalEmptyAdapter(); // Create the main CopilotRuntime instance that manages communication between the frontend and backend agents const runtime = new CopilotRuntime({ // Define the agents that will be available to the frontend agents: { // Configure the ADK agent connection my_agent: new HttpAgent({ // Specify the URL where the Microsoft Agent Framework agent is running url: "http://localhost:8000/", }), }, }); // Export the POST handler for the API route export const POST = async (req: NextRequest) => { // Create the request handler using CopilotKit's Next.js helper const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({ runtime, // The CopilotRuntime instance we configured serviceAdapter, // The service adapter for agent coordination endpoint: "/api/copilotkit", // The endpoint path (matches this file's location) }); return handleRequest(req); }; 

// Step 1: Import necessary types and components from Next.js and CopilotKit import type { Metadata } from "next"; import { CopilotKit } from "@copilotkit/react-core"; import "./globals.css"; import "@copilotkit/react-ui/styles.css"; // Step 2: Define metadata for the application, used by Next.js for SEO and page headers export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; // Step 3: Define the RootLayout component, which wraps the entire application export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { // Step 4: Return the JSX structure for the layout return ( <html lang="en"> <body className={"antialiased"}> {/* Step 5: Wrap the children components with CopilotKit provider to enable CopilotKit functionality */} <CopilotKit runtimeUrl="/api/copilotkit" agent="my_agent"> {children} </CopilotKit>  </body>  </html>  ); } 

"use client"; import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui"; import { useState } from "react"; export default function CopilotKitPage() { const [themeColor, setThemeColor] = useState("#6366f1"); // ... return ( <main style={{ "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties}> <CopilotSidebar disableSystemMessage={true} clickOutsideToClose={false} labels={{ title: "Popup Assistant", initial: "👋 Hi, there! You're chatting with an agent.", }} suggestions={[ { title: "Generative UI", message: "Get the weather in San Francisco.", }, { title: "Frontend Tools", message: "Set the theme to green.", }, { title: "Human In the Loop", message: "Please go to the moon.", }, { title: "Write Agent State", message: "Add a proverb about AI.", }, { title: "Update Agent State", message: "Please remove 1 random proverb from the list if there are any.", }, { title: "Read Agent State", message: "What are the proverbs?", }, ]} > <YourMainContent themeColor={themeColor} />  </CopilotSidebar>  </main>  ); } 

"use client"; import { useCoAgent } from "@copilotkit/react-core"; // State of the agent, make sure this aligns with your agent's state. type AgentState = { proverbs: string[]; } function YourMainContent({ themeColor }: { themeColor: string }) { // 🪁 Shared State: https://docs.copilotkit.ai/coagents/shared-state const { state, setState } = useCoAgent<AgentState>({ name: "my_agent", initialState: { proverbs: [ "CopilotKit may be new, but it's the best thing since sliced bread.", ], }, }) // ... return ( // ... ) 

"use client"; import { useCoAgent, useCopilotAction } from "@copilotkit/react-core"; // ... function YourMainContent({ themeColor }: { themeColor: string }) { // ... //🪁 Generative UI: https://docs.copilotkit.ai/coagents/generative-ui useCopilotAction({ name: "get_weather", description: "Get the weather for a given location.", available: "disabled", parameters: [ { name: "location", type: "string", required: true }, ], render: ({ args }) => { return <WeatherCard location={args.location} themeColor={themeColor} />  }, }); return ( ... ) 

import { MoonCard } from "@/components/moon"; import { useCopilotAction } from "@copilotkit/react-core"; // ... function YourMainContent({ themeColor }: { themeColor: string }) { // ... // 🪁 Human In the Loop: https://docs.copilotkit.ai/pydantic-ai/human-in-the-loop useCopilotAction( { name: "go_to_moon", description: "Go to the moon on request.", renderAndWaitForResponse: ({ respond, status }) => { return <MoonCard themeColor={themeColor} status={status} respond={respond} />;  }, }, [themeColor], ); return ( // ... ); } 

"use client"; import { useCoAgent } from "@copilotkit/react-core"; import { ProverbsCard } from "@/components/proverbs"; // State of the agent, make sure this aligns with your agent's state. type AgentState = { proverbs: string[]; } function YourMainContent({ themeColor }: { themeColor: string }) { // 🪁 Shared State: https://docs.copilotkit.ai/coagents/shared-state const { state, setState } = useCoAgent<AgentState>({ name: "my_agent", initialState: { proverbs: [ "CopilotKit may be new, but it's the best thing since sliced bread.", ], }, }) // ... return ( <div style={{ backgroundColor: themeColor }} className="h-screen flex justify-center items-center flex-col transition-colors duration-300" > <ProverbsCard state={state} setState={setState} />  </div>  ); }