CSS Customization
Theme CopilotKit components via CSS variables and class overrides.
"""AG2 agent with weather and sales tools for CopilotKit showcase.Uses AG2's ConversableAgent with AGUIStream to exposethe agent via the AG-UI protocol."""from __future__ import annotationsimport jsonimport osfrom typing import Annotated, Anyfrom autogen import ConversableAgent, LLMConfigfrom autogen.ag_ui import AGUIStreamfrom dotenv import load_dotenvload_dotenv()# Import shared tool implementationsfrom tools import ( get_weather_impl, query_data_impl, manage_sales_todos_impl, get_sales_todos_impl, schedule_meeting_impl, search_flights_impl, build_a2ui_operations_from_tool_call, RENDER_A2UI_TOOL_SCHEMA,)from tools.types import Flight# =====# Tools# =====async def get_weather( location: Annotated[str, "City name to get weather for"],) -> dict[str, str | float]: """Get current weather for a location.""" result = get_weather_impl(location) return { "city": result["city"], "temperature": result["temperature"], "feels_like": result["feels_like"], "humidity": result["humidity"], "wind_speed": result["wind_speed"], "conditions": result["conditions"], }async def query_data( query: Annotated[str, "Natural language query for financial data"],) -> list: """Query financial database for chart data.""" return query_data_impl(query)async def manage_sales_todos( todos: Annotated[list, "Complete list of sales todos"],) -> dict: """Manage the sales pipeline.""" return {"todos": manage_sales_todos_impl(todos)}async def get_sales_todos() -> list: """Get the current sales pipeline.""" return get_sales_todos_impl(None)async def schedule_meeting( reason: Annotated[str, "Reason for the meeting"],) -> dict: """Schedule a meeting with user approval.""" return schedule_meeting_impl(reason)async def search_flights( flights: Annotated[ list[dict[str, Any]], "List of flight objects to display as rich A2UI cards" ],) -> str: """Search for flights and display the results as rich cards. Return exactly 2 flights. Each flight must have: airline, airlineLogo, flightNumber, origin, destination, date (short readable format like "Tue, Mar 18" -- use near-future dates), departureTime, arrivalTime, duration (e.g. "4h 25m"), status (e.g. "On Time" or "Delayed"), statusColor (hex color for status dot), price (e.g. "$289"), and currency (e.g. "USD"). For airlineLogo use Google favicon API: https://www.google.com/s2/favicons?domain={airline_domain}&sz=128 """ typed_flights: list[Flight] = [Flight(**f) for f in flights] result = search_flights_impl(typed_flights) return json.dumps(result)async def generate_a2ui( context: Annotated[str, "Conversation context to generate UI for"],) -> str: """Generate dynamic A2UI components based on the conversation. A secondary LLM designs the UI schema and data. The result is returned as an a2ui_operations container for the middleware to detect. """ import openai client = openai.OpenAI() response = client.chat.completions.create( model="gpt-4.1", messages=[ {"role": "system", "content": context or "Generate a useful dashboard UI."}, { "role": "user", "content": "Generate a dynamic A2UI dashboard based on the conversation.", }, ], tools=[ { "type": "function", "function": RENDER_A2UI_TOOL_SCHEMA, } ], tool_choice={"type": "function", "function": {"name": "render_a2ui"}}, ) choice = response.choices[0] if choice.message.tool_calls: args = json.loads(choice.message.tool_calls[0].function.arguments) result = build_a2ui_operations_from_tool_call(args) return json.dumps(result) return json.dumps({"error": "LLM did not call render_a2ui"})# =====# Agent# =====agent = ConversableAgent( name="assistant", system_message=( "You are a helpful sales assistant. You can look up current weather " "for any city using the get_weather tool, query financial data with " "query_data, manage the sales pipeline with manage_sales_todos and " "get_sales_todos, schedule meetings with schedule_meeting, search " "flights and display rich A2UI cards with search_flights, and " "generate dynamic A2UI dashboards with generate_a2ui. " "When asked about the weather, always use the tool rather than guessing. " "Be concise and friendly in your responses." ), llm_config=LLMConfig({"model": "gpt-4o-mini", "stream": True}), human_input_mode="NEVER", # Guard against infinite tool-call loops: AG2's ConversableAgent with # human_input_mode="NEVER" will keep executing tool calls indefinitely # if the LLM keeps requesting them. Without this limit the agent floods # Railway's log stream (500 logs/sec rate-limit), becomes unresponsive # to health probes, and gets killed by the watchdog. max_consecutive_auto_reply=15, functions=[ get_weather, query_data, manage_sales_todos, get_sales_todos, schedule_meeting, search_flights, generate_a2ui, ],)# AG-UI stream wrapperstream = AGUIStream(agent)What is this?#
CopilotKit has a variety of ways to customize the colors and structure of the Copilot UI components via plain CSS. You can:
- Override CopilotKit CSS variables to re-tint the whole UI
- Target the built-in class names (
.copilotKit...) for structural tweaks - Swap fonts per surface (messages, input, bubbles)
- Replace icons and labels via component props
If you need to change behavior, not just look, see slots or fully headless UI.
Scoping the theme#
The demo keeps all of its styling in a sibling theme.css file and applies it
only to the wrapper div holding <CopilotChat>. Importing the stylesheet from
the page module is enough; Next.js bundles it with the route:
import "./theme.css";Scoping every selector under a wrapper class keeps the overrides from leaking into the rest of the app.
CSS Variables (Easiest)#
The easiest way to change the colors used in the Copilot UI components is to override CopilotKit CSS variables. The demo sets them on the scope wrapper so they cascade into every nested chat component:
/* CopilotKit CSS variable overrides (accent colors, etc.) */.chat-css-demo-scope { --copilot-kit-primary-color: #ff006e; --copilot-kit-contrast-color: #ffffff; --copilot-kit-background-color: #fff8f0; --copilot-kit-input-background-color: #fef3c7; --copilot-kit-secondary-color: #fde047; --copilot-kit-secondary-contrast-color: #2c1810; --copilot-kit-separator-color: #ff006e; --copilot-kit-muted-color: #c2185b;}Once you've found the right variable, you can also apply the overrides inline
via the CopilotKitCSSProperties helper:
import { CopilotKitCSSProperties } from "@copilotkit/react-core/v2";
<div
style={
{
"--copilot-kit-primary-color": "#222222",
} as CopilotKitCSSProperties
}
>
<CopilotSidebar />
</div>Reference#
| CSS Variable | Description |
|---|---|
--copilot-kit-primary-color | Main brand/action color — used for buttons, interactive elements |
--copilot-kit-contrast-color | Color that contrasts with primary — used for text on primary elements |
--copilot-kit-background-color | Main page/container background color |
--copilot-kit-secondary-color | Secondary background — used for cards, panels, elevated surfaces |
--copilot-kit-secondary-contrast-color | Primary text color for main content |
--copilot-kit-separator-color | Border color for dividers and containers |
--copilot-kit-muted-color | Muted color for disabled/inactive states |
Custom CSS#
The CopilotKit CSS is structured to allow customization via CSS classes. You can target specific pieces of the UI from your own stylesheet:
.copilotKitButton {
border-radius: 0;
}
.copilotKitMessages {
padding: 2rem;
}
.copilotKitUserMessage {
background: #007AFF;
}The demo's theme.css wraps every selector under .chat-css-demo-scope so
the overrides don't leak out. Here's the user/assistant bubble block from
that file:
.chat-css-demo-scope .copilotKitMessage.copilotKitUserMessage { background: linear-gradient(135deg, #ff006e 0%, #c2185b 100%); color: #ffffff; font-family: "Georgia", "Cambria", "Times New Roman", serif; font-size: 1.25rem; font-weight: 700; padding: 14px 20px; border-radius: 22px 22px 4px 22px; box-shadow: 0 6px 16px rgba(255, 0, 110, 0.35); border: 2px solid #ff6fa5; letter-spacing: 0.01em;}/* Assistant message bubble – amber, monospace, boxy, dark text */.chat-css-demo-scope .copilotKitMessage.copilotKitAssistantMessage { background: #fde047; color: #1e1b4b; font-family: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace; font-size: 1rem; padding: 16px 20px; border-radius: 4px 22px 22px 22px; border: 2px solid #1e1b4b; box-shadow: 4px 4px 0 #1e1b4b; max-width: 80%; margin-right: auto; margin-bottom: 1rem;}Reference#
| CSS Class | Description |
|---|---|
.copilotKitMessages | Main container for all chat messages |
.copilotKitInput | Text input container with typing area and send button |
.copilotKitUserMessage | Styling for user messages |
.copilotKitAssistantMessage | Styling for AI responses |
.copilotKitHeader | Top bar of chat window containing title and controls |
.copilotKitButton | Primary chat toggle button |
.copilotKitWindow | Root container defining overall chat window dimensions |
.copilotKitMarkdown | Styles for rendered markdown content |
.copilotKitCodeBlock | Code snippet container with syntax highlighting |
.copilotKitSidebar | Styles for sidebar chat mode |
.copilotKitPopup | Styles for popup chat mode |
Custom Fonts#
You can customize the fonts by updating the fontFamily property on the
relevant CopilotKit classes:
.copilotKitMessages {
font-family: "Arial, sans-serif";
}
.copilotKitInput {
font-family: "Arial, sans-serif";
}Custom Icons#
Customize icons by passing the icons prop to CopilotSidebar, CopilotPopup,
or CopilotChat:
<CopilotChat
icons={{
openIcon: <YourOpenIconComponent />,
closeIcon: <YourCloseIconComponent />,
}}
/>Custom Labels#
Customize all user-facing copy via the labels prop:
<CopilotChat
labels={{
welcomeMessageText: "Hello! How can I help you today?",
modalHeaderTitle: "My Copilot",
chatInputPlaceholder: "Ask me anything!",
}}
/>