CopilotKit is the open-source React framework for AI agent UIs. At Build 2026 Microsoft adopted the AG-UI protocol CopilotKit originated. The default frontend layer just got named.

CopilotKit Just Became the Default Frontend for AI Agents, and the AG-UI Adoption at Microsoft Build 2026 Is the Story

Hey guys, Mr. Technology here.

Most agent frameworks solve the backend half. Tool calls, retries, memory, the LLM loop. They hand output back as a JSON blob or a markdown chunk and expect you to figure out rendering. The frontend is still 2023 chat UI, and shipping agent products means burning weeks reinventing the same body. CopilotKit is the open-source framework that fixes this. MIT-licensed, React and Next.js native, with production components for chat, generative UI, shared state, and human-in-the-loop. It is also the originator of the AG-UI protocol that Microsoft just adopted in Agent Framework at Build 2026. The agent stack has been missing this layer — CopilotKit ships it today.

What It Actually Does

CopilotKit is a React and Next.js framework. Mental model: the agent is the brain, CopilotKit is the body. Four primitives ship out of the box.

Chat components. <CopilotChat>, <CopilotPopup>, <CopilotSidebar> drop into a React app and handle streaming, markdown, code blocks, tool call rendering, persistence, attachments. They work with any AG-UI compatible backend — LangGraph, CrewAI, OpenAI Agents SDK, Microsoft Agent Framework, your custom FastAPI agent.

Generative UI. The agent returns a structured payload that names a React component — <ProductCard>, <DataTable>, <ApprovalForm> — and CopilotKit renders it inside the chat surface, or anywhere in the host app, mid-conversation. The agent ships real components that fit your design system, not markdown tables.

tsx

// app/agent/route.ts — AG-UI streaming endpoint
import { LangGraphPlatformEndpoint } from "@copilotkit/runtime";
export const POST = LangGraphPlatformEndpoint({
  deploymentUrl: process.env.LANGGRAPH_URL!,
  agents: [{ name: "research_agent", description: "ReAct agent with web tools." }],
});
// app/page.tsx — host app wiring agent to generative UI
"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotChat } from "@copilotkit/react-ui";
import { ProductCard, DataTable, ApprovalForm } from "@/components/agent-ui";
export default function Page() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <CopilotChat
        generativeComponents={[
          { name: "product_card", component: ProductCard },
          { name: "data_table",   component: DataTable },
          { name: "approval",     component: ApprovalForm },
        ]}
        renderGenerativeComponent={(props) => {
          switch (props.type) {
            case "product_card": return <ProductCard {...props} />;
            case "data_table":   return <DataTable {...props} />;
            case "approval":     return <ApprovalForm {...props} />;
            default: return <pre>{JSON.stringify(props)}</pre>;
          }
        }}
      />
    </CopilotKit>
  );
}

Three things matter. One, the agent decides at runtime which component to render — the dispatcher is data-driven, so model and UI evolve independently. Two, the components are regular React in your codebase — design system, state, analytics. Three, the runtime endpoint can be LangGraph, CrewAI, Microsoft Agent Framework, or your own — the protocol is the abstraction.

Shared state. useCopilotReadable and useCopilotActionable let the agent see React state — current page, form, selection — without manual context plumbing.

Human-in-the-loop. The agent emits a tool call that pauses for human review, the UI renders an approval form, the user types, the agent continues. Cleanest HITL I have shipped — no polling, no race conditions, a protocol that knows the difference between an auto-resolvable tool call and one that needs a human.

Why I Care

I have shipped agent frontends in three products in the last 18 months. Building a competent agent UI from scratch is a six-week job done right, and a one-day job with CopilotKit. Agent frameworks are a different species of pain from regular React: you are negotiating a streaming JSON event protocol in JavaScript without freezing the page, losing messages, or breaking the back button.

The other thing that matters is AG-UI. AG-UI is the protocol CopilotKit originated — the wire format between agent and frontend: streaming messages, generative UI, tool calls, shared state, HITL. It is what MCP is for backend tool integration, but for the frontend. MCP took off because Anthropic published the spec and every tool company adopted it. AG-UI is going to take off the same way because Microsoft shipped native AG-UI support in Microsoft Agent Framework at Build 2026 in May. Agent Framework, Copilot Studio, and CopilotKit's React components now speak the same protocol natively. That is not a press release. That is the standard for agentic UX winning the same way HTTP won for the web in 1995 — the framework that ships the open protocol wins the layer.

The enterprise angle is what nobody is talking about yet. Microsoft has 230,000+ Copilot Studio customers. Every one of them is going to want a frontend. The fact that the Microsoft-approved frontend lives in open source, on a permissive license, with a real install path — that is a moat most people are missing. The CopilotKit GitHub repo crossed 14,000 stars the week after Build. The right question in July 2026 is which tools already speak AG-UI, and CopilotKit is the answer for the React half.

When Not To Use It

A pure chat product with no in-app context — the ChatGPT equivalent, a customer support page, a standalone chatbot — CopilotKit is overkill. Use Vercel AI SDK UI. You will spend a week fighting generative UI for a use case that does not need it. If your host app is Vue, Svelte, or native mobile, you are out of luck in July 2026 — CopilotKit is React and Next.js only. The Angular port is in progress; everything else is on the roadmap. Fully self-hosted backends with zero cloud dependencies are fine for the client-side components but the runtime endpoint still needs a Python or Node backend you control.

Verdict

bash

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

That is the quick start. Drop <CopilotKit runtimeUrl="/api/agent"> at the root, drop <CopilotChat> where you want the surface, point runtimeUrl at a LangGraph, CrewAI, or Microsoft Agent Framework deployment, and ship. The Microsoft AG-UI adoption at Build 2026 turns CopilotKit from "the best React framework I can find" into "the default frontend stack for AI agents in 2026." Worth your time. Skip it only if you are not building React apps or you do not need generative UI, which means you are not building an agent product.

— Mr. Technology

Sources: