If you are already using Algolia, you have the option to replace the Markprompt search with Algolia's powerful engine. This can be achieved by using our custom Algolia search provider:
1import { Markprompt } from '@markprompt/react';
2
3function Example() {
4 return (
5 <Markprompt
6 projectKey="YOUR-PROJECT-KEY"
7 search={{
8 enabled: true,
9 provider: {
10 name: 'algolia',
11 apiKey: 'YOUR-ALGOLIA-API-KEY',
12 appId: 'YOUR-ALGOLIA-APP-ID',
13 indexName: 'YOUR-ALGOLIA-INDEX-NAME',
14 searchParameters: {
15 // Algolia search parameters
16 },
17 },
18 }}
19 >
20 <button>Open Markprompt</button>
21 </Markprompt>
22 );
23}
Now, search results will be fetched from your Algolia index.
Mapping Algolia properties
Depending on how your Algolia index is set up, you may need to provide mappings between search results from Algolia, and Markprompt. These mappings define what is displayed in the heading, title and subtitle of a search result, as well as the links to navigate to. Say your Algolia index returns search results of the shape:
1[
2 {
3 "href": "https://markprompt/docs/introduction",
4 "pageTitle": "Introduction",
5 "description": "Welcome to Markprompt",
6 "content": "Markprompt is...",
7 },
8 ...
9]
These custom properties can be mapped to Markprompt using the getHref, getHeading, getTitle and getSubtitle callbacks. In our React example above, here is how it would look:
1import { Markprompt } from '@markprompt/react';
2
3function Example() {
4 return (
5 <Markprompt
6 projectKey="YOUR-PROJECT-KEY"
7 search={{
8 enabled: true,
9 provider: {
10 name: 'algolia',
11 apiKey: 'YOUR-ALGOLIA-API-KEY',
12 appId: 'YOUR-ALGOLIA-APP-ID',
13 indexName: 'YOUR-ALGOLIA-INDEX-NAME',
14 getHref: (result) => result.href,
15 getHeading: (result) => result.pageTitle,
16 getTitle: (result) => result.pageDescription,
17 getSubtitle: (result) => result.pageContent,
18 },
19 }}
20 >
21 <button>Open Markprompt</button>
22 </Markprompt>
23 );
24}