Check out this great tutorial on building ADK agent frontends with AG-UI Protocol and CopilotKit

Frank Guan — Mon, 29 Sep 2025 21:56:38 +0000

Ready to build a user-friendly frontend for your ADK agents? This guide will show you how to use CopilotKit and the AG-UI protocol to create a powerful, real-time user interface for your AI agents. 🤖

Bonnie for CopilotKit

Sep 25 '25

Build a Frontend for your ADK Agents with AG-UI

#webdev #programming #ai #tutorial

242

Comments 18

12 min read

Why Use CopilotKit?
Speed up development: Go from idea to a working prototype in just a few hours.

Pre-built UI components: Save time with ready-to-use components like CopilotSidebar.
Real-time updates: Stream your agent's responses and tool outputs for a dynamic user experience.
Simplified state management: The useCoAgent hook makes it easy to sync your agent's state with the frontend.

Getting Started
Here’s a quick overview of the key steps:

Setup: Use a single CLI command to set up a full-stack ADK agent with both the backend (AG-UI) and frontend (CopilotKit) configured.
Backend Integration: Integrate your ADK agent with the AG-UI protocol and expose it as an ASGI application through a FastAPI endpoint.
Frontend Development: Install the CopilotKit packages and configure a Copilot Runtime instance to communicate with the backend.
UI Components: Use the CopilotKit provider to manage agent sessions and CopilotSidebar to create the chat interface.
State Synchronization: Use the useCoAgent hook to share and sync the agent's state with the frontend in real time.
Real-time Updates: Stream and render your agent's responses and tool outputs on the frontend.

With these tools, you can quickly build a production-ready AI agent with a rich and interactive user interface. Worth checking out if you're building AI agents and want rich frontend experiences! Learn more in this post or other resources below:

Quick Start Repo: npx copilotkit@latest create -f adk
Official Documentation: https://docs.copilotkit.ai/adk
Starter Project on GitHub: https://github.com/copilotkit/with-adk
AG-UI Dojo Tutorial: https://dojo.ag-ui.com/adk-middleware/feature/shared_state

Google AI Agent Bake-Off: Episode 1

Frank Guan — Fri, 25 Jul 2025 14:46:57 +0000

Hey DEV community, ever wondered what developers could build with powerful AI tools under pressure? We challenged four teams to find out in the AI Agent Bake-Off series!

Watch as developers, paired with Googler "sous-chefs," vibe with code and build sophisticated AI agents in a 3-hour sprint against the clock. See the innovation in action in the first episode, and tell us: What would YOU build with the Agent Development Kit and Gemini?

DEV Community: Frank Guan

Check out this great tutorial on building ADK agent frontends with AG-UI Protocol and CopilotKit

Build a Frontend for your ADK Agents with AG-UI

Google AI Agent Bake-Off: Episode 1