Supercharge Your Docs with AI Using Cloudflare AutoRAG

🧠 Building a Smart Documentation Chatbot with Docusaurus, Cloudflare AutoRAG, and GitHub Actions

Learn how to turn your Docusaurus docs into an AI-powered assistant using Cloudflare’s AutoRAG, R2, Workers, and a chat UI starter. Perfect for developers and tech enthusiasts.

---

Why this matters

Documentation is only useful if people can use it. With an embedded AI chatbot, your docs become searchable, contextual, and interactive — like having a knowledgeable teammate 24/7.

---

Tech Stack

• Docusaurus – static documentation site generator
• Cloudflare R2 – object storage for Markdown files
• Cloudflare AutoRAG – automatic chunking and embedding for semantic search
• Cloudflare Workers – serverless logic to handle chat requests
• Cloudflare AI Agent Starter – a UI+backend scaffold for chatbot interfaces
• Claude 3 Sonnet / GPT-4 – LLMs to generate natural responses
• GitHub Actions – to sync .md files from your repo to R2

---

System Overview

╭───────────────────────────╮│ Docusaurus Markdown Files │╰───────────────────────────╯↓╭───────────────╮│ GitHub Action │╰───────────────╯↓╭───────────────────╮│ R2 Object Storage │╰───────────────────╯↓╭──────────────────╮│ AutoRAG Indexing │╰──────────────────╯↓╭──────────────────────────╮│ AI Agent / Vector Search │╰──────────────────────────╯↓╭───────────────────╮│ Chatbot Interface │╰───────────────────╯

---

Step 1 – Prepare Docusaurus content

Make sure your docs live inside the usual /docs folder. Build your static site with:

npm run build

Then collect the .md or .mdx files. You can upload raw Markdown or pre-parsed HTML depending on your pipeline.

---

Step 2 – Sync Markdown to R2 via GitHub Action

Create a GitHub Action that runs on push and uploads all Markdown files to your R2 bucket. Example:

name: Sync Docs to R2

on:
  push:
    paths:
      - 'docs/**'
    branches:
      - main
jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repo
        uses: actions/checkout@v3
      - name: Install AWS CLI via pip
        run: |
          python3 -m pip install --upgrade pip
          pip install awscli
      - name: Configure AWS CLI manually for R2
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_ACCESS_KEY }}
        run: |
          aws configure set aws_access_key_id "$AWS_ACCESS_KEY_ID"
          aws configure set aws_secret_access_key "$AWS_SECRET_ACCESS_KEY"
          aws configure set default.region us-east-1
      - name: Sync docs folder to R2
        env:
          BUCKET_NAME: ${{ secrets.R2_BUCKET_NAME }}
          ENDPOINT: ${{ secrets.R2_ENDPOINT }}
        run: |
          aws s3 sync ./docs s3://$BUCKET_NAME \
            --endpoint-url $ENDPOINT \
            --acl public-read \
            --delete

This keeps your docs always in sync with R2.

---

Step 3 – Configure AutoRAG Dataset

1. Create a dataset from the Cloudflare dashboard
2. Choose R2 as source
3. AutoRAG will:
   • Ingest .md files
   • Chunk the content (e.g., 500 tokens with 100 token overlap)
   • Generate semantic embeddings
   • Index metadata like file paths

Now your documentation is searchable using vector similarity!

---

Step 4 – Create the Chat Agent

• A /api/chat endpoint on Workers
• Logic to call your LLM with AutoRAG context

Example snippet:

export async function generateResponse(prompt) {
  const results = await env.AI.autorag('your-rag-name').search({
    query: prompt,
  });

  return callLLM(`
    You are a helpful assistant. Use the following documentation context:

    ${context}

    User: ${prompt}
  `);
}

---

Step 5 – Deploy

Use Cloudflare Pages for the frontend and Workers for the backend:

wrangler deploy

Step 6 – Modify Docusaurus to add chat widget

To embed the chatbot in your Docusaurus site, you can inject a floating chat component or a dedicated page. Here’s how to add a floating chat button globally:

1. Create a ChatWidget component

Inside your Docusaurus project, create a new file:

// src/components/ChatWidget.js
import React, { useState } from 'react';

export default function ChatWidget() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <div
        onClick={() => setOpen(!open)}
        style={{
          position: 'fixed',
          bottom: '1.5rem',
          right: '1.5rem',
          backgroundColor: '#2e8555',
          color: '#fff',
          padding: '0.8rem 1rem',
          borderRadius: '50%',
          cursor: 'pointer',
          zIndex: 1000,
        }}
      >
        💬
      </div>
      {open && (
        <iframe
          src="https://your-worker-endpoint.workers.dev"
          title="AI Chatbot"
          style={{
            position: 'fixed',
            bottom: '5rem',
            right: '1.5rem',
            width: '400px',
            height: '500px',
            border: '1px solid #ccc',
            borderRadius: '8px',
            zIndex: 1000,
          }}
        />
      )}
    </>
  );
}

2. Inject the widget into your layout

Edit your src/theme/Layout/index.js to include the chat widget:

// src/theme/Layout/index.js
import React from 'react';
import Layout from '@theme-original/Layout';
import ChatWidget from '@site/src/components/ChatWidget';

export default function LayoutWrapper(props) {
  return (
    <>
      <Layout {...props} />
      <ChatWidget />
    </>
  );
}

---

Bonus Features

• 🔍 Show document source and section for each answer
• ⏱ Add streaming responses for ChatGPT-like feel
• 🎯 Tune your agent’s tone (formal, technical, casual…)
• 🔐 Add Supabase or Clerk for user auth
• 🤖 Create a custom GPT to use RAG inside your ChatGPT

---

Final Thoughts

AutoRAG + Docusaurus is an incredibly effective combo to bring your documentation to life. With minimal setup, you give your users a fast, friendly, and AI-native way to explore even complex content.

And thanks to GitHub Actions, you can keep everything updated automatically.