┌─────────────────────┐     AG-UI Protocol      ┌─────────────────────┐
│   Next.js Frontend  │ ◄──────────────────────►│  FastAPI Backend    │
│   (CopilotKit)      │   SSE Event Stream      │  (Pydantic AI)      │
│                     │                          │                     │
│ • useCoAgent        │   Events:               │ • Agent + tools     │
│ • useCopilotAction  │   - TextMessageStart    │ • to_ag_ui()        │
│ • useCopilotReadable│   - ToolCallStart       │ • StateDeps         │
│ • useCoAgentState   │   - StateSnapshot       │ • StateSnapshot     │
│   Render            │   - StateDelta          │ • StateDelta        │
└─────────────────────┘                          └─────────────────────┘

from pydantic_ai import Agent
from ag_ui.core import EventType, StateSnapshotEvent

agent = Agent('openai:gpt-4o-mini')
app = agent.to_ag_ui()  # Creates FastAPI app

@agent.tool_plain
async def my_tool(param: str) -> StateSnapshotEvent:
    return StateSnapshotEvent(
        type=EventType.STATE_SNAPSHOT,
        snapshot={"result": param}
    )

// layout.tsx - Wrap app with CopilotKit
<CopilotKit runtimeUrl="/api/copilotkit" agent="myAgent">
  {children}
</CopilotKit>

// page.tsx - Use hooks
const { state, setState } = useCoAgent({
  name: "myAgent",
  initialState: { /* ... */ }
});

useCopilotAction({
  name: "my_action",
  parameters: [{ name: "param", type: "string" }],
  renderAndWaitForResponse: ({ args, respond, status }) => (
    <MyComponent onAccept={() => respond("accepted")} />
  )
});