Add to an Existing Project

You can integrate EnhanceDocs Search and EnhanceDocs Chat in your project easily.

EnhanceDocs components are an open-source search and chat components ready to use for your React projects.

Search

npm

npm install enhancedocs-search

Yarn

yarn add enhancedocs-search

pnpm

pnpm add enhancedocs-search

Add the search where you like in your code! You will need to use the credentials from the previous step.

import EnhancedSearch from 'enhancedocs-search';

import 'enhancedocs-search/dist/style.css';

<EnhancedSearch
  config={{
    enhancedSearch: {
      projectId: "1234a5678b98126bfdbdc6a6",
      accessToken: "pk_a12345b0cd1c5951f810dba47c49261296cd6ed41cfca5cf"
    }
  }}
  {...props}
/>

Docusaurus Example using the Search

Configure Docusaurus theme to use your own search. See official documentation here.

// src/theme/SearchBar.js

import React from 'react';
import EnhancedSearch from 'enhancedocs-search';

import 'enhancedocs-search/dist/style.css';

export default function SearchBarWrapper(props) {
  return (
    <EnhancedSearch
      config={{
        enhancedSearch: {
          projectId: "1234a5678b98126bfdbdc6a6",
          accessToken: "pk_a12345b0cd1c5951f810dba47c49261296cd6ed41cfca5cf"
        }
      }}
      {...props}
    />
  );
}

Now you can start using your AI-powered search engine for your documentation 🚀🚀

Chat

npm

npm install enhancedocs-chat

Yarn

yarn add enhancedocs-chat

pnpm

pnpm add enhancedocs-chat

import EnhancedChat from 'enhancedocs-chat';

import 'enhancedocs-chat/dist/style.css';

<EnhancedChat
  config={{
    projectId: "1234a5678b98126bfdbdc6a6",
    accessToken: "pk_a12345b0cd1c5951f810dba47c49261296cd6ed41cfca5cf"
  }}
  {...props}
/>

Docusaurus Example using the Chat

Add the Chat component by extending the Root theme:

// src/theme/Root.js

import EnhancedChat from 'enhancedocs-chat';

import 'enhancedocs-chat/dist/style.css';

// Default implementation, that you can customize
export default function Root({ children }) {
  return (
    <>
      {children}
      <EnhancedChat
        config={{
          projectId: '1234a5678b98126bfdbdc6a6',
          accessToken: 'pk_a12345b0cd1c5951f810dba47c49261296cd6ed41cfca5cf'
        }}
        {...props}
      />
    </>
  );
}