CopilotKit and AG-UI: three ways to build agent interfaces

Learn three generative UI approaches with a Mastra incident triage demo, including React component catalogs, rollback approvals and Slack rendering.

Player not loading? Watch on YouTube

Tyler Slaton explains how CopilotKit connects an AI agent to interactive interfaces through AG-UI. His TypeScript and React demo uses a Mastra incident triage bot with GPT-4.1 to investigate example repository checkout failures, using simplified incident tools that return demonstration data. The talk focuses on interface development rather than running models locally.

The demo compares three approaches to generative UI. Controlled UI maps a tool call to a React component written by the developer. Declarative UI uses A2UI and a catalog of Zod-defined schemas and renderers: the agent chooses how to arrange the available components. Slaton notes that generation takes time and repeated prompts can produce different layouts, while the components retain their appearance. Open-ended UI lets the agent generate an unspecified component in a sandbox.

A rollback example uses Mastra's suspend-and-resume workflow to pause execution for approval. Slaton then connects the same agent to Slack through CopilotKit's channels SDK. Block Kit provides native message components; for more complex visuals, he describes rendering components in a headless browser and sending screenshots.

The closing discussion covers feedback capture and a self-learning SDK still under development. Slaton also describes React Native support and contributed Kotlin, .NET and Dart SDKs. A Swift implementation remains a requested contribution at the time of the talk.