Update server url based on variable selection

packages/gitbook/src/app/(space)/(content)/[[...pathname]]/page.tsx

@@ -93,6 +93,7 @@ export default async function Page(props: {
                         // Display the page feedback in the page footer if the aside is not visible
                         withPageFeedback && !page.layout.outline
                     }
+                    searchParams={searchParams}
                 />
                 {page.layout.outline ? (
                     <PageAside

packages/gitbook/src/components/DocumentView/DocumentView.tsx

@@ -46,6 +46,8 @@ export interface DocumentContext {
      * https://linear.app/gitbook-x/issue/RND-3588/gitbook-open-code-syntax-highlighting-runs-out-of-memory-after-a
      */
     shouldHighlightCode: (spaceId: string | undefined) => boolean;
+
+    searchParams?: Record<string, string>;
 }
 
 export interface DocumentContextProps {

packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx

@@ -1,6 +1,6 @@
 import { DocumentBlockSwagger } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
-import { OpenAPIOperation } from '@gitbook/react-openapi';
+import { OpenAPIOperation, OpenAPIOperationData } from '@gitbook/react-openapi';
 import React from 'react';
 
 import { LoadingPane } from '@/components/primitives';
@@ -100,3 +100,27 @@ function OpenAPIFallback() {
         </div>
     );
 }
+
+function parseModifiers(data: OpenAPIOperationData, params: Record<string, string>) {
+    if (!data) {
+        return;
+    }
+    const { servers } = params;
+    const serverIndex =
+        servers && !isNaN(Number(servers))
+            ? Math.min(0, Math.max(Number(servers), servers.length - 1))
+            : 0;
+    const server = data.servers[serverIndex];
+    if (server && server.variables) {
+        return Object.keys(server.variables).reduce<Record<string, number>>(
+            (result, key) => {
+                const selection = Number(params[key]);
+                if (!isNaN(selection)) {
+                    result[key] = selection;
+                }
+                return result;
+            },
+            { servers: serverIndex },
+        );
+    }
+}

packages/gitbook/src/components/PageBody/PageBody.tsx

@@ -34,6 +34,7 @@ export function PageBody(props: {
     document: JSONDocument | null;
     context: ContentRefContext;
     withPageFeedback: boolean;
+    searchParams: Record<string, string>;
 }) {
     const {
         space,
@@ -44,6 +45,7 @@ export function PageBody(props: {
         page,
         document,
         withPageFeedback,
+        searchParams,
     } = props;
 
     const asFullWidth = document ? hasFullWidthBlock(document) : false;
@@ -96,6 +98,7 @@ export function PageBody(props: {
                             resolveContentRef: (ref, options) =>
                                 resolveContentRef(ref, context, options),
                             shouldHighlightCode,
+                            searchParams,
                         }}
                     />
                 ) : (

packages/react-openapi/src/OpenAPIOperation.tsx

@@ -5,7 +5,7 @@ import { OpenAPIOperationData, toJSON } from './fetchOpenAPIOperation';
 import { Markdown } from './Markdown';
 import { OpenAPICodeSample } from './OpenAPICodeSample';
 import { OpenAPIResponseExample } from './OpenAPIResponseExample';
-import { OpenAPIServerURL } from './OpenAPIServerURL';
+import { getServersURL, OpenAPIServerURL } from './OpenAPIServerURL';
 import { OpenAPISpec } from './OpenAPISpec';
 import { OpenAPIClientContext, OpenAPIContextProps } from './types';
 import { ScalarApiClient } from './ScalarApiButton';
@@ -25,8 +25,10 @@ export async function OpenAPIOperation(props: {
         defaultInteractiveOpened: context.defaultInteractiveOpened,
         icons: context.icons,
         blockKey: context.blockKey,
+        enumSelectors: context.enumSelectors,
     };
 
+    const config = await getConfiguration(context);
     return (
         <ScalarApiClient>
             <div className={classNames('openapi-operation', className)}>
@@ -70,3 +72,17 @@ export async function OpenAPIOperation(props: {
         </ScalarApiClient>
     );
 }
+
+async function getConfiguration(context: OpenAPIContextProps) {
+    const response = await fetch(context.specUrl);
+    const doc = await response.json();
+
+    return {
+        spec: {
+            content: {
+                ...doc,
+                servers: [{ url: getServersURL(doc.servers, context.enumSelectors) }],
+            },
+        },
+    };
+}

packages/react-openapi/src/OpenAPIServerURLVariable.tsx

@@ -1,7 +1,9 @@
 'use client';
 import * as React from 'react';
+import { useRouter } from 'next/navigation';
 import classNames from 'classnames';
 import { OpenAPIV3 } from 'openapi-types';
+import { OpenAPIClientContext } from './types';
 
 /**
  * Interactive component to show the value of a server variable and let the user change it.