UI Customization

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.