---
name: UI Customization
description: Customize ChatKit layout, theme, and presentation for RAG textbook chatbot with proper styling and textbook theme integration.
---

# UI Customization

## Instructions

1. Customize ChatKit layout and theme:
   - Add sidebar with "Sources" section
   - Implement Math/Code formatting support
   - Match textbook theme colors and typography
   - Improve layout spacing and visual hierarchy

2. Integrate textbook theme elements:
   - Use colors consistent with textbook design
   - Apply proper typography for technical content
   - Include styling for code blocks and equations
   - Maintain readability for technical content

3. Add RAG-specific UI elements:
   - Display source citations clearly
   - Show confidence indicators
   - Add metadata display for retrieved content
   - Include visual indicators for RAG responses

4. Maintain ChatKit functionality:
   - Don't break internal component states
   - Preserve existing user interactions
   - Maintain accessibility standards
   - Keep performance optimizations

5. Follow Context7 MCP documentation:
   - Follow ChatKit component architecture
   - Use deterministic patch protocols
   - Include proper error handling
   - Document all styling changes

## Examples

Input: "Customize ChatKit for textbook RAG interface"
Output: Updates UI components and styles to match textbook theme with proper source citation display.