Docusaurus-plugin-chat-page NPM

docusaurus-plugin-chat-page

A Docusaurus plugin that adds an AI-powered chat interface to your documentation site. Users can ask questions about your documentation and receive contextually relevant answers powered by OpenAI's GPT models.

Features

🤖 AI-powered documentation assistant
🔍 Semantic search using embeddings
💨 Fast client-side similarity search
🏗️ Build-time content processing
🔒 Secure (API keys only used at build time)
💅 Beautiful UI that matches your Docusaurus theme
⚡ Real-time streaming responses
📱 Responsive design

How It Works

Build Time:
- Processes your documentation content
- Splits content into manageable chunks
- Generates embeddings using OpenAI's API
- Creates a static JSON file with content and embeddings
Runtime:
- Performs client-side similarity search to find relevant documentation
- Uses OpenAI's Chat API to generate contextual answers
- Streams responses in real-time for better UX

Installation

npm install docusaurus-plugin-chat-page
# or
yarn add docusaurus-plugin-chat-page

Configuration

Add the plugin to your docusaurus.config.js:

module.exports = {
  // ...
  plugins: [
    [
      "docusaurus-plugin-chat-page",
      {
        path: "chat", // URL path for the chat page
        openai: {
          apiKey: process.env.OPENAI_API_KEY, // Your OpenAI API key
        },
      },
    ],
  ],
}

Adding to Navigation

To add the chat page to your site's navigation bar, update the themeConfig in your docusaurus.config.js:

module.exports = {
  // ...
  themeConfig: {
    navbar: {
      items: [
        // ... your other navbar items
        {
          to: "/chat", // Make sure this matches your plugin's path configuration
          label: "Chat",
          position: "left",
        },
        // ...
      ],
    },
  },
}