Get Started with Docusaurus ​

There are two ways you can integrate Documate with Docusaurus. Both are convinient and can be done in a few minutes.

• Create a new Docusaurus site using CLI
• Add to an existing Docusaurus site

Quickstart for New Project ​

To create a new Docusaurus site with Documate, use the following command:

npm create documate@latest --template docusaurus

npm create documate@latest --template docusaurus

Then follow the prompts.

After the project is created, please follow the instructions to connect it to a backend.

Mannually Add to Existing Project ​

If you already have a Docusaurus site, you can add Documate to it by following these steps:

1. Initialize Documate ​

In the root of your project, run the following command:

npx @documate/documate init --framework react

npx @documate/documate init --framework react

This command does the following:

• Install @documate/documate and @documate/react packages to your project
• Create a documate.json

{
  "root": ".",
  "include": [ "**/*.md", "**/*.mdx" ],
  "backend": ""
}

{
  "root": ".",
  "include": [ "**/*.md", "**/*.mdx" ],
  "backend": ""
}

• Add a script to your package.json

{
  "scripts": {
    ...
    "documate:upload": "documate upload"
  }
}

{
  "scripts": {
    ...
    "documate:upload": "documate upload"
  }
}

2. Add Documate UI to Your Project ​

Docusaurus allows you to customize the project by swizzling. Run the following command to add Documate UI to the navbar:

npm run swizzle @docusaurus/theme-classic NavbarItem/ComponentTypes -- --eject

npm run swizzle @docusaurus/theme-classic NavbarItem/ComponentTypes -- --eject

This guide assumes that you are using the classic theme. If you are using other themes, you should replace @docusaurus/theme-classic with the theme name of yours.

The command will create a src/theme/NavbarItem/ComponentTypes.js file. Open it and add the following code:

import { Documate } from '@documate/react';
import '@documate/react/dist/style.css';

const ComponentTypes = {
  default: DefaultNavbarItem,
  localeDropdown: LocaleDropdownNavbarItem,
  search: SearchNavbarItem,
  dropdown: DropdownNavbarItem,
  html: HtmlNavbarItem,
  doc: DocNavbarItem,
  docSidebar: DocSidebarNavbarItem,
  docsVersion: DocsVersionNavbarItem,
  docsVersionDropdown: DocsVersionDropdownNavbarItem,
  'custom-documate': Documate,
};

import { Documate } from '@documate/react';
import '@documate/react/dist/style.css';

const ComponentTypes = {
  default: DefaultNavbarItem,
  localeDropdown: LocaleDropdownNavbarItem,
  search: SearchNavbarItem,
  dropdown: DropdownNavbarItem,
  html: HtmlNavbarItem,
  doc: DocNavbarItem,
  docSidebar: DocSidebarNavbarItem,
  docsVersion: DocsVersionNavbarItem,
  docsVersionDropdown: DocsVersionDropdownNavbarItem,
  'custom-documate': Documate,
};

Then go to the docusaurus.config.js file and add Documate UI in the navbar.items section:

const config = {
  ...
  themeConfig: {
    navbar: {
      items: [
        ...
        {
          type: 'custom-documate',
          position: 'right',
          endpoint: '',
        },
      ],
    },
  },
}

const config = {
  ...
  themeConfig: {
    navbar: {
      items: [
        ...
        {
          type: 'custom-documate',
          position: 'right',
          endpoint: '',
        },
      ],
    },
  },
}

Connect to Backend ​

Now you are all set with the frontend. The last step is to connect it to the backend.

Prerequisite ​

Before continue, please make sure you have built and deployed the backend. Follow Build the Backend Guide if you haven't done so. It only takes 5 minutes.

1. Add the Backend URL to documate.json ​

Open your backend App in the AirCode dashboard, select the deployed upload.js file, and copy the backend URL. It's located under the function's name.

Then add it to the documate.json file:

{
  "root": ".",
  "include": [ "**/*.md", "**/*.mdx" ],
  "backend": "https://test123.us.aircode.run/upload"
}

{
  "root": ".",
  "include": [ "**/*.md", "**/*.mdx" ],
  "backend": "https://test123.us.aircode.run/upload"
}

Remember to replace https://test123.us.aircode.run/upload with your own one.

2. Add the ask Endpoint to Component ​

Find the ask endpoint (Which is the URL for ask.js), and click to copy it.

Modify the docusaurus.config.js file to pass the endpoint to the Documate component as props.

const config = {
  ...
  themeConfig: {
    navbar: {
      items: [
        ...
        {
          type: 'custom-documate',
          position: 'right',
          // Replace the URL with your own one
          endpoint: 'https://test123.us.aircode.run/ask',
        },
      ],
    },
  },
}

const config = {
  ...
  themeConfig: {
    navbar: {
      items: [
        ...
        {
          type: 'custom-documate',
          position: 'right',
          // Replace the URL with your own one
          endpoint: 'https://test123.us.aircode.run/ask',
        },
      ],
    },
  },
}

Run the Project ​

Now you're all set with Documate. Run the following command to upload your content to backend and generate the knowledge base:

npm run documate:upload

npm run documate:upload

After the command finishes, you can start the dev server and find the Ask AI button at the top right corner.

npm start

npm start