@cookbookdev/docusaurus-chefgpt NPM

ChefGPT Docusaurus Integration

A ChefGPT integration for Docusaurus by Cookbook.dev.

Installation

Yarn

yarn add @cookbookdev/docusaurus-chefgpt

NPM

npm install --save @cookbookdev/docusaurus-chefgpt

Usage

1(a). Simple (If you don't use other search plugin, like Algolia)

In your docusaurus.config.js, add @cookbookdev/docusaurus-chefgpt to themes, then add the cookbookDocsBot object to themeConfig:

const config = {
  // …

  themes: [
    // …
    "@cookbookdev/docusaurus-chefgpt",
  ],
};

1(b). Advanced (If you use other theme/plugin hijacking the `SearchBar` component)

If your Docusaurus project already has a search plugin, such as theme-search-algolia, you need to swizzle the current search plugin, and add ChefGPT as a standalone component.

To swizzle your current search plugin, run:

npx docusaurus swizzle

Choose Wrap, and confirm. This will create a SearchBar wrapper component in src/theme/SearchBar that you can edit.

Edit /src/theme/SearchBar/index.js to include ChefGPT component. Here's a basic example:

import React from "react";
import SearchBar from "@theme-original/SearchBar";
import ChefGPT from "@cookbookdev/docusaurus-chefgpt/theme/SearchBar";

export default function SearchBarWrapper(props) {
  return (
    <>
      <SearchBar {...props} />
      <ChefGPT />
    </>
  );
}

Install @cookbookdev/docusaurus-jsx-runtime-fallback-plugin that will add react/jsx-runtime fallback to your webpack config:

yarn add --dev @cookbookdev/docusaurus-jsx-runtime-fallback-plugin

Add the plugin to your docusaurus.config.js:

const config = {
  // …

  plugins: [
    // …
    "@cookbookdev/docusaurus-jsx-runtime-fallback-plugin",
  ],
};

2. Configuration

const config = {
  // ...
  themeConfig: {
    // ...

    /** @type {import('@cookbookdev/docusaurus-chefgpt').ThemeConfig['cookbookDocsBot']} */
    cookbookDocsBot: {
      // Required
      dataSources: [
        {
          name: "Linea",
          hostname: "https://docs.linea.build",
        },
        {
          name: "Infura",
          hostname: "https://docs.infura.io",
        },
        {
          name: "Metamask",
          hostname: "https://docs.metamask.io",
        },
      ],
      greetingMessage: "Hi! I'm ChefGPT. How can I help you?",
      dialogTitle: "ChefGPT",
      suggestions: ["What is Bitcoin?", "How could I send a transaction?"],
      avatars: {
        ChefGPT: "/favicon.svg",
        User: "https://cookbook.dev/img/Richard.png",
      },
    },

    // Optional
    messageInputPlaceholder: "Ask a question",
    ui: {
      openModalButton: {
        className: "openModalButtonSampleClass",
      },
      outerContainer: {
        className: "outerContainerSampleClass",
      },
      modalContainer: {
        width: "1000px",
        height: "800px",
        shadow: "inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309",
        background: "var(--ifm-background-surface-color)",

        className: "sampleModalContainerClassName",
      },
      messagesContainer: {
        className: "messagesContainerSampleClass",
      },
      suggestionsContainer: {
        className: "suggestionsContainerSampleClass",
      },
      messageInputContainer: {
        className: "messageInputContainerSampleClass",
      },
      messageInputField: {
        className: "messageInputFieldSampleClass",
      },
    },

    //Advanced (You likely don't need to change these)
    apiBaseUrl: "https://example.com",
    preTextPrompt: null,
    explainPromptTemplate: "Please explain this part of the docs: ```$1```",
    extraTrackingData: {},
  },
};