Add AI Search Capability

package.json

@@ -47,6 +47,7 @@
     "@sentry/browser": "^8.51.0",
     "@types/react": "^18.3.3",
     "clsx": "^2.1.1",
+    "docusaurus-openai-search": "^4.0.1",
     "docusaurus-plugin-sass": "^0.2.5",
     "docusaurus-plugin-segment": "^1.0.4",
     "dotenv": "^16.4.7",
@@ -110,4 +111,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

src/theme/SearchBar.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { DocusaurusAISearch } from "docusaurus-openai-search";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+export default function SearchBar() {
+  const {
+    siteConfig: {
+      themeConfig,
+    },
+  } = useDocusaurusContext();
+
+  // AI search configuration
+  const aiConfig = {
+    backend: {
+      url: "https://docusaurus-openai-search-backend.vercel.app",
+    },
+    context: {
+      siteName: "Metamask Documentation",
+      systemContext:
+        "ABOUT METAMASK:\n" +
+        "- MetaMask is a leading self-custodial wallet for Web3 that enables users to manage their digital assets and interact with decentralized applications\n" +
+        "- The MetaMask SDK allows developers to easily integrate MetaMask functionality into their applications across multiple platforms\n" +
+        "- MetaMask Snaps is an extension system that allows developers to add new features and capabilities to the MetaMask wallet\n" +
+        "- The MetaMask CLI provides developer tools for building, testing, and deploying Snaps and other MetaMask integrations\n" +
+        "- The MetaMask Dashboard offers developers analytics and management tools for their dApps and integrations\n" +
+        "- MetaMask supports multiple networks including Ethereum, Layer 2 solutions, and various EVM-compatible chains\n" +
+        "- Developers can use MetaMask's comprehensive API to enable wallet connections, transaction signing, and other Web3 functionality",
+    },
+    ui: {
+      aiButtonText: "Ask Metamask AI",
+      modalTitle: "Metamask AI Assistant",
+      footerText: "Powered by Metamask AI",
+      searchButtonText: "Search with AI",
+      searchButtonAriaLabel: "Search with Metamask AI",
+      showSearchButtonShortcut: false,
+      useCustomSearchButton: true,
+    },
+    enableLogging: true,
+    enableCaching: true,
+    recaptcha: {
+      siteKey: "6LeotlkrAAAAAEREf2umQgDoO2l3zfqUdJR599LV",
+    },
+  };
+  // @ts-ignore
+  return <DocusaurusAISearch themeConfig={themeConfig} aiConfig={aiConfig} />;
+}