Markprompt Docusaurus plugin

A Chatjet-ai plugin for Docusaurus.

Table of Contents

• Installation
• Usage
  • Basic Usage
  • Swizzling
• Example
• Community
• Authors

Installation

npm install @chatjet-ai/docusaurus-theme-search

Usage

Basic Usage

In your docusaurus.config.js, add @chatjet-ai/docusaurus-theme-search to themes. Configure markprompt in the themeConfig.

const config = {
  // …

  themes: [
    // …
    '@chatjet-ai/docusaurus-theme-search',
  ],

  themeConfig:
    /** @type {import('@chatjet-ai/docusaurus-theme-search').ThemeConfig} */ ({
      markprompt: {
        projectKey: 'Your Markprompt key',
      },
    }),
};

Now a search button will appears on your docusaurus page.

Swizzling

The Markprompt SearchBar can be swizzled. This allows you to fully customize the prompt. To swizzle, run:

npx docusaurus swizzle '@chatjet-ai/docusaurus-theme-search' SearchBar --typescript

Choose Wrap, and confirm.

This is useful for example if you want to add another search provider in addition to Markprompt. Typically you will want to wrap <Markprompt.Root> in a fragment and add your custom search provider.

export default function SearchBar() {
  const { siteConfig } = useDocusaurusContext();
  const markpromptConfig = siteConfig.themeConfig.markprompt;

  return (
    <>
      <YourSearchComponent />
      <Markprompt.Root {...markpromptConfig}>
    </>
  )
}

Example

An example is available on https://github.com/motifland/markprompt-js/tree/main/examples/with-docusaurus.

Community

• Twitter @chatjet-ai
• Discord

Authors

This library is created by the team behind chatjet-ai (@chatjet-ai).