selection-qa

nadeemsangrasi's avatarfrom nadeemsangrasi

Add selection-based Q&A functionality to ChatKit UI allowing users to ask about highlighted text with proper integration.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 17, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill automates the implementation of selection-based Q&A functionality within the ChatKit UI. It enables developers to seamlessly integrate features that allow users to highlight text and receive contextual AI responses by handling frontend event detection, UI positioning, and backend API communication.

Use Cases

  • Feature Implementation: Rapidly add 'Ask about selection' capabilities to chat interfaces, reducing manual coding time for event listeners and contextual menus.
  • Enhanced User Interaction: Improve UX by allowing users to query specific parts of a conversation or document without copying and pasting text into the input box.
  • Contextual AI Integration: Streamline the process of sending specific UI context to backend LLM endpoints to ensure more accurate and relevant AI-generated answers.
  • UI/UX Standardization: Ensure that selection-based tools are styled consistently with existing themes and function correctly across both desktop and mobile platforms.
nameSelection Q&A
descriptionAdd selection-based Q&A functionality to ChatKit UI allowing users to ask about highlighted text with proper integration.

Selection Q&A

Instructions

  1. Implement text selection detection:

    • Add event listeners for text selection
    • Capture selected text content
    • Determine selection boundaries
    • Handle multiple selection scenarios

  2. Create "Ask About Selection" interface:

    • Add contextual button/menu for selections
    • Position UI element appropriately
    • Style button consistently with theme
    • Handle mobile vs desktop differences

  3. Integrate with backend Q&A:

    • Send selection context to POST /chat endpoint
    • Include selection as additional context
    • Format request properly with main query
    • Handle response integration

  4. Display results appropriately:

    • Show backend answer with selection context
    • Include proper citation of sources
    • Maintain conversation flow
    • Handle error cases gracefully

  5. Follow Context7 MCP documentation:

    • Follow ChatKit component architecture
    • Use deterministic patch protocols
    • Include proper error handling
    • Maintain existing functionality

Examples

Input: "Add selection-based Q&A to ChatKit" Output: Patches UI files to add text selection detection and contextual Q&A functionality.