Fix frontend integration guides#3595
Conversation
📝 WalkthroughWalkthroughFour quick-start documentation files are updated to correct and modernize broken front-end integration examples. Docsearch integration now uses the community-maintained ChangesFront-end Integration Guide Updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (5)
getting_started/instant_meilisearch/react.mdx (2)
118-118:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winReplace "e.g." with "for example".
As per coding guidelines, prefer "for example" over "e.g." to keep documentation accessible.
📝 Proposed fix
-Now open your browser and navigate to your React app URL (e.g. `localhost:3000`), and start searching. +Now open your browser and navigate to your React app URL (for example, `localhost:3000`), and start searching.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@getting_started/instant_meilisearch/react.mdx` at line 118, Update the sentence containing "Now open your browser and navigate to your React app URL (e.g. `localhost:3000`), and start searching." by replacing "e.g." with "for example" so it reads "Now open your browser and navigate to your React app URL (for example `localhost:3000`), and start searching."; ensure only the abbreviation is changed and spacing/punctuation around the parenthetical remains correct.Source: Coding guidelines
70-70:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUpdate component name for consistency.
The text references "The Hits component" but the code example uses
InfiniteHits. Update to "The InfiniteHits component" for accuracy.📝 Proposed fix
-Add the `SearchBox` and `InfiniteHits` components inside the `InstantSearch` wrapper component. The Hits component accepts a custom Hit component via the `hitComponent` prop, which allows customizing how each search result is rendered. +Add the `SearchBox` and `InfiniteHits` components inside the `InstantSearch` wrapper component. The InfiniteHits component accepts a custom Hit component via the `hitComponent` prop, which allows customizing how each search result is rendered.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@getting_started/instant_meilisearch/react.mdx` at line 70, The documentation text incorrectly refers to "The Hits component" while the example uses InfiniteHits; update the sentence to reference "The InfiniteHits component" for consistency and accuracy, and ensure it still mentions the hitComponent prop and the SearchBox/InstantSearch wrapper (referencing InstantSearch, SearchBox, InfiniteHits, and hitComponent) so readers know which components and prop are involved.Source: Coding guidelines
getting_started/instant_meilisearch/vue.mdx (3)
67-67:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winFix subject-verb agreement.
"These URL and API key point" should use singular "This URL and API key point" or plural "These URL and API key values point" for grammatical correctness.
📝 Proposed fix
-These URL and API key point to a public Meilisearch instance that contains data from Steam video games. +This URL and API key point to a public Meilisearch instance that contains data from Steam video games.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@getting_started/instant_meilisearch/vue.mdx` at line 67, The sentence "These URL and API key point to a public Meilisearch instance..." has a subject-verb agreement issue; change it to either "This URL and API key point to a public Meilisearch instance..." if you mean the single pair, or "These URL and API key values point to a public Meilisearch instance..." if you prefer plural—update the sentence in getting_started/instant_meilisearch/vue.mdx accordingly to keep tense and plurality consistent.Source: Coding guidelines
98-106:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winFix indentation to match earlier code block.
The
data()method and its contents lack consistent indentation compared to the first code block at lines 54-63. Add proper indentation for readability and consistency.📝 Proposed fix
export default { -data() { + data() { return { - searchClient: instantMeiliSearch( + searchClient: instantMeiliSearch( 'https://ms-adf78ae33284-106.lon.meilisearch.io', 'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303', - ).searchClient, + ).searchClient, }; -}, + }, };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@getting_started/instant_meilisearch/vue.mdx` around lines 98 - 106, The data() block in the Vue snippet has inconsistent indentation; adjust the indentation of the data() method and its returned object so the keys (searchClient) and the instantMeiliSearch(...) call align with the style used earlier (lines 54-63). Locate the data() function and its return object, reformat the nested instantMeiliSearch(...) and .searchClient line to use the same indentation level as the first code block, and ensure closing braces and commas follow the same indentation pattern.
125-125:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winReplace "e.g." with "for example".
As per coding guidelines, prefer "for example" over "e.g." to keep documentation accessible.
📝 Proposed fix
-Now open your browser, navigate to your Vue app URL (e.g., `localhost:5173`), and start searching. +Now open your browser, navigate to your Vue app URL (for example, `localhost:5173`), and start searching.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@getting_started/instant_meilisearch/vue.mdx` at line 125, Replace the abbreviation "e.g." with the phrase "for example" in the sentence "Now open your browser, navigate to your Vue app URL (e.g., `localhost:5173`), and start searching." so it reads "Now open your browser, navigate to your Vue app URL (for example, `localhost:5173`), and start searching."; update the parentheses content and ensure punctuation/spacing remains correct around the replaced text.Source: Coding guidelines
🧹 Nitpick comments (1)
getting_started/instant_meilisearch/docsearch.mdx (1)
140-140: 💤 Low valueConsider simplifying "Following on from this tutorial".
The phrase "Following on from this tutorial" could be more direct. Consider "Following this tutorial" or "Based on this tutorial" for clearer, more concise documentation.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@getting_started/instant_meilisearch/docsearch.mdx` at line 140, Update the sentence describing the Meilisearch credentials: replace the phrase "Following on from this tutorial" with a more concise alternative such as "Following this tutorial" or "Based on this tutorial" in the line that explains the `host` and `apiKey` fields (the sentence mentioning `MEILISEARCH_URL` and `Default Search API Key`).Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@getting_started/instant_meilisearch/docsearch.mdx`:
- Around line 126-134: The snippet uses the wrong global name for the bundled
API: replace accesses to window.__docsearch_meilisearch__ with
window.docsearch_meilisearch so the destructuring const { docsearch } =
window.docsearch_meilisearch works; update the script-tag example that
constructs docsearch({ container, host, apiKey, indexUid }) to pull docsearch
from window.docsearch_meilisearch instead of window.__docsearch_meilisearch__.
---
Outside diff comments:
In `@getting_started/instant_meilisearch/react.mdx`:
- Line 118: Update the sentence containing "Now open your browser and navigate
to your React app URL (e.g. `localhost:3000`), and start searching." by
replacing "e.g." with "for example" so it reads "Now open your browser and
navigate to your React app URL (for example `localhost:3000`), and start
searching."; ensure only the abbreviation is changed and spacing/punctuation
around the parenthetical remains correct.
- Line 70: The documentation text incorrectly refers to "The Hits component"
while the example uses InfiniteHits; update the sentence to reference "The
InfiniteHits component" for consistency and accuracy, and ensure it still
mentions the hitComponent prop and the SearchBox/InstantSearch wrapper
(referencing InstantSearch, SearchBox, InfiniteHits, and hitComponent) so
readers know which components and prop are involved.
In `@getting_started/instant_meilisearch/vue.mdx`:
- Line 67: The sentence "These URL and API key point to a public Meilisearch
instance..." has a subject-verb agreement issue; change it to either "This URL
and API key point to a public Meilisearch instance..." if you mean the single
pair, or "These URL and API key values point to a public Meilisearch
instance..." if you prefer plural—update the sentence in
getting_started/instant_meilisearch/vue.mdx accordingly to keep tense and
plurality consistent.
- Around line 98-106: The data() block in the Vue snippet has inconsistent
indentation; adjust the indentation of the data() method and its returned object
so the keys (searchClient) and the instantMeiliSearch(...) call align with the
style used earlier (lines 54-63). Locate the data() function and its return
object, reformat the nested instantMeiliSearch(...) and .searchClient line to
use the same indentation level as the first code block, and ensure closing
braces and commas follow the same indentation pattern.
- Line 125: Replace the abbreviation "e.g." with the phrase "for example" in the
sentence "Now open your browser, navigate to your Vue app URL (e.g.,
`localhost:5173`), and start searching." so it reads "Now open your browser,
navigate to your Vue app URL (for example, `localhost:5173`), and start
searching."; update the parentheses content and ensure punctuation/spacing
remains correct around the replaced text.
---
Nitpick comments:
In `@getting_started/instant_meilisearch/docsearch.mdx`:
- Line 140: Update the sentence describing the Meilisearch credentials: replace
the phrase "Following on from this tutorial" with a more concise alternative
such as "Following this tutorial" or "Based on this tutorial" in the line that
explains the `host` and `apiKey` fields (the sentence mentioning
`MEILISEARCH_URL` and `Default Search API Key`).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2bf78a5c-15d8-4d0d-88fd-61569b2331e9
📒 Files selected for processing (4)
getting_started/instant_meilisearch/docsearch.mdxgetting_started/instant_meilisearch/javascript.mdxgetting_started/instant_meilisearch/react.mdxgetting_started/instant_meilisearch/vue.mdx
| <script src="https://unpkg.com/meilisearch-docsearch@latest/dist/index.global.js"></script> | ||
| <script> | ||
| docsSearchBar({ | ||
| hostUrl: '<your-meilisearch-host-url>', | ||
| const { docsearch } = window.__docsearch_meilisearch__; | ||
| docsearch({ | ||
| container: '#docsearch', | ||
| host: '<your-meilisearch-host-url>', | ||
| apiKey: '<your-meilisearch-api-key>', | ||
| indexUid: 'docs', | ||
| inputSelector: '#search-bar-input', | ||
| debug: true // Set debug to true if you want to inspect the dropdown | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
What is the correct global variable name and initialization API for the meilisearch-docsearch library when loaded via script tag?
💡 Result:
When using the meilisearch-docsearch library via a script tag (CDN), the library exposes its functionality through the global variable window.docsearch_meilisearch [1][2][3]. To initialize the component, you must destructure the docsearch function from this global object and call it with the required configuration parameters [1][4]. Example implementation: <script src="https://unpkg.com/meilisearch-docsearch@latest/dist/index.global.js"></script> <script> const { docsearch } = window.docsearch_meilisearch; docsearch({ container: "#docsearch", host: "YOUR_HOST_URL", apiKey: "YOUR_SEARCH_API_KEY", indexUid: "YOUR_INDEX_UID", }); </script> The container parameter accepts either a CSS selector string (e.g., "#docsearch") or a DOM element [3][4]. Note that this library is distinct from the deprecated docs-searchbar.js, which used a different initialization API [5][6][7].
Citations:
- 1: https://www.npmjs.com/package/meilisearch-docsearch
- 2: https://github.com/tauri-apps/meilisearch-docsearch/blob/dev/README.md
- 3: https://registry.npmjs.org/meilisearch-docsearch
- 4: https://github.com/ruibaby/meilisearch-docsearch
- 5: https://github.com/meilisearch/docs-searchbar.js
- 6: Using docs-searchbar.js library without using docs-scraper tool docs-searchbar.js#40
- 7: https://github.com/meilisearch/docs-searchbar.js/
Fix the meilisearch-docsearch global used by the script-tag example.
meilisearch-docsearch exposes its API on window.docsearch_meilisearch (not window.__docsearch_meilisearch__). With the incorrect global, the snippet won’t run. The rest of the docsearch({ ... }) config shape (including apiKey and indexUid) matches the expected initialization.
Suggested change
const { docsearch } = window.docsearch_meilisearch;
docsearch({
container: '`#docsearch`',
host: '<your-meilisearch-host-url>',
apiKey: '<your-meilisearch-api-key>',
indexUid: 'docs',
});🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@getting_started/instant_meilisearch/docsearch.mdx` around lines 126 - 134,
The snippet uses the wrong global name for the bundled API: replace accesses to
window.__docsearch_meilisearch__ with window.docsearch_meilisearch so the
destructuring const { docsearch } = window.docsearch_meilisearch works; update
the script-tag example that constructs docsearch({ container, host, apiKey,
indexUid }) to pull docsearch from window.docsearch_meilisearch instead of
window.__docsearch_meilisearch__.
2 participants
Description
Fixes #3165
Checklist
For internal Meilisearch team member only:
For external maintainers
Overview
This PR fixes frontend integration documentation and examples by updating code snippets and dependencies across multiple Instant Meilisearch integration guides. The changes address issue
#3165, which reported that example codes were missing required parameters and contained deprecated references.Changes
Documentation Updates
docsearch.mdx
meilisearch-docsearchcomponentdocs-searchbar.jsreferences withmeilisearch-docsearchCDN assets fromunpkghost,apiKey, andindexUidinputSelectorconfiguration discussionjavascript.mdx
instant-meilisearch.umd.min.jsandinstantsearch.js@4from CDNsearchBoxwidget configuration to use shorthand factory syntaxreact.mdx
instant-meilisearchtoinstantMeiliSearchsearchClientinitialization to use the correctinstantMeiliSearchAPI call patternvue.mdx
instantMeilisearch→instantMeiliSearchApp.vueexamplessearchClientinitializationImpact
All four documentation files now include correct API references and initialization patterns, enabling users to properly implement frontend search integration with the required public API key parameter.