Skip to main content

Docusaurus

The CrawlDesk Ask AI widget brings an interactive AI assistant to your Docusaurus docs, letting users ask questions directly within your site. It’s powered by the Crawldesk docusaurus-plugin-ai-assistant (v0.2.0), a lightweight, lazy-loaded plugin with theme customization support.

Most configuration is handled in the CrawlDesk dashboard, with optional local overrides. This guide walks you through setting up a Docusaurus project, connecting CrawlDesk data sources, deploying the widget, and verifying it works.

Key Features of the Plugin:

  • Enables interactive "Ask AI" functionality within docs.
  • Lazy-loaded for non-blocking page loads.
  • Theme support (dark, light, or custom).
  • Easy configuration via plugin options.

Prerequisites:

  • Active CrawlDesk account with a configured project and data sources.
  • Docusaurus site set up locally or hosted.
  • CrawlDesk widget API key (obtained from the CrawlDesk dashboard).

Deploying the Ask AI Widget on Docusaurus​

Follow these steps to deploy the CrawlDesk Ask AI widget in your Docusaurus v3 site using the docusaurus-plugin-ai-assistant plugin.

Step 1: Install the Plugin​

  1. Open Your Terminal
    Navigate to your Docusaurus project’s root directory.

  2. Install the Plugin
    Run one of the following commands to install the docusaurus-plugin-ai-assistant package:

    npm install --save docusaurus-plugin-ai-assistant

    or

    yarn add docusaurus-plugin-ai-assistant

  3. Verify Installation Check that the plugin is listed in your package.json under dependencies, with version 0.2.0 or later.

Step 2: Configure the Plugin​

  1. Obtain Your API Key Log in to the CrawlDesk dashboard at https://app.crawldesk.com/dashboard/. Navigate to your project’s AI Widget section to retrieve your CrawlDesk widget API key.

  2. Update Docusaurus Configuration Open your docusaurus.config.js file in the project root. Add the plugin configuration as follows:

    module.exports = {
      plugins: [
        [
          "docusaurus-plugin-ai-assistant",
          {
            key: "YOUR_CRAWLDESK_WIDGET_KEY",
            config: {
              theme: "dark", // Optional: Choose "dark", "light", or custom
            },
          },
        ],
      ],
    };

    Replace YOUR_CRAWLDESK_WIDGET_KEY with your actual CrawlDesk API key. The config object is optional and allows local overrides (e.g., theme). Most settings are managed via the CrawlDesk dashboard.

  3. Save the File Ensure the configuration is saved correctly without syntax errors.

Step 3: Build and Test the Widget​

  1. Build Your Docusaurus Site Run the following command to build your site:

    npm run build

  2. Test Locally Start the development server to preview the widget:

    npm run start

    Verify that the Ask AI widget appears in your docs and responds to queries based on your indexed data sources.

  3. Deploy to Production Deploy your Docusaurus site to your hosting provider (e.g., Vercel, Netlify). The widget will automatically load on your live site, provided the API key is valid and data sources are indexed.