copilotkit--copilotkit/showcase/integrations/claude-sdk-python/qa/chat-customization-css.md

QA: Chat Customization (CSS) — Claude Agent SDK (Python)

Prerequisites

• Demo is deployed and accessible
• Agent backend is healthy (check /api/health)

Test Steps

1. Basic Functionality

• Navigate to /demos/chat-customization-css
• Verify the chat loads inside the .chat-css-demo-scope wrapper
• Send a basic message
• Verify the agent responds

2. Feature-Specific Checks

Theme Application

• Verify user message bubbles render with the hot-pink gradient
• Verify assistant message bubbles render with the amber background and monospace font
• Verify the input area shows a dashed pink border
• Verify the input placeholder color is pink italic

Variable Overrides

• Inspect the .chat-css-demo-scope element and verify CopilotKit CSS variables are overridden (e.g. --copilot-kit-primary-color: #ff006e)
• Verify the customization does not leak outside the scoped container

3. Error Handling

• Verify no console errors during normal usage

Expected Results

• Page loads within 3 seconds
• Theme is applied only inside .chat-css-demo-scope
• Agent responds within 10 seconds