Add an AI search component

.github/workflows/master.yml

@@ -6,8 +6,7 @@ on:
       - master
 
 env:
-  REACT_CONTENTFUL_SPACE: ${{ secrets.REACT_CONTENTFUL_SPACE }}
-  REACT_CONTENTFUL_TOKEN: ${{ secrets.REACT_CONTENTFUL_TOKEN }}
+  OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
   IB_ENV: production
 
 jobs:

docusaurus.config.ts

@@ -246,6 +246,7 @@ const config: Config = {
       { rootDir: ".integrationBuilderCache" },
     ],
     path.resolve(__dirname, "plugins", "node-polyfills"),
+    path.resolve(__dirname, "plugins", "env-variables-plugin"),
     [
       "@docusaurus/plugin-client-redirects",
       {

package.json

@@ -33,10 +33,13 @@
     "classnames": "^2.5.1",
     "clsx": "^1.2.1",
     "copy-to-clipboard": "^3.3.3",
+    "docusaurus-openai-search": "^1.2.0",
     "gray-matter": "^4.0.3",
     "hast-util-is-element": "^1.1.0",
     "joi": "^17.13.3",
     "lodash": "^4.17.21",
+    "marked": "^15.0.11",
+    "openai": "^4.96.0",
     "parse-numeric-range": "^1.3.0",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.3.1",

plugins/env-variables-plugin/index.js

@@ -0,0 +1,17 @@
+// A Docusaurus plugin to provide environment variables to the client
+
+module.exports = function (context, options) {
+  return {
+    name: "docusaurus-env-variables-plugin",
+    injectHtmlTags() {
+      return {
+        headTags: [
+          {
+            tagName: "script",
+            innerHTML: `window.OPENAI_API_KEY = "${process.env.OPENAI_API_KEY || ""}"`,
+          },
+        ],
+      };
+    },
+  };
+};

sidebars.ts

@@ -495,6 +495,19 @@ const sidebars: SidebarsConfig = {
                 "connect-blockchain/evm/ethereum/unity",
               ],
             },
+            {
+              type: "category",
+              label: "Linea",
+              items: [
+                "connect-blockchain/evm/linea/linea",
+                "connect-blockchain/evm/linea/web",
+                "connect-blockchain/evm/linea/android",
+                "connect-blockchain/evm/linea/ios",
+                "connect-blockchain/evm/linea/react-native",
+                "connect-blockchain/evm/linea/flutter",
+                "connect-blockchain/evm/linea/unity",
+              ],
+            },
             {
               type: "category",
               label: "5ire",
@@ -677,6 +690,19 @@ const sidebars: SidebarsConfig = {
                 "connect-blockchain/evm/cronos/unity",
               ],
             },
+            {
+              type: "category",
+              label: "Fhenix",
+              items: [
+                "connect-blockchain/evm/fhenix/fhenix",
+                "connect-blockchain/evm/fhenix/web",
+                "connect-blockchain/evm/fhenix/android",
+                "connect-blockchain/evm/fhenix/ios",
+                "connect-blockchain/evm/fhenix/react-native",
+                "connect-blockchain/evm/fhenix/flutter",
+                "connect-blockchain/evm/fhenix/unity",
+              ],
+            },
             {
               type: "category",
               label: "Flare",
@@ -703,19 +729,6 @@ const sidebars: SidebarsConfig = {
                 "connect-blockchain/evm/flow/unity",
               ],
             },
-            {
-              type: "category",
-              label: "Fhenix",
-              items: [
-                "connect-blockchain/evm/fhenix/fhenix",
-                "connect-blockchain/evm/fhenix/web",
-                "connect-blockchain/evm/fhenix/android",
-                "connect-blockchain/evm/fhenix/ios",
-                "connect-blockchain/evm/fhenix/react-native",
-                "connect-blockchain/evm/fhenix/flutter",
-                "connect-blockchain/evm/fhenix/unity",
-              ],
-            },
             {
               type: "category",
               label: "Harmony",
@@ -768,19 +781,6 @@ const sidebars: SidebarsConfig = {
                 "connect-blockchain/evm/klaytn/unity",
               ],
             },
-            {
-              type: "category",
-              label: "Linea zkEVM",
-              items: [
-                "connect-blockchain/evm/linea/linea",
-                "connect-blockchain/evm/linea/web",
-                "connect-blockchain/evm/linea/android",
-                "connect-blockchain/evm/linea/ios",
-                "connect-blockchain/evm/linea/react-native",
-                "connect-blockchain/evm/linea/flutter",
-                "connect-blockchain/evm/linea/unity",
-              ],
-            },
             {
               type: "category",
               label: "Manta",
@@ -1020,6 +1020,19 @@ const sidebars: SidebarsConfig = {
                 "connect-blockchain/evm/xdc/unity",
               ],
             },
+            {
+              type: "category",
+              label: "XPLA",
+              items: [
+                "connect-blockchain/evm/xpla/xpla",
+                "connect-blockchain/evm/xpla/web",
+                "connect-blockchain/evm/xpla/android",
+                "connect-blockchain/evm/xpla/ios",
+                "connect-blockchain/evm/xpla/react-native",
+                "connect-blockchain/evm/xpla/flutter",
+                "connect-blockchain/evm/xpla/unity",
+              ],
+            },
             {
               type: "category",
               label: "Zetachain",

src/theme/SearchBar/index.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { DocusaurusAISearch } from "docusaurus-openai-search";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+export default function SearchBar() {
+  const {
+    siteConfig: {
+      themeConfig: { algolia },
+    },
+  } = useDocusaurusContext();
+
+  const apiKey = typeof window !== "undefined" ? (window as any).OPENAI_API_KEY || "" : "";
+
+  const systemPrompt =
+    "You are a helpful Web3Auth expert assistant. Your goal is to provide detailed, accurate information about Web3Auth's authentication solutions, SDKs, and integrations to developers.\n\n" +
+    "RESPONSE GUIDELINES:\n" +
+    "1. BE HELPFUL: Always try to provide SOME guidance, even when the documentation doesn't contain a perfect answer.\n" +
+    "2. PRIORITIZE USER SUCCESS: Focus on helping the user accomplish their task with Web3Auth.\n" +
+    "3. USE DOCUMENTATION FIRST: Base your answers primarily on the provided documentation snippets.\n" +
+    "4. CODE EXAMPLES ARE CRUCIAL: Always include code snippets from the documentation when available, as they're extremely valuable to developers.\n" +
+    "5. INFERENCE IS ALLOWED: When documentation contains related but not exact information, use reasonable inference to bridge gaps based on standard Web3Auth patterns.\n" +
+    "6. BE HONEST: If you truly can't provide an answer, suggest relevant Web3Auth concepts or documentation sections that might help instead.\n" +
+    "7. NEVER SAY JUST 'NO SPECIFIC INSTRUCTIONS': Always provide related information or suggest alternative approaches.\n\n" +
+    "ABOUT WEB3AUTH:\n" +
+    "- Web3Auth provides authentication infrastructure for Web3 applications\n" +
+    "- Core products include Plug and Play (PnP) SDKs for Web, Mobile (Android, iOS, React Native, Flutter) and Gaming (Unity & Unreal Engine). Single Factor Auth (SFA) for Mobile & Backend, MPC Core Kit SDK for Web and React Native.\n" +
+    "- The most used SDKs are Plug and Play Web Modal and No Modal SDKs, which have React Hook and Vue Composables as well." +
+    "- Uses Shamir Secret Sharing (SSS) for PnP & SFA and Threshold Signature Scheme (TSS) - MPC for MPC Core Kit for enabling secure key management\n" +
+    "- Compatible with all OAuth2 providers like Google, Facebook, Discord, Auth0, Firebase, etc., while having the ability to connect to any custom OAuth provider.";
+
+  // AI search configuration
+  const aiConfig = {
+    // OpenAI API settings
+    openAI: {
+      apiKey,
+      model: "gpt-4.1",
+      maxTokens: 10000,
+      temperature: 0.3,
+    },
+    // UI customization
+    ui: {
+      aiButtonText: "Ask Web3Auth AI",
+      modalTitle: "Web3Auth AI Assistant",
+      footerText: "Powered by Web3Auth AI",
+    },
+    // Prompt customization
+    prompts: {
+      siteName: "Web3Auth",
+      systemPrompt,
+    },
+  };
+  // @ts-ignore
+  return <DocusaurusAISearch algoliaConfig={algolia} aiConfig={aiConfig} />;
+}