Get started with Docsify ​

Documate can work with Docsify out of the box.

Initialize Documate ​

To prepare your project for Documate, run the following command:

npm install @documate/documate --save-dev

npm install @documate/documate --save-dev

Ceate a documate.json file:

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

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

The root should be the directory where your markdown files are located.

Then add a script in your package.json file:

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

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

Add Documate UI to Your Project ​

Documate offers a vanilla JS component @documate/vanilla that you can seamlessly integrate into your Docsify project.

Import from CDN ​

<script src="https://unpkg.com/@documate/vanilla"></script>

<script src="https://unpkg.com/@documate/vanilla"></script>

Import from Package Manager ​

npm install @documate/vanilla

npm install @documate/vanilla

Then import it in your index.js file:

import '@documate/vanilla'

import '@documate/vanilla'

Add the Component ​

@documate/vanilla will automatically search for DOM elements with the ID ask-ai on the page, so you don't need to perform any manual initialization. The only thing you need to do is provide a button with the ID ask-ai on the page.

<button id="ask-ai" data-endpoint=""></button>

<button id="ask-ai" data-endpoint=""></button>

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 Documate UI you added before to pass the endpoint to the data-endpoint attribute.

<!-- Replace the URL with your own one -->
<button id="ask-ai" data-endpoint="https://test123.us.aircode.run/ask">Ask AI</button>

<!-- Replace the URL with your own one -->
<button id="ask-ai" data-endpoint="https://test123.us.aircode.run/ask">Ask AI</button>

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 run the local server and find an Ask AI button in the top nav.

docsify serve docs

docsify serve docs