+
{method}
+ {canCopy && value ? (
+ copyType === 'children' ? (
+
+ {title}
+
+ ) : (
+ <>
+ {title}
+
+ {context.icons.copy}
+
+ >
+ )
+ ) : (
+ title
+ )}
+
+ );
+}
diff --git a/packages/react-openapi/src/OpenAPIPathMultipleServers.tsx b/packages/react-openapi/src/OpenAPIPathMultipleServers.tsx
new file mode 100644
index 0000000000..c5f9856666
--- /dev/null
+++ b/packages/react-openapi/src/OpenAPIPathMultipleServers.tsx
@@ -0,0 +1,77 @@
+'use client';
+import { Text } from 'react-aria-components';
+import type { OpenAPIPathProps } from './OpenAPIPath';
+import { OpenAPIPathItem } from './OpenAPIPathItem';
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect';
+import { OpenAPITooltip } from './OpenAPITooltip';
+import type { OpenAPIClientContext } from './context';
+import { formatPath } from './formatPath';
+import type { OpenAPIServerWithCustomProperties } from './types';
+import { getDefaultServerURL } from './util/server';
+import { createStateKey } from './utils';
+
+export const serversStateKey = createStateKey('servers');
+
+/**
+ * Display the path of an operation.
+ */
+export function OpenAPIPathMultipleServers(
+ props: OpenAPIPathProps & { context: OpenAPIClientContext }
+) {
+ const { data, withServer = true, context } = props;
+ const { path, servers } = data;
+
+ const defaultServer = getDefaultServerURL(servers);
+ const { key, setKey } = useSelectState(serversStateKey, defaultServer);
+ const formattedPath = formatPath(path);
+
+ const items = servers
+ .filter(
+ (server): server is OpenAPIServerWithCustomProperties & { url: string } => !!server.url
+ )
+ .map((server) => ({
+ key: server.url,
+ label: server.url,
+ description: server.description,
+ }));
+
+ return (
+