Add Ask AI CTA to Mintlify search results #3635
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This script augments the Mintlify search bar with an Ask AI call-to-action as the first search result. When users search for content, they'll see an option to 'Ask AI' about their query, which seamlessly transitions them to the Kapa AI widget to get instant AI-powered answers. Features: - Monitors Mintlify search modal for query input - Injects a visually consistent 'Ask AI' CTA as the first search result - Passes the search query to Kapa AI widget when clicked - Auto-submits the query to start the AI conversation - Integrates with Statsig for user tracking when available This provides users with a smooth transition from search to AI assistance while maintaining the native Mintlify search experience.
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
Updated script to properly detect and inject Ask AI CTA in production: - Remove references to non-existent [cmdk-root] and [cmdk-list] attributes - Use [aria-modal="true"] and [role="listbox"] selectors instead - Simplify search dialog detection logic - Update close button selector to handle case variations The script now correctly finds the Mintlify search modal and listbox container in production deployments.
Added continuous polling via requestAnimationFrame to reliably detect search input changes. This ensures the Ask AI CTA is injected even if the input event listener doesn't fire properly. Changes: - Added checkInput() function that polls for input value changes - Keep input event listener as immediate trigger - Use MutationObserver to detect when search dialog is removed - Automatically clean up monitoring when dialog closes This hybrid approach (polling + events) is more reliable than relying solely on mutation observers or event listeners.
Created head.html snippet file to properly load the search-ask-ai.js script via Mintlify's snippet injection mechanism. This ensures the script is loaded on all pages and can properly augment the search functionality.
Added /scripts/search-ask-ai.js to the scripts array in docs.json to ensure it gets loaded by Mintlify. This is the proper way to load custom scripts in Mintlify deployments.
Instead of loading the script from /scripts/, inline the entire JavaScript directly into the snippets/head.html file. This ensures Mintlify properly loads the script since it may not serve files from the /scripts/ directory. Also removed the scripts property from docs.json since it's not needed.
According to Mintlify documentation, any .js file in the content directory (root) will be automatically included in every documentation page. Moved the script from /scripts/ to the root directory to enable this feature.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR attempts to add an "Ask AI" call-to-action as the first result in Mintlify search results, providing users with a seamless way to transition from search to AI-powered assistance via the Kapa widget. However, Mintlify is not loading the custom JavaScript despite following their documentation.
What it should do (once working):
Current status:
❌ Script does not load in preview deployment (https://statsig-4b2ff144-devin-1760982871-add-search-ask-ai.mintlify.app)
❌ Functionality cannot be verified
❌ Three duplicate copies of the script exist from trying different loading methods
Issues to resolve before merging
Script not loading: Tried three approaches per Mintlify docs, none work:
search-ask-ai.jsin root directory (Mintlify docs say .js files auto-load)snippets/head.htmlwith inline script (Mintlify docs mention snippet support)scripts/search-ask-ai.jswith various reference attemptsNeed to investigate: Why isn't Mintlify loading custom scripts? May need:
Cleanup needed: Remove duplicate script files once we determine which approach works
Review checklist
client-Wql5Tkj3Wa3sE8VpFjWpCHCPHxYZMbq6RfcRZZVHFdmBest practice checklist
Questions?
Reach out to Brock, Tore, or Logan on Slack!
Link to Devin run: https://app.devin.ai/sessions/941173155f45427689d1f6d420d345bb
Requested by: [email protected] (@xhuang-statsig)