Overview - Copilotkit

CopilotKit is fully compatible with three major agentic protocols: AG-UI, MCP, and A2A.
Learn about these protocols and how to connect your app to agents which support them using CopilotKit.

<table style={{ width: "100%", borderCollapse: "collapse" }}> <thead> <tr> <th style={{ width: "25%", textAlign: "left", padding: "12px", borderBottom: "2px solid #e5e7eb", }} > Connection </th> <th style={{ width: "25%", textAlign: "left", padding: "12px", borderBottom: "2px solid #e5e7eb", }} > Protocol </th> <th style={{ width: "50%", textAlign: "left", padding: "12px", borderBottom: "2px solid #e5e7eb", }} > Purpose </th> </tr> </thead> <tbody> <tr> <td style={{ padding: "12px", borderBottom: "1px solid #e5e7eb", verticalAlign: "top", }} > <strong>Agent ↔ User Interaction</strong> </td> <td style={{ padding: "12px", borderBottom: "1px solid #e5e7eb", verticalAlign: "top", }} > <a href="/agentic-protocols/ag-ui"> <strong>AG-UI</strong> </a>

    (Agent–User Interaction Protocol)
  </td>
  <td style={{ padding: "12px", borderBottom: "1px solid #e5e7eb" }}>
    The open, event-based standard that connects agents to user-facing
    applications — enabling real-time, multimodal, interactive experiences.
  </td>
</tr>
<tr>
  <td
    style={{
      padding: "12px",
      borderBottom: "1px solid #e5e7eb",
      verticalAlign: "top",
    }}
  >
    <strong>Agent ↔ Tools & Data</strong>
  </td>
  <td
    style={{
      padding: "12px",
      borderBottom: "1px solid #e5e7eb",
      verticalAlign: "top",
    }}
  >
    <a href="/agentic-protocols/mcp">
      <strong>MCP</strong>
    </a>
    

    (Model Context Protocol)
  </td>
  <td style={{ padding: "12px", borderBottom: "1px solid #e5e7eb" }}>
    Open standard that lets agents securely connect to external systems —
    tools, workflows, and data sources.
  </td>
</tr>
<tr>
  <td
    style={{
      padding: "12px",
      borderBottom: "1px solid #e5e7eb",
      verticalAlign: "top",
    }}
  >
    <strong>Agent ↔ Agent</strong>
  </td>
  <td
    style={{
      padding: "12px",
      borderBottom: "1px solid #e5e7eb",
      verticalAlign: "top",
    }}
  >
    <a href="/agentic-protocols/a2a">
      <strong>A2A</strong>
    </a>
    

    (Agent to Agent)
  </td>
  <td style={{ padding: "12px", borderBottom: "1px solid #e5e7eb" }}>
    Defines how agents coordinate and share work across distributed agentic
    systems.
  </td>
</tr>
<tr>
  <td style={{ padding: "12px", verticalAlign: "top" }}>
    <strong>Agent ↔ Generative UI </strong>
  </td>
  <td style={{ padding: "12px", verticalAlign: "top" }}>
    <strong>[A2UI](/generative-ui/a2ui)</strong> (Google)
    

    <strong>[MCP Apps](/generative-ui/mcp-apps)</strong> (MCP
    Ecosystem)
    

    <strong>Open-JSON-UI</strong> (OpenAI)
  </td>
  <td style={{ padding: "12px" }}>
    Declarative, LLM-friendly [generative UI specs](/generative-ui)
    that define <em>what</em> to render and how to structure agent responses
    visually. CopilotKit fully supports all of these.
  </td>
</tr>

</tbody> </table>

Mixing and Matching Protocols

CopilotKit lets developers connect to any of these protocols directly or in combination. CopilotKit can connect through any of the Interaction Protocols to your agentic backend.

Or, since AG-UI also includes handshakes with both MCP and A2A, CopilotKit can connect to MCP or A2A supporting agents through AG-UI.

This means that if your host agent connects to subagents using MCP or A2A, their UI properties can be propagated all the way through to the user-facing application — while preserving full security, policy, and observability controls.