A2UI Launched: Full CopilotKit support at launch!

A2UI Launched: CopilotKit has partnered with Google to deliver full support in both CopilotKit and AG-UI!

Check it out
LogoLogo
  • Overview
  • Integrations
  • API Reference
  • Copilot Cloud
Slanted end borderSlanted end border
Slanted start borderSlanted start border
  • Getting Started
  • Introduction to CopilotKit
  • LLM Quickstart
  • Agent Quickstart
  • Vibe Coding MCP
  • What's New
  • CopilotKit Features
  • Agentic Chat UI
  • Copilot Suggestions
  • Human in the Loop (HITL)
  • Generative UI
  • Frontend Actions
  • Backend Actions
  • Shared State
  • Premium Features
  • CopilotKit Premium
  • Fully Headless UI
  • Observability
  • Inspector
  • Agentic Protocols
  • Agentic Protocols
  • AG-UI (Agents<->Users)
  • MCP (Agents<->Tools)
  • A2A (Agents<->Agents)
  • Generative UI Specs
  • Generative UI Specs
  • A2UI
  • Open-JSON-UI
  • MCP-UI
  • Learning
  • Tutorial: AI Todo App
  • Tutorial: AI Travel App
  • Video: Research Canvas
  • Cookbook: State Machine
  • Troubleshooting
  • Error Debugging
  • Error Observability Connectors
  • Common Copilot Issues
  • Migrate to 1.10.X
  • Migrate to 1.8.2
  • Other
  • Integrations
  • ADK
  • A2A
  • Microsoft Agent Framework
  • AWS Strands
  • Direct to LLM
  • LangGraph
  • AutoGen2
  • Agno
  • CrewAI Crews
  • CrewAI Flows
  • LlamaIndex
  • Mastra
  • Open Agent Spec
  • Pydantic AI

Frontend Actions

Create frontend actions and use them within your agent.

This video shows the result of npx copilotkit@latest init with the implementation section applied to it!

What is this?

Frontend actions are powerful tools that allow your AI agents to directly interact with and update your application's user interface. Think of them as bridges that connect your agent's decision-making capabilities with your frontend's interactive elements.

When should I use this?

Frontend actions are essential when you want to create truly interactive AI applications where your agent needs to:

  • Dynamically update UI elements
  • Trigger frontend animations or transitions
  • Show alerts or notifications
  • Modify application state
  • Handle user interactions programmatically

Without frontend actions, agents are limited to just processing and returning data. By implementing frontend actions, you can create rich, interactive experiences where your agent actively drives the user interface.

Choose your Integration

Frontend actions can be implemented with any agentic backend, with each integration providing different approaches for connecting agents to your UI.

Choose your integration to see specific implementation guides and examples.

ADK
Microsoft Agent Framework
AWS Strands
LangGraph
AG2
CrewAI Crews
CrewAI Flows
LlamaIndex
Mastra
Pydantic AI
ADK
Microsoft Agent Framework
AWS Strands
LangGraph
AG2
CrewAI Crews
CrewAI Flows
LlamaIndex
Mastra
Pydantic AI
PREV
Generative UI
Slanted end borderSlanted end border
Slanted start borderSlanted start border
NEXT
Backend Actions

On this page

What is this?
When should I use this?
Choose your Integration