AG-UI Quick Start

The previous article provided a basic introduction to AG-UI, highlighting its importance in agent development. This article will cover how to use AG-UI in real-world agent development, using concrete examples to show how AG-UI connects an agent's backend and frontend.

There are many agent development frameworks available. Here we use LangGraph as the agent backend.

On the frontend side, AG-UI is an open protocol that offers an official TypeScript SDK as its client. However, this client only covers the AG-UI protocol layer — including the AG-UI client and event definitions. Building an agent frontend UI directly on top of the AG-UI client can be quite complex, as it involves rendering different events in the UI. A better approach is to use the CopilotKit library. CopilotKit is also the organization behind the AG-UI specification. CopilotKit provides many components for building agent UIs, enabling rapid application development.

Agent Backend

Let's start with the agent backend. With the help of LangChain and LangGraph, creating an agent has become very straightforward. You only need to call the create_agent method, and a system prompt is sufficient.

Creating a LangGraph Agent

def build_graph() -> CompiledStateGraph:
    return create_agent(
        model="openai:gpt-4.1-mini",
        system_prompt="You are a cooking assistant that provides practical, safe, and concise cooking advice.",
        checkpointer=InMemorySaver(),
    )

Once the agent is ready, the next step is to integrate AG-UI. You can use the AG-UI LangGraph integration library ag-ui-langgraph directly. The code below is straightforward: create a FastAPI app to expose a REST API, then create a LangGraphAgent using the previously built graph. The LangGraphAgent wraps the LangGraph graph to adapt it to the AG-UI protocol. Finally, use add_langgraph_fastapi_endpoint to register the LangGraphAgent with the FastAPI app, providing an AG-UI-compatible API endpoint.

Creating an AG-UI-compatible API endpoint

app = FastAPI(title="LangGraph AG-UI Agent")

agui_agent = LangGraphAgent(
    name="cooking-agent",
    description="A simple LangGraph agent exposed over the AG-UI protocol.",
    graph=build_graph(),
)

add_langgraph_fastapi_endpoint(app, agui_agent, "/agent")

Simply start the FastAPI server and you have an AG-UI endpoint ready.

Agent Frontend

On the frontend side, create a Next.js application and add the CopilotKit dependencies. The frontend is also split into server and client parts. The server part uses CopilotKit Runtime to connect to the AG-UI-compatible agent backend. You can think of CopilotKit Runtime as a proxy — it is responsible for connecting to different agents and providing management features such as agent authentication.

The code below is a Next.js API route. First, create a CopilotRuntime, specifying the agents it can access. LangGraphHttpAgent represents a LangGraph agent connected over HTTP. Each agent has an ID as its identifier. Since there is only one agent here, the default ID value default is used.

Next, use the copilotRuntimeNextJSAppRouterEndpoint method to create the Next.js route handler, specifying the path /api/copilotkit.

Next.js Route Using CopilotKit Runtime

import {
  CopilotRuntime,
  EmptyAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { LangGraphHttpAgent } from "@copilotkit/runtime/langgraph";

const agentUrl = process.env.AGENT_URL || "http://localhost:8000/agent";

const runtime = new CopilotRuntime({
  agents: {
    default: new LangGraphHttpAgent({
      url: agentUrl,
    }),
  },
});

const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
  endpoint: "/api/copilotkit",
  runtime,
  serviceAdapter: new EmptyAdapter(),
});

export const dynamic = "force-dynamic";
export const POST = handleRequest;
export const GET = handleRequest;

In the frontend code, the CopilotKit component connects to the API endpoint provided by the runtime, specified by runtimeUrl. The CopilotProvider in the code below wraps CopilotKit.

Frontend Implementation with CopilotKit

"use client";

import { CopilotKit } from "@copilotkit/react-core/v2";
import "@copilotkit/react-ui/styles.css";

type CopilotProviderProps = {
  children: React.ReactNode;
};

export function CopilotProvider({ children }: CopilotProviderProps) {
  const enableInspector = process.env.NODE_ENV === "development";

  return (
    <CopilotKit runtimeUrl="/api/copilotkit" enableInspector={enableInspector}>
      {children}
    </CopilotKit>
  );
}

The CopilotChat component provides the most basic chat interface.

This completes the frontend UI development.