The Complete Production SOP: How to Deploy and Run Docusaurus v3 React Documentation Engine in Autonomous AI Agents

---
name: "docusaurus-developer-docs-v3"
description: "Build rich, interactive React-powered documentation platforms with Docusaurus v3."
metadata:
  author: "Meta"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "configure docusaurus v3"
  - "create versioned docs docusaurus"
  - "embed react component in docusaurus mdx"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import { Config } from '@docusaurus/types';
import type * as Preset from '@docusaurus/preset-classic';

const config: Config = {
  title: 'Platform Engineering Hub',
  tagline: 'Deterministic Infrastructure Documentation',
  url: 'https://docs.example.internal',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },
  presets: [
    [
      'classic',
      {
        docs: {
          sidebarPath: './sidebars.ts',
          editUrl: undefined,
        },
        theme: {
          customCss: './src/css/custom.css',
        },
      } satisfies Preset.Options,
    ],
  ],
};

export default config;

import React, { useState } from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import styles from './styles.module.css';

interface PayloadViewerProps {
  readonly defaultPayload: Record<string, unknown>;
}

export default function InteractivePayloadViewer({ defaultPayload }: PayloadViewerProps): JSX.Element {
  const [copied, setCopied] = useState<boolean>(false);

  const handleCopy = () => {
    navigator.clipboard.writeText(JSON.stringify(defaultPayload, null, 2));
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <BrowserOnly fallback={<div className={styles.loading}>Loading client viewer...</div>}>
      {() => (
        <div className={styles.container}>
          <pre className={styles.code}>{JSON.stringify(defaultPayload, null, 2)}</pre>
          <button type="button" onClick={handleCopy} className={styles.copyBtn}>
            {copied ? 'Copied!' : 'Copy Schema'}
          </button>
        </div>
      )}
    </BrowserOnly>
  );
}