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

Migrate to 1.8.2

Migration guide for CopilotKit 1.8.2

What's changed?

New Look and Feel

CopilotKit 1.8.2 introduces a new default look and feel. This includes new use of theming variables, new components, and generally a fresh look.

Click the button in the bottom right to see the new look and feel in action!

Thumbs Up/Down Handlers

The chat components now have onThumbsUp and onThumbsDown handlers. Specifying these will add icons to each message on hover allowing the user to provide feedback.

<CopilotChat 
  onThumbsUp={(message) => console.log(message)} 
  onThumbsDown={(message) => console.log(message)}     
/>

This was previously achievable in our framework, but we're making it first class now! You can use this to help fine-tune your model through CopilotKit or just generally track user feedback.

ResponseButton prop removed

The ResponseButton prop has been removed. This was a prop that was used to customize the button that appears after a response was generated in the chat.

In its place, we now place buttons below each message for:

  • Thumbs up
  • Thumbs down
  • Copy
  • Regenerate

The behvior, icons and styling for each of these buttons can be customized. Checkout our look and feel guides for more details.

Out-of-the-box dark mode support

CopilotKit now has out-of-the-box dark mode support. This is controlled by the .dark class (Tailwind) as well as the color-scheme CSS selector.

If you would like to make a custom theme, you can do so by checking out the custom look and feel guides.

CopilotKit

Hey there Let's have a fun conversation!

PREV
Migrate to 1.10.X
Slanted end borderSlanted end border
Slanted start borderSlanted start border
NEXT
Code Contributions

On this page

What's changed?
New Look and Feel
Thumbs Up/Down Handlers
ResponseButton prop removed
Out-of-the-box dark mode support