Integrating Documate AI Chat into VitePress Documentation Sites

Technical Overview

This article teaches how to use the open‑source tool Documate to quickly give your VitePress documentation site AI chat capabilities based on your document content. Simple configuration enables AI‑driven Q&A, supporting streaming output and open‑source customization.

How It Works

The project consists of three parts:

1. A CLI tool that uploads documents to a database via a documate.json configuration file with three fields: root , include , and backend .

2. A ready‑to‑use Q&A UI component, currently available as a Vue component and a framework‑agnostic JavaScript version.

3. An AI Ask Server that can be deployed on AirCode or your own server to provide the answering service.

How to Integrate

1. Create a new VitePress project with AI chat

npm create documate@latest --template vitepress

After creation, proceed to step 3 to configure the upload and search backend API.

2. Add AI chat to an existing VitePress project

1. Initialization

Run the following command in the project root:

npx @documate/documate init --framework vue

This generates a documate.json file:

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

It also adds a documate:upload script for uploading documents.

2. Add UI Entry

Edit .vitepress/theme/index.js (create it if missing) and import the Documate component:

import { h } from 'vue'
import DefaultTheme from 'vitepress/theme'
import Documate from '@documate/vue'
import '@documate/vue/dist/style.css'

export default {
  ...DefaultTheme,
  Layout: h(DefaultTheme.Layout, null, {
    'nav-bar-content-before': () => h(Documate, {
      endpoint: ''
    })
  })
}

This adds an "Ask AI" button to the navigation bar. Run npm run docs:dev to see it.

3. Build Upload and Search Backend API

Deploy the backend functions (upload.js and ask.js) on AirCode via the "Deploy to AirCode" button in the GitHub repository. Set the OPENAI_API_KEY environment variable in AirCode.

Copy the deployed URLs of upload.js and ask.js into documate.json (backend field) and the endpoint property in .vitepress/theme/index.js respectively.

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

// .vitepress/theme/index.js (excerpt)
endpoint: '
',

4. Run the Project

Upload documents to create the knowledge base:

npm run documate:upload

Start the site locally:

npm run docs:dev

Click the "Ask AI" button, enter a question, and receive answers generated from your documentation content.

For more configuration options, refer to the Documate GitHub repository.