Docusaurus Integration

Features#

• 🤖 AI-powered search results based on your documentation
• 🎨 Modern and responsive UI
• 🌜 Dark/Light mode support

Installation#

To install the package, run:

npm install @upstash/docusaurus-theme-upstash-search

Configuration#

Enabling the Searchbar#

To enable the searchbar, add the following to your docusaurus config file:

export default {  themes: ['@upstash/docusaurus-theme-upstash-search'],  // ...  themeConfig: {    // ...    upstash: {      upstashSearchRestUrl: "UPSTASH_SEARCH_REST_URL",      upstashSearchReadOnlyRestToken: "UPSTASH_SEARCH_READ_ONLY_REST_TOKEN",      upstashSearchIndexName: "UPSTASH_SEARCH_INDEX_NAME",    },  },};

The default index name is docusaurus. You can override it by setting the upstashSearchIndexName option.

You can fetch your URL and read only token from Upstash Console. Make sure to use the read only token!

If you do not have a search database yet, you can create one from Upstash Console. Make sure to use Upstash generated embedding model.

Indexing Your Documentation#

Setting Up Environment Variables#

To index your documentation, create a .env file with the following environment variables:

UPSTASH_SEARCH_REST_URL=UPSTASH_SEARCH_REST_TOKEN=UPSTASH_SEARCH_INDEX_NAME=DOCS_PATH=

You can fetch your URL and token from Upstash Console. This time do not use the read only token since we are upserting data.

Running the Indexing Script#

After setting up your environment variables, run the indexing command:

npx index-docs-upstash

Configuration Options#

• DOCS_PATH: The indexing script looks for documentation in the docs directory by default. You can specify a different path using the DOCS_PATH option.
• UPSTASH_SEARCH_INDEX_NAME: The default index name is docusaurus. You can override it by setting the UPSTASH_SEARCH_INDEX_NAME option. Make sure the name you set while indexing matches with your themeConfig upstashSearchIndexName option.

For more details on how this integration works, check out the official repository.