From 27f0ab5f81dd9d344fdbd167ea78b4200f4adc15 Mon Sep 17 00:00:00 2001
From: enzonotario <enzo.notario@gmail.com>
Date: Sun, 16 Feb 2025 15:03:46 -0300
Subject: [PATCH] chore: context components

---
 .../parts/code-samples-example.md             |   2 +-
 package.json                                  |   2 +-
 src/components/Feature/OAContext.vue          |  29 ++
 src/components/Feature/OAContextProvider.vue  |  21 ++
 src/components/Feature/OAInfo.vue             | 101 +----
 src/components/Feature/OAInfoContent.vue      |  95 +++++
 src/components/Feature/OAIntroduction.vue     |  23 +-
 src/components/Feature/OAOperation.vue        | 331 +---------------
 src/components/Feature/OAOperationContent.vue | 352 ++++++++++++++++++
 src/components/Feature/OAServers.vue          |  39 +-
 src/components/Feature/OAServersContent.vue   |  30 ++
 src/components/Feature/OASpec.vue             | 118 +-----
 src/components/Feature/OASpecContent.vue      | 150 ++++++++
 src/components/Path/OAPath.vue                |  10 +-
 src/components/Path/OAPaths.vue               |  11 +-
 src/components/Sample/OACodeSamples.vue       |  10 +-
 src/composables/useOpenapi.ts                 |  38 +-
 src/composables/useTheme.ts                   |  32 +-
 src/lib/OpenApi.ts                            |  66 +++-
 src/lib/codeSamples/buildRequest.ts           |  34 +-
 .../codeSamples/convertOARequestToRequest.ts  |   2 +-
 src/lib/createAsyncOpenApiInstance.ts         |   9 +
 src/lib/createOpenApiInstance.ts              |   2 +-
 src/lib/examples/getSchemaExample.ts          |   2 +-
 src/lib/examples/getSchemaUiJson.ts           |   2 +-
 src/lib/examples/getSchemaUiXml.ts            |   2 +-
 src/lib/getAsyncOpenApiInstance.ts            |  18 +
 src/lib/getOpenApiInstance.ts                 |  23 +-
 src/lib/processOpenAPI/getCodeSamples.ts      |  56 +++
 src/lib/{ => processOpenAPI}/getSchemaUi.ts   |   8 +-
 src/lib/{ => processOpenAPI}/getSecurityUi.ts |   2 +-
 src/lib/processOpenAPI/processAsyncOpenAPI.ts |  10 +
 .../{ => processOpenAPI}/processOpenAPI.ts    |  10 +-
 src/lib/resolveBaseUrl.ts                     |  12 +
 src/types.ts                                  |   1 +
 .../__snapshots__/processOpenAPI.test.ts.snap |   1 +
 test/lib/examples/hasExample.test.ts          |   2 +-
 test/lib/getSchemaUi.test.ts                  |   2 +-
 test/lib/getSecurityUi.test.ts                |   2 +-
 test/lib/processOpenAPI.test.ts               |   6 +-
 40 files changed, 992 insertions(+), 674 deletions(-)
 create mode 100644 src/components/Feature/OAContext.vue
 create mode 100644 src/components/Feature/OAContextProvider.vue
 create mode 100644 src/components/Feature/OAInfoContent.vue
 create mode 100644 src/components/Feature/OAOperationContent.vue
 create mode 100644 src/components/Feature/OAServersContent.vue
 create mode 100644 src/components/Feature/OASpecContent.vue
 create mode 100644 src/lib/createAsyncOpenApiInstance.ts
 create mode 100644 src/lib/getAsyncOpenApiInstance.ts
 create mode 100644 src/lib/processOpenAPI/getCodeSamples.ts
 rename src/lib/{ => processOpenAPI}/getSchemaUi.ts (97%)
 rename src/lib/{ => processOpenAPI}/getSecurityUi.ts (93%)
 create mode 100644 src/lib/processOpenAPI/processAsyncOpenAPI.ts
 rename src/lib/{ => processOpenAPI}/processOpenAPI.ts (90%)
 create mode 100644 src/lib/resolveBaseUrl.ts

diff --git a/docs/customizations/parts/code-samples-example.md b/docs/customizations/parts/code-samples-example.md
index 36bd13af..52aa0b1b 100644
--- a/docs/customizations/parts/code-samples-example.md
+++ b/docs/customizations/parts/code-samples-example.md
@@ -18,7 +18,7 @@ useTheme({
             ...useTheme().getCodeSamplesAvailableLanguages(),
         ],
         defaultLang: 'bruno',
-        generator: (lang, request) => {
+        generator: async (lang, request) => {
             if (lang === 'bruno') {
                 return generateBruRequest(request)
             }
diff --git a/package.json b/package.json
index 3f4b3ccb..712df6c6 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "prepublishOnly": "pnpm run build",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
-    "dev": "cd docs && pnpm run dev",
+    "dev": "cd docs && VITE_DEBUG=1 pnpm run dev",
     "docs:build": "pnpm run build && cd docs && pnpm run build",
     "test": "vitest",
     "test:run": "vitest --run",
diff --git a/src/components/Feature/OAContext.vue b/src/components/Feature/OAContext.vue
new file mode 100644
index 00000000..cbd6738c
--- /dev/null
+++ b/src/components/Feature/OAContext.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { inject, provide } from 'vue'
+import { OPENAPI_GLOBAL_KEY, OPENAPI_LOCAL_KEY } from '../../composables/useOpenapi'
+import { getAsyncOpenApiInstance } from '../../lib/getAsyncOpenApiInstance'
+
+const props = defineProps({
+  spec: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+})
+
+const globalOpenApi = inject(OPENAPI_GLOBAL_KEY, undefined)
+
+const openapi
+    = await getAsyncOpenApiInstance({
+      custom: { spec: props.spec },
+      injected: globalOpenApi,
+    })
+
+provide(OPENAPI_LOCAL_KEY, openapi)
+</script>
+
+<template>
+  <div>
+    <slot :openapi="openapi" />
+  </div>
+</template>
diff --git a/src/components/Feature/OAContextProvider.vue b/src/components/Feature/OAContextProvider.vue
new file mode 100644
index 00000000..7eeb9661
--- /dev/null
+++ b/src/components/Feature/OAContextProvider.vue
@@ -0,0 +1,21 @@
+<script setup>
+import OAContext from './OAContext.vue'
+
+const props = defineProps({
+  spec: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+})
+</script>
+
+<template>
+  <Suspense>
+    <OAContext :spec="props.spec">
+      <template #default="{ openapi }">
+        <slot :openapi="openapi" />
+      </template>
+    </OAContext>
+  </Suspense>
+</template>
diff --git a/src/components/Feature/OAInfo.vue b/src/components/Feature/OAInfo.vue
index 5af73bbd..e5217dd9 100644
--- a/src/components/Feature/OAInfo.vue
+++ b/src/components/Feature/OAInfo.vue
@@ -1,108 +1,19 @@
 <script setup>
-import { inject } from 'vue'
-import { OPENAPI_GLOBAL_KEY, OPENAPI_LOCAL_KEY } from '../../composables/useOpenapi'
-import { getOpenApiInstance } from '../../lib/getOpenApiInstance'
-import { Badge } from '../ui/badge/index'
+import OAContextProvider from './OAContextProvider.vue'
+import OAInfoContent from './OAInfoContent.vue'
 
 const props = defineProps({
   spec: {
     type: Object,
     required: false,
   },
-  openapi: {
-    type: Object,
-    required: false,
-  },
 })
-
-const openapi = props.openapi ?? getOpenApiInstance({
-  custom: { spec: props.spec },
-  injected: inject(OPENAPI_GLOBAL_KEY, undefined),
-  injectedLocal: inject(OPENAPI_LOCAL_KEY, undefined),
-})
-
-const info = openapi.getInfo()
-
-const externalDocs = openapi.getExternalDocs()
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <div class="flex flex-col items-start">
-      <div class="flex flex-row items-center gap-2">
-        <Badge
-          v-if="info.version"
-          variant="outline"
-        >
-          v{{ info.version }}
-        </Badge>
-      </div>
-
-      <OAHeading level="h1">
-        {{ info.title ?? $t('API Documentation') }}
-      </OAHeading>
-    </div>
-
-    <span v-if="info.summary" class="text-gray-600 dark:text-gray-300">
-      {{ info.summary }}
-    </span>
-
-    <OAMarkdown
-      v-if="info.description"
-      :content="info.description"
-      class="mt-4"
-    />
-
-    <template v-if="info.contact">
-      <OAHeading level="h2">
-        {{ $t('Contact') }}
-      </OAHeading>
-
-      <div class="flex flex-row items-center gap-2">
-        <template v-if="info.contact.url">
-          <a :href="info.contact.url" :aria-label="info.contact.name ?? $t('Contact')">
-            {{ info.contact.name ?? $t('Contact') }}
-          </a>
-
-          <span v-if="info.contact.email" class="text-gray-400 dark:text-gray-500">/</span>
-        </template>
-
-        <a v-if="info.contact.email" :href="`mailto:${info.contact.email}`" :aria-label="info.contact.email">
-          {{ info.contact.email }}
-        </a>
-      </div>
-    </template>
-
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-      <div v-if="info.termsOfService">
-        <OAHeading level="h2">
-          {{ $t('Terms of Service') }}
-        </OAHeading>
-
-        <a :href="info.termsOfService" :aria-label="info.termsOfService">
-          {{ info.termsOfService }}
-        </a>
-      </div>
-
-      <div v-if="info.license">
-        <OAHeading level="h2">
-          {{ $t('License') }}
-        </OAHeading>
-
-        <a :href="info.license.url" :aria-label="info.license.name">
-          {{ info.license.name ?? $t('License') }}
-        </a>
-      </div>
-    </div>
-
-    <template v-if="Object.keys(externalDocs).length">
-      <OAHeading level="h2">
-        {{ $t('External Documentation') }}
-      </OAHeading>
-
-      <a :href="externalDocs.url" :aria-label="externalDocs.description ?? $t('External Documentation')">
-        {{ externalDocs.description ?? $t('External Documentation') }}
-      </a>
+  <OAContextProvider :spec="props.spec">
+    <template #default="{ openapi }">
+      <OAInfoContent :openapi="openapi" />
     </template>
-  </div>
+  </OAContextProvider>
 </template>
diff --git a/src/components/Feature/OAInfoContent.vue b/src/components/Feature/OAInfoContent.vue
new file mode 100644
index 00000000..726aaf76
--- /dev/null
+++ b/src/components/Feature/OAInfoContent.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { Badge } from '../ui/badge/index'
+
+const props = defineProps({
+  openapi: {
+    type: Object,
+    required: true,
+  },
+})
+
+const info = props.openapi.parsedSpec.info
+
+const externalDocs = props.openapi.parsedSpec.externalDocs
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-col items-start">
+      <div class="flex flex-row items-center gap-2">
+        <Badge
+          v-if="info.version"
+          variant="outline"
+        >
+          v{{ info.version }}
+        </Badge>
+      </div>
+
+      <OAHeading level="h1">
+        {{ info.title ?? $t('API Documentation') }}
+      </OAHeading>
+    </div>
+
+    <span v-if="info.summary" class="text-gray-600 dark:text-gray-300">
+      {{ info.summary }}
+    </span>
+
+    <OAMarkdown
+      v-if="info.description"
+      :content="info.description"
+      class="mt-4"
+    />
+
+    <template v-if="info.contact">
+      <OAHeading level="h2">
+        {{ $t('Contact') }}
+      </OAHeading>
+
+      <div class="flex flex-row items-center gap-2">
+        <template v-if="info.contact.url">
+          <a :href="info.contact.url" :aria-label="info.contact.name ?? $t('Contact')">
+            {{ info.contact.name ?? $t('Contact') }}
+          </a>
+
+          <span v-if="info.contact.email" class="text-gray-400 dark:text-gray-500">/</span>
+        </template>
+
+        <a v-if="info.contact.email" :href="`mailto:${info.contact.email}`" :aria-label="info.contact.email">
+          {{ info.contact.email }}
+        </a>
+      </div>
+    </template>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+      <div v-if="info.termsOfService">
+        <OAHeading level="h2">
+          {{ $t('Terms of Service') }}
+        </OAHeading>
+
+        <a :href="info.termsOfService" :aria-label="info.termsOfService">
+          {{ info.termsOfService }}
+        </a>
+      </div>
+
+      <div v-if="info.license">
+        <OAHeading level="h2">
+          {{ $t('License') }}
+        </OAHeading>
+
+        <a :href="info.license.url" :aria-label="info.license.name">
+          {{ info.license.name ?? $t('License') }}
+        </a>
+      </div>
+    </div>
+
+    <template v-if="Object.keys(externalDocs).length">
+      <OAHeading level="h2">
+        {{ $t('External Documentation') }}
+      </OAHeading>
+
+      <a :href="externalDocs.url" :aria-label="externalDocs.description ?? $t('External Documentation')">
+        {{ externalDocs.description ?? $t('External Documentation') }}
+      </a>
+    </template>
+  </div>
+</template>
diff --git a/src/components/Feature/OAIntroduction.vue b/src/components/Feature/OAIntroduction.vue
index dc6b85c3..de549be8 100644
--- a/src/components/Feature/OAIntroduction.vue
+++ b/src/components/Feature/OAIntroduction.vue
@@ -1,27 +1,20 @@
 <script setup>
-import { inject } from 'vue'
-import { OPENAPI_GLOBAL_KEY, OPENAPI_LOCAL_KEY } from '../../composables/useOpenapi'
-import { getOpenApiInstance } from '../../lib/getOpenApiInstance'
+import OAInfoContent from './OAInfoContent.vue'
+import OAServersContent from './OAServersContent.vue'
 
 const props = defineProps({
   spec: {
     type: Object,
     required: false,
   },
-  openapi: {
-    type: Object,
-    required: false,
-  },
-})
-
-const openapi = props.openapi ?? getOpenApiInstance({
-  custom: { spec: props.spec },
-  injected: inject(OPENAPI_GLOBAL_KEY, undefined),
-  injectedLocal: inject(OPENAPI_LOCAL_KEY, undefined),
 })
 </script>
 
 <template>
-  <OAInfo :spec="spec" :openapi="openapi" />
-  <OAServers :spec="spec" :openapi="openapi" />
+  <OAContextProvider :spec="props.spec">
+    <template #default="{ openapi }">
+      <OAInfoContent :openapi="openapi" />
+      <OAServersContent :openapi="openapi" />
+    </template>
+  </OAContextProvider>
 </template>
diff --git a/src/components/Feature/OAOperation.vue b/src/components/Feature/OAOperation.vue
index a39b2fbb..1328a09e 100644
--- a/src/components/Feature/OAOperation.vue
+++ b/src/components/Feature/OAOperation.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import type { OperationSlot } from '../../types'
-import { computed, inject, useSlots } from 'vue'
-import { OPENAPI_GLOBAL_KEY, OPENAPI_LOCAL_KEY } from '../../composables/useOpenapi'
-import { getOpenApiInstance } from '../../lib/getOpenApiInstance'
-import OAHeaderBadges from '../Common/OAHeaderBadges.vue'
-import OAOperationTags from '../Operation/OAOperationTags.vue'
+import OAContextProvider from './OAContextProvider.vue'
+import OAOperationContent from './OAOperationContent.vue'
 
 const props = defineProps({
   operationId: {
@@ -15,10 +12,6 @@ const props = defineProps({
     type: Object,
     required: false,
   },
-  openapi: {
-    type: Object,
-    required: false,
-  },
   prefixHeadings: {
     // Whether to add prefixes to component headings (for the One Page view)
     type: Boolean,
@@ -47,315 +40,23 @@ const props = defineProps({
   },
 })
 
-defineSlots<{
-  [x in OperationSlot]: (props: OperationSlot) => any
-}>()
-
-const slots = useSlots()
-
-const openapi = props.openapi ?? getOpenApiInstance({
-  custom: { spec: props.spec },
-  injected: inject(OPENAPI_GLOBAL_KEY, undefined),
-  injectedLocal: inject(OPENAPI_LOCAL_KEY, undefined),
-})
-
-const operation = openapi.getOperation(props.operationId)
-
-const operationPath = openapi.getOperationPath(props.operationId)
-
-const operationMethod = openapi.getOperationMethod(props.operationId)
-
-const operationServers = openapi.getOperationServers(props.operationId)
-
-const headingPrefix = computed(() => {
-  if (!props.prefixHeadings) {
-    return null
-  }
-
-  return props.operationId
-})
-
-function hasSlot(name: OperationSlot): boolean {
-  return slots[name] !== undefined
-}
+const slots = defineSlots<Record<string, OperationSlot>>()
 </script>
 
 <template>
-  <OAPath
-    v-if="props.operationId"
-    :id="props.operationId"
-    :path="operationPath"
-    :method="operationMethod"
-    :servers="operationServers"
-    :operation="operation"
-  >
-    <template
-      v-if="hasSlot('header')"
-      #header="header"
-    >
-      <slot
-        name="header"
-        v-bind="header"
-      />
-    </template>
-    <template
-      v-else
-      #header="header"
-    >
-      <div class="flex flex-col">
-        <OAHeaderBadges
-          :operation="header.operation"
-          :deprecated="header.deprecated"
-        />
-
-        <OAHeading
-          :id="headingPrefix"
-          level="h1"
-          :class="{
-            'line-through': header.deprecated,
-          }"
-        >
-          {{ header.operation.summary }}
-        </OAHeading>
-      </div>
-    </template>
-
-    <template
-      v-if="hasSlot('tags')"
-      #tags="tags"
-    >
-      <slot
-        name="tags"
-        v-bind="tags"
-      />
-    </template>
-    <template
-      v-else
-      #tags="tags"
-    >
-      <OAOperationTags
-        :tags="tags.operation.tags"
-      />
-    </template>
-
-    <template
-      v-if="hasSlot('description')"
-      #description="description"
-    >
-      <slot
-        name="description"
-        v-bind="description"
-      />
-    </template>
-    <template
-      v-else
-      #description="description"
-    >
-      <OAMarkdown
-        v-if="description.operation.description"
-        :content="description.operation.description"
-        class="description"
-      />
-    </template>
-
-    <template
-      v-if="hasSlot('security')"
-      #security="security"
-    >
-      <slot
-        name="security"
-        v-bind="security"
-      />
-    </template>
-    <template
-      v-else
-      #security="security"
-    >
-      <OASecurity
-        v-if="Object.keys(security.securityUi).length"
-        :security-ui="security.securityUi"
-        :heading-prefix="headingPrefix"
-      />
-    </template>
-
-    <template
-      v-if="hasSlot('parameters')"
-      #parameters="parameters"
-    >
-      <slot
-        name="parameters"
-        v-bind="parameters"
-      />
-    </template>
-    <template
-      v-else
-      #parameters="parameters"
-    >
-      <OAHeading
-        level="h2"
-        :prefix="headingPrefix"
-      >
-        {{ $t('Parameters') }}
-      </OAHeading>
-
-      <OAParameters
-        :operation-id="props.operationId"
-        :parameters="parameters.parameters"
-      />
-    </template>
-
-    <template
-      v-if="hasSlot('request-body')"
-      #request-body="requestBody"
-    >
-      <slot
-        name="request-body"
-        v-bind="requestBody"
-      />
-    </template>
-    <template
-      v-else
-      #request-body="requestBody"
-    >
-      <OAHeading
-        level="h2"
-        :prefix="headingPrefix"
-      >
-        {{ $t('Request Body') }}
-      </OAHeading>
-
-      <OARequestBody
-        :operation-id="requestBody.operationId"
-        :request-body="requestBody.requestBody"
-        :content-type="requestBody.contentType"
-      />
-    </template>
-
-    <template
-      v-if="hasSlot('responses')"
-      #responses="responses"
-    >
-      <slot
-        name="responses"
-        v-bind="responses"
-      />
-    </template>
-    <template
-      v-else
-      #responses="responses"
-    >
-      <OAResponses
-        :operation-id="responses.operationId"
-        :responses="responses.responses"
-        :response-type="responses.responseType"
-        :heading-prefix="headingPrefix"
-      />
-    </template>
-
-    <template
-      v-if="hasSlot('path')"
-      #path="path"
-    >
-      <slot
-        name="path"
-        v-bind="path"
-      />
-    </template>
-    <template
-      v-else
-      #path="path"
-    >
-      <OAPathEndpoint
-        :path="path.path"
-        :method="path.method"
-        :base-url="path.baseUrl"
-        :hide-base-url="path.hideBaseUrl"
-        :deprecated="path.deprecated"
-        :servers="path.servers"
-        @update:selected-server="path.updateSelectedServer"
-      />
-    </template>
-
-    <template
-      v-if="hasSlot('try-it')"
-      #try-it="tryIt"
-    >
-      <slot
-        name="try-it"
-        v-bind="tryIt"
-      />
-    </template>
-    <template
-      v-else
-      #try-it="tryIt"
-    >
-      <ClientOnly>
-        <OATryWithVariables
-          :request="tryIt.request"
-          :operation-id="tryIt.operationId"
-          :path="tryIt.path"
-          :method="tryIt.method"
-          :base-url="tryIt.baseUrl"
-          :parameters="tryIt.parameters"
-          :request-body="tryIt.requestBody"
-          :security-ui="tryIt.securityUi"
-          :content-type="tryIt.contentType"
-          @update:selected-server="tryIt.updateSelectedServer"
-          @update:request="tryIt.updateRequest"
-        />
-      </ClientOnly>
-    </template>
-
-    <template
-      v-if="hasSlot('code-samples')"
-      #code-samples="codeSamples"
-    >
-      <slot
-        name="code-samples"
-        v-bind="codeSamples"
-      />
-    </template>
-    <template
-      v-else
-      #code-samples="codeSamples"
-    >
-      <OAHeading
-        level="h2"
-        :prefix="headingPrefix"
+  <OAContextProvider :spec="props.spec">
+    <template #default="{ openapi }">
+      <OAOperationContent
+        v-bind="{
+          ...props,
+          openapi,
+        }"
       >
-        {{ $t('Samples') }}
-      </OAHeading>
-
-      <OACodeSamples
-        :operation-id="codeSamples.operationId"
-        :request="codeSamples.request"
-      />
-    </template>
-
-    <template
-      v-if="hasSlot('branding')"
-      #branding="branding"
-    >
-      <slot
-        name="branding"
-        v-bind="branding"
-      />
-    </template>
-    <template
-      v-else-if="!props.hideBranding"
-      #branding="branding"
-    >
-      <OAFooter v-bind="branding" />
-    </template>
-
-    <template
-      v-if="hasSlot('footer')"
-      #footer="footer"
-    >
-      <slot
-        name="footer"
-        v-bind="footer"
-      />
+        <!-- Expose all slots upwards -->
+        <template v-for="(_, name) in slots" #[name]="slotProps">
+          <slot :name="name" v-bind="slotProps || {}" />
+        </template>
+      </OAOperationContent>
     </template>
-  </OAPath>
+  </OAContextProvider>
 </template>
diff --git a/src/components/Feature/OAOperationContent.vue b/src/components/Feature/OAOperationContent.vue
new file mode 100644
index 00000000..635eaf61
--- /dev/null
+++ b/src/components/Feature/OAOperationContent.vue
@@ -0,0 +1,352 @@
+<script setup lang="ts">
+import type { OperationSlot } from '../../types'
+import { computed } from 'vue'
+import OAHeaderBadges from '../Common/OAHeaderBadges.vue'
+import OAOperationTags from '../Operation/OAOperationTags.vue'
+
+const props = defineProps({
+  operationId: {
+    type: String,
+    required: true,
+  },
+  spec: {
+    type: Object,
+    required: false,
+  },
+  openapi: {
+    type: Object,
+    required: true,
+  },
+  prefixHeadings: {
+    // Whether to add prefixes to component headings (for the One Page view)
+    type: Boolean,
+    default: false,
+  },
+  hideDefaultFooter: {
+    /**
+     * @deprecated Use `hideBranding` instead
+     */
+    type: Boolean,
+    default: undefined,
+  },
+  hideBranding: {
+    type: Boolean,
+    default: (props: { hideBranding?: boolean, hideDefaultFooter?: boolean }) => {
+      if (props.hideBranding === undefined && props.hideDefaultFooter !== undefined) {
+        console.warn(
+          '`hideDefaultFooter` is deprecated. Use `hideBranding` instead.',
+        )
+
+        return props.hideDefaultFooter
+      }
+
+      return false
+    },
+  },
+})
+
+const slots = defineSlots<Record<string, OperationSlot>>()
+
+const operation = props.openapi.getOperation(props.operationId)
+
+const operationPath = props.openapi.getOperationPath(props.operationId)
+
+const operationMethod = props.openapi.getOperationMethod(props.operationId)
+
+const operationServers = props.openapi.getOperationServers(props.operationId)
+
+const headingPrefix = computed(() => {
+  if (!props.prefixHeadings) {
+    return null
+  }
+
+  return props.operationId
+})
+
+function hasSlot(name: OperationSlot): boolean {
+  return slots[name] !== undefined
+}
+</script>
+
+<template>
+  <OAPath
+    v-if="props.operationId"
+    :id="props.operationId"
+    :path="operationPath"
+    :method="operationMethod"
+    :servers="operationServers"
+    :operation="operation"
+  >
+    <template
+      v-if="hasSlot('header')"
+      #header="header"
+    >
+      <slot
+        name="header"
+        v-bind="header"
+      />
+    </template>
+    <template
+      v-else
+      #header="header"
+    >
+      <div class="flex flex-col">
+        <OAHeaderBadges
+          :operation="header.operation"
+          :deprecated="header.deprecated"
+        />
+
+        <OAHeading
+          :id="headingPrefix"
+          level="h1"
+          :class="{
+            'line-through': header.deprecated,
+          }"
+        >
+          {{ header.operation.summary }}
+        </OAHeading>
+      </div>
+    </template>
+
+    <template
+      v-if="hasSlot('tags')"
+      #tags="tags"
+    >
+      <slot
+        name="tags"
+        v-bind="tags"
+      />
+    </template>
+    <template
+      v-else
+      #tags="tags"
+    >
+      <OAOperationTags
+        :tags="tags.operation.tags"
+      />
+    </template>
+
+    <template
+      v-if="hasSlot('description')"
+      #description="description"
+    >
+      <slot
+        name="description"
+        v-bind="description"
+      />
+    </template>
+    <template
+      v-else
+      #description="description"
+    >
+      <OAMarkdown
+        v-if="description.operation.description"
+        :content="description.operation.description"
+        class="description"
+      />
+    </template>
+
+    <template
+      v-if="hasSlot('security')"
+      #security="security"
+    >
+      <slot
+        name="security"
+        v-bind="security"
+      />
+    </template>
+    <template
+      v-else
+      #security="security"
+    >
+      <OASecurity
+        v-if="Object.keys(security.securityUi).length"
+        :security-ui="security.securityUi"
+        :heading-prefix="headingPrefix"
+      />
+    </template>
+
+    <template
+      v-if="hasSlot('parameters')"
+      #parameters="parameters"
+    >
+      <slot
+        name="parameters"
+        v-bind="parameters"
+      />
+    </template>
+    <template
+      v-else
+      #parameters="parameters"
+    >
+      <OAHeading
+        level="h2"
+        :prefix="headingPrefix"
+      >
+        {{ $t('Parameters') }}
+      </OAHeading>
+
+      <OAParameters
+        :operation-id="props.operationId"
+        :parameters="parameters.parameters"
+      />
+    </template>
+
+    <template
+      v-if="hasSlot('request-body')"
+      #request-body="requestBody"
+    >
+      <slot
+        name="request-body"
+        v-bind="requestBody"
+      />
+    </template>
+    <template
+      v-else
+      #request-body="requestBody"
+    >
+      <OAHeading
+        level="h2"
+        :prefix="headingPrefix"
+      >
+        {{ $t('Request Body') }}
+      </OAHeading>
+
+      <OARequestBody
+        :operation-id="requestBody.operationId"
+        :request-body="requestBody.requestBody"
+        :content-type="requestBody.contentType"
+      />
+    </template>
+
+    <template
+      v-if="hasSlot('responses')"
+      #responses="responses"
+    >
+      <slot
+        name="responses"
+        v-bind="responses"
+      />
+    </template>
+    <template
+      v-else
+      #responses="responses"
+    >
+      <OAResponses
+        :operation-id="responses.operationId"
+        :responses="responses.responses"
+        :response-type="responses.responseType"
+        :heading-prefix="headingPrefix"
+      />
+    </template>
+
+    <template
+      v-if="hasSlot('path')"
+      #path="path"
+    >
+      <slot
+        name="path"
+        v-bind="path"
+      />
+    </template>
+    <template
+      v-else
+      #path="path"
+    >
+      <OAPathEndpoint
+        :path="path.path"
+        :method="path.method"
+        :base-url="path.baseUrl"
+        :hide-base-url="path.hideBaseUrl"
+        :deprecated="path.deprecated"
+        :servers="path.servers"
+        @update:selected-server="path.updateSelectedServer"
+      />
+    </template>
+
+    <template
+      v-if="hasSlot('try-it')"
+      #try-it="tryIt"
+    >
+      <slot
+        name="try-it"
+        v-bind="tryIt"
+      />
+    </template>
+    <template
+      v-else
+      #try-it="tryIt"
+    >
+      <ClientOnly>
+        <OATryWithVariables
+          :request="tryIt.request"
+          :operation-id="tryIt.operationId"
+          :path="tryIt.path"
+          :method="tryIt.method"
+          :base-url="tryIt.baseUrl"
+          :parameters="tryIt.parameters"
+          :request-body="tryIt.requestBody"
+          :security-ui="tryIt.securityUi"
+          :content-type="tryIt.contentType"
+          @update:selected-server="tryIt.updateSelectedServer"
+          @update:request="tryIt.updateRequest"
+        />
+      </ClientOnly>
+    </template>
+
+    <template
+      v-if="hasSlot('code-samples')"
+      #code-samples="codeSamples"
+    >
+      <slot
+        name="code-samples"
+        v-bind="codeSamples"
+      />
+    </template>
+    <template
+      v-else
+      #code-samples="codeSamples"
+    >
+      <OAHeading
+        level="h2"
+        :prefix="headingPrefix"
+      >
+        {{ $t('Samples') }}
+      </OAHeading>
+
+      <ClientOnly>
+        <OACodeSamples
+          :operation-id="codeSamples.operationId"
+          :request="codeSamples.request"
+          :code-samples="codeSamples.codeSamples"
+        />
+      </ClientOnly>
+    </template>
+
+    <template
+      v-if="hasSlot('branding')"
+      #branding="branding"
+    >
+      <slot
+        name="branding"
+        v-bind="branding"
+      />
+    </template>
+    <template
+      v-else-if="!props.hideBranding"
+      #branding="branding"
+    >
+      <OAFooter v-bind="branding" />
+    </template>
+
+    <template
+      v-if="hasSlot('footer')"
+      #footer="footer"
+    >
+      <slot
+        name="footer"
+        v-bind="footer"
+      />
+    </template>
+  </OAPath>
+</template>
diff --git a/src/components/Feature/OAServers.vue b/src/components/Feature/OAServers.vue
index 398a192c..eedaa3de 100644
--- a/src/components/Feature/OAServers.vue
+++ b/src/components/Feature/OAServers.vue
@@ -1,44 +1,19 @@
 <script setup>
-import { inject } from 'vue'
-import { OPENAPI_GLOBAL_KEY, OPENAPI_LOCAL_KEY } from '../../composables/useOpenapi'
-import { getOpenApiInstance } from '../../lib/getOpenApiInstance'
+import OAContextProvider from './OAContextProvider.vue'
+import OAServersContent from './OAServersContent.vue'
 
 const props = defineProps({
   spec: {
     type: Object,
     required: false,
   },
-  openapi: {
-    type: Object,
-    required: false,
-  },
-})
-
-const openapi = props.openapi ?? getOpenApiInstance({
-  custom: { spec: props.spec },
-  injected: inject(OPENAPI_GLOBAL_KEY, undefined),
-  injectedLocal: inject(OPENAPI_LOCAL_KEY, undefined),
 })
-
-const servers = openapi.getServers()
 </script>
 
 <template>
-  <div>
-    <OAHeading level="h2">
-      {{ $t('Servers') }}
-    </OAHeading>
-
-    <div class="flex flex-col space-y-4">
-      <div v-for="server in servers" :key="server.url" class="flex flex-col p-3 gap-2 rounded bg-muted">
-        <span class="font-semibold select-all">
-          {{ server.url }}
-        </span>
-
-        <span v-if="server.description" class="text-gray-600 dark:text-gray-300">
-          {{ server.description }}
-        </span>
-      </div>
-    </div>
-  </div>
+  <OAContextProvider :spec="props.spec">
+    <template #default="{ openapi }">
+      <OAServersContent :openapi="openapi" />
+    </template>
+  </OAContextProvider>
 </template>
diff --git a/src/components/Feature/OAServersContent.vue b/src/components/Feature/OAServersContent.vue
new file mode 100644
index 00000000..893bc4dd
--- /dev/null
+++ b/src/components/Feature/OAServersContent.vue
@@ -0,0 +1,30 @@
+<script setup>
+const props = defineProps({
+  openapi: {
+    type: Object,
+    required: true,
+  },
+})
+
+const servers = props.openapi.parsedSpec.servers
+</script>
+
+<template>
+  <div>
+    <OAHeading level="h2">
+      {{ $t('Servers') }}
+    </OAHeading>
+
+    <div class="flex flex-col space-y-4">
+      <div v-for="server in servers" :key="server.url" class="flex flex-col p-3 gap-2 rounded bg-muted">
+        <span class="font-semibold select-all">
+          {{ server.url }}
+        </span>
+
+        <span v-if="server.description" class="text-gray-600 dark:text-gray-300">
+          {{ server.description }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Feature/OASpec.vue b/src/components/Feature/OASpec.vue
index c69c1b97..dce6fc83 100644
--- a/src/components/Feature/OASpec.vue
+++ b/src/components/Feature/OASpec.vue
@@ -1,14 +1,7 @@
 <script setup lang="ts">
-import type { OpenAPIV3 } from '@scalar/openapi-types'
-import type { OperationSlot, PathsGroupView } from '../../types'
-import { computed, inject, provide } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { OPENAPI_GLOBAL_KEY, OPENAPI_LOCAL_KEY } from '../../composables/useOpenapi'
-import { useTheme } from '../../composables/useTheme'
-import { getOpenApiInstance } from '../../lib/getOpenApiInstance'
-import OAPathsGroups from '../Path/OAPathsGroups.vue'
-import OAInfo from './OAInfo.vue'
-import OAServers from './OAServers.vue'
+import type { OperationSlot } from '../../types'
+import OAContextProvider from './OAContextProvider.vue'
+import OASpecContent from './OASpecContent.vue'
 
 const props = defineProps({
   spec: {
@@ -60,97 +53,22 @@ const props = defineProps({
 })
 
 const slots = defineSlots<Record<string, OperationSlot>>()
-
-const { t } = useI18n()
-
-const themeConfig = useTheme()
-
-const openapi = getOpenApiInstance({
-  custom: { spec: props.spec },
-  injected: inject(OPENAPI_GLOBAL_KEY, undefined),
-  injectedLocal: inject(OPENAPI_LOCAL_KEY, undefined),
-})
-
-provide(OPENAPI_LOCAL_KEY, openapi)
-
-const servers = openapi.getServers()
-
-const info = openapi.getInfo()
-
-const showInfo = !props.hideInfo && Object.keys(info).length
-
-const showServers = !props.hideServers && servers.length
-
-const groupByTags = computed(() => props.groupByTags ?? themeConfig.getSpecConfig()?.groupByTags?.value)
-
-const operationsTags = props.tags ?? openapi.getOperationsTags()
-
-const specTags: OpenAPIV3.TagObject[] = openapi.getTags()
-
-const paths = openapi.getPaths()
-
-const pathsByTags = operationsTags.map((tag: string) => {
-  return {
-    tag,
-    paths: openapi.getPathsByTags(tag),
-  }
-})
-
-const pathsWithoutTags = openapi.getPathsWithoutTags()
-
-const groups = computed(() => {
-  if (groupByTags.value) {
-    return [
-      ...(pathsWithoutTags.length
-        ? [
-            {
-              name: t(useTheme().getSpecConfig()?.defaultTag ?? 'Default'),
-              paths: pathsWithoutTags,
-              isOpen: !themeConfig.getSpecConfig()?.collapsePaths?.value,
-              isGrouped: true,
-            },
-          ]
-        : []),
-
-      ...pathsByTags.map((tag: { tag: string, paths: Record<string, any> }) => {
-        return {
-          name: tag.tag,
-          paths: tag.paths,
-          isOpen: !themeConfig.getSpecConfig()?.collapsePaths?.value,
-          description: specTags.find(tagInfo => tagInfo.name === tag.tag)?.description,
-          isGrouped: true,
-        }
-      }),
-    ] as PathsGroupView[]
-  }
-
-  return [
-    {
-      name: t(useTheme().getSpecConfig()?.defaultTag ?? 'Default'),
-      paths,
-      isGrouped: false,
-    },
-  ] as PathsGroupView[]
-})
 </script>
 
 <template>
-  <div class="flex flex-col space-y-10">
-    <div v-if="showInfo || showServers">
-      <OAInfo v-if="showInfo" :openapi="openapi" />
-
-      <OAServers v-if="showServers" :openapi="openapi" />
-    </div>
-
-    <hr v-if="showInfo || showServers">
-
-    <OAPathsGroups :groups="groups" :hide-paths-summary="props.hidePathsSummary">
-      <!-- Expose all slots upwards -->
-      <template v-for="(_, name) in slots" #[name]="slotProps">
-        <slot :name="name" v-bind="slotProps || {}" />
-      </template>
-    </OAPathsGroups>
-
-    <OAFooter v-if="!props.hideBranding" />
-  </div>
+  <OAContextProvider :spec="props.spec">
+    <template #default="{ openapi }">
+      <OASpecContent
+        v-bind="{
+          ...props,
+          openapi,
+        }"
+      >
+        <!-- Expose all slots upwards -->
+        <template v-for="(_, name) in slots" #[name]="slotProps">
+          <slot :name="name" v-bind="slotProps || {}" />
+        </template>
+      </OASpecContent>
+    </template>
+  </OAContextProvider>
 </template>
diff --git a/src/components/Feature/OASpecContent.vue b/src/components/Feature/OASpecContent.vue
new file mode 100644
index 00000000..ed76bc5d
--- /dev/null
+++ b/src/components/Feature/OASpecContent.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import type { OpenAPIV3 } from '@scalar/openapi-types'
+import type { OperationSlot, PathsGroupView } from '../../types'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useTheme } from '../../composables/useTheme'
+import OAPathsGroups from '../Path/OAPathsGroups.vue'
+import OAInfoContent from './OAInfoContent.vue'
+import OAServersContent from './OAServersContent.vue'
+
+const props = defineProps({
+  spec: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+  hideInfo: {
+    type: Boolean,
+    default: false,
+  },
+  hideServers: {
+    type: Boolean,
+    default: false,
+  },
+  groupByTags: {
+    type: Boolean,
+    default: null,
+  },
+  tags: {
+    type: Array,
+    default: undefined,
+  },
+  hideDefaultFooter: {
+    /**
+     * @deprecated Use `hideBranding` instead
+     */
+    type: Boolean,
+    default: undefined,
+  },
+  hideBranding: {
+    type: Boolean,
+    default: (props: { hideBranding?: boolean, hideDefaultFooter?: boolean }) => {
+      if (props.hideBranding === undefined && props.hideDefaultFooter !== undefined) {
+        console.warn(
+          '`hideDefaultFooter` is deprecated. Use `hideBranding` instead.',
+        )
+
+        return props.hideDefaultFooter
+      }
+
+      return false
+    },
+  },
+  hidePathsSummary: {
+    type: Boolean,
+    default: undefined,
+  },
+  openapi: {
+    type: Object,
+    required: true,
+  },
+})
+
+const slots = defineSlots<Record<string, OperationSlot>>()
+
+const { t } = useI18n()
+
+const themeConfig = useTheme()
+
+const servers = props.openapi.getServers()
+
+const info = props.openapi.getInfo()
+
+const showInfo = !props.hideInfo && Object.keys(info).length
+
+const showServers = !props.hideServers && servers.length
+
+const groupByTags = computed(() => props.groupByTags ?? themeConfig.getSpecConfig()?.groupByTags?.value)
+
+const operationsTags = props.tags ?? props.openapi.getOperationsTags()
+
+const specTags: OpenAPIV3.TagObject[] = props.openapi.getTags()
+
+const paths = props.openapi.getPaths()
+
+const pathsByTags = operationsTags.map((tag: string) => {
+  return {
+    tag,
+    paths: props.openapi.getPathsByTags(tag),
+  }
+})
+
+const pathsWithoutTags = props.openapi.getPathsWithoutTags()
+
+const groups = computed(() => {
+  if (groupByTags.value) {
+    return [
+      ...(pathsWithoutTags.length
+        ? [
+            {
+              name: t(useTheme().getSpecConfig()?.defaultTag ?? 'Default'),
+              paths: pathsWithoutTags,
+              isOpen: !themeConfig.getSpecConfig()?.collapsePaths?.value,
+              isGrouped: true,
+            },
+          ]
+        : []),
+
+      ...pathsByTags.map((tag: { tag: string, paths: Record<string, any> }) => {
+        return {
+          name: tag.tag,
+          paths: tag.paths,
+          isOpen: !themeConfig.getSpecConfig()?.collapsePaths?.value,
+          description: specTags.find(tagInfo => tagInfo.name === tag.tag)?.description,
+          isGrouped: true,
+        }
+      }),
+    ] as PathsGroupView[]
+  }
+
+  return [
+    {
+      name: t(useTheme().getSpecConfig()?.defaultTag ?? 'Default'),
+      paths,
+      isGrouped: false,
+    },
+  ] as PathsGroupView[]
+})
+</script>
+
+<template>
+  <div class="flex flex-col space-y-10">
+    <div v-if="showInfo || showServers">
+      <OAInfoContent v-if="showInfo" :openapi="openapi" />
+
+      <OAServersContent v-if="showServers" :openapi="openapi" />
+    </div>
+
+    <hr v-if="showInfo || showServers">
+
+    <OAPathsGroups :groups="groups" :hide-paths-summary="props.hidePathsSummary">
+      <!-- Expose all slots upwards -->
+      <template v-for="(_, name) in slots" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps || {}" />
+      </template>
+    </OAPathsGroups>
+
+    <OAFooter v-if="!props.hideBranding" />
+  </div>
+</template>
diff --git a/src/components/Path/OAPath.vue b/src/components/Path/OAPath.vue
index fe468155..305ff14e 100644
--- a/src/components/Path/OAPath.vue
+++ b/src/components/Path/OAPath.vue
@@ -4,6 +4,7 @@ import { computed, defineProps, provide, ref } from 'vue'
 import { useTheme } from '../../composables/useTheme'
 import { buildRequest } from '../../lib/codeSamples/buildRequest'
 import { initOperationData, OPERATION_DATA_KEY } from '../../lib/operationData'
+import { resolveBaseUrl } from '../../lib/resolveBaseUrl'
 
 const props = defineProps({
   id: {
@@ -76,15 +77,15 @@ const selectedServer = servers?.length > 1 && typeof localStorage !== 'undefined
   : ref(defaultServer)
 
 const baseUrl = computed(() => {
-  const value = selectedServer.value
+  let value = selectedServer.value
 
   if (servers.length > 1 && !servers.some(server => server.url === value)) {
     updateSelectedServer(servers[0]?.url)
 
-    return servers[0]?.url
+    value = servers[0]?.url
   }
 
-  return value
+  return resolveBaseUrl(value)
 })
 
 const shouldBuildRequest = computed(() => ['try-it', 'code-samples'].some(slot => operationSlots.value.includes(slot)))
@@ -103,6 +104,8 @@ const request = ref(
     : {},
 )
 
+const codeSamples = props.operation.codeSamples
+
 function updateRequest(newRequest) {
   request.value = newRequest
 }
@@ -276,6 +279,7 @@ function updateSelectedServer(server) {
                 :path="operationPath"
                 :request="request"
                 :update-request="updateRequest"
+                :code-samples="codeSamples"
               />
             </template>
           </div>
diff --git a/src/components/Path/OAPaths.vue b/src/components/Path/OAPaths.vue
index 54db6a4c..6fccbb8d 100644
--- a/src/components/Path/OAPaths.vue
+++ b/src/components/Path/OAPaths.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { OperationSlot } from '../../types'
-import { defineProps } from 'vue'
+import { defineProps, inject } from 'vue'
+import { OPENAPI_LOCAL_KEY } from '../../composables/useOpenapi'
 import { useTheme } from '../../composables/useTheme'
 import OALazy from '../Common/Lazy/OALazy.vue'
+import OAOperationContent from '../Feature/OAOperationContent.vue'
 
 const { paths } = defineProps({
   paths: {
@@ -27,6 +29,8 @@ const operations = Object.entries(paths).reduce((acc: { operationId: string }[],
 }, [])
 
 const lazyRendering = themeConfig.getSpecConfig()?.lazyRendering?.value
+
+const openapi: any = inject(OPENAPI_LOCAL_KEY)
 </script>
 
 <template>
@@ -35,7 +39,8 @@ const lazyRendering = themeConfig.getSpecConfig()?.lazyRendering?.value
     :key="operation.operationId"
     :is-lazy="lazyRendering && operationIdx > 0"
   >
-    <OAOperation
+    <OAOperationContent
+      :openapi="openapi"
       :operation-id="operation.operationId"
       prefix-headings
       hide-branding
@@ -50,7 +55,7 @@ const lazyRendering = themeConfig.getSpecConfig()?.lazyRendering?.value
           v-bind="slotProps || {}"
         />
       </template>
-    </OAOperation>
+    </OAOperationContent>
 
     <hr>
   </OALazy>
diff --git a/src/components/Sample/OACodeSamples.vue b/src/components/Sample/OACodeSamples.vue
index 30732f7c..30d04dd3 100644
--- a/src/components/Sample/OACodeSamples.vue
+++ b/src/components/Sample/OACodeSamples.vue
@@ -12,6 +12,10 @@ const props = defineProps({
     type: Object,
     default: () => (new OARequest()),
   },
+  codeSamples: {
+    type: Object,
+    default: () => ({}),
+  },
 })
 
 const themeConfig = useTheme()
@@ -24,7 +28,7 @@ const generator = themeConfig.getCodeSamplesGenerator()
 
 const defaultLang = themeConfig.getCodeSamplesDefaultLang()
 
-const samples = ref([])
+const samples = ref(props.codeSamples)
 
 const loadSamples = async () => {
   samples.value = await Promise.all(
@@ -44,9 +48,7 @@ const loadSamples = async () => {
   )
 }
 
-loadSamples()
-
-watch(() => props.request, loadSamples, { deep: true })
+watch(() => props.request, loadSamples, { deep: true, immediate: true })
 </script>
 
 <template>
diff --git a/src/composables/useOpenapi.ts b/src/composables/useOpenapi.ts
index b42831af..a890383e 100644
--- a/src/composables/useOpenapi.ts
+++ b/src/composables/useOpenapi.ts
@@ -1,26 +1,20 @@
 import type { OpenAPI } from '@scalar/openapi-types'
+import type { OpenApi } from '../lib/OpenApi'
 import type { PartialUseThemeConfig } from './useTheme'
 import { createOpenApiInstance } from '../lib/createOpenApiInstance'
 import { useTheme } from './useTheme'
 
 export interface OpenAPIData {
-  id: string
   spec: OpenAPI.Document
   openapi: ReturnType<typeof createOpenApiInstance>
   config?: PartialUseThemeConfig
 }
 
-export type Schemas = Map<string, OpenAPIData>
-
-export const DEFAULT_SCHEMA = 'main'
-
 export const OPENAPI_GLOBAL_KEY = Symbol('openapi')
 
 export const OPENAPI_LOCAL_KEY = Symbol('openapiLocal')
 
-const schemas: Schemas = new Map()
-
-let mainSchema: OpenAPI.Document | null = null
+let openapi: ReturnType<typeof OpenApi> | null = null
 
 export function useOpenapi({
   spec,
@@ -37,38 +31,16 @@ export function useOpenapi({
     setupOpenApi({ spec, config })
   }
 
-  /**
-   * @deprecated Use `useOpenapi({ spec })` instead.
-   */
-  function setSpec(value: OpenAPI.Document) {
-    console.warn('Deprecated usage of `setSpec`. Use `useOpenapi({ spec })` instead.')
-    setupOpenApi({ spec: value })
-  }
-
   function setupOpenApi({ spec, config }: { spec: OpenAPI.Document, config?: PartialUseThemeConfig }) {
-    addSchema({ id: DEFAULT_SCHEMA, spec, config })
-    mainSchema = (schemas.get(DEFAULT_SCHEMA) ?? {}) as OpenAPI.Document
-  }
-
-  function addSchema({ id, spec, config }: { id: string, spec: OpenAPI.Document, config?: PartialUseThemeConfig }) {
-    const openapi = createOpenApiInstance({
+    openapi = createOpenApiInstance({
       spec,
       defaultTag: config?.spec?.defaultTag,
       defaultTagDescription: config?.spec?.defaultTagDescription,
     })
-
-    // @ts-expect-error: This adds all the properties of the OpenAPI instance to the schema.
-    schemas.set(id, {
-      ...openapi,
-      id,
-      config,
-    })
   }
 
   return {
-    ...mainSchema,
-    json: mainSchema?.spec,
-    setSpec,
-    schemas,
+    ...openapi,
+    json: openapi?.spec,
   }
 }
diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
index d02784b1..8401a666 100644
--- a/src/composables/useTheme.ts
+++ b/src/composables/useTheme.ts
@@ -156,7 +156,7 @@ export const DEFAULT_OPERATION_SLOTS: OperationSlot[] = [
 
 export const DEFAULT_BASE_URL = 'http://localhost'
 
-const availableLanguages: LanguageConfig[] = [
+export const availableLanguages: LanguageConfig[] = [
   {
     lang: 'curl',
     label: 'cURL',
@@ -669,11 +669,19 @@ export function useTheme(initialConfig: PartialUseThemeConfig = {}) {
   }
 
   function getCodeSamplesLangs() {
-    return themeConfig?.codeSamples?.langs
+    return themeConfig?.codeSamples?.langs?.filter((lang, index, self) => self.indexOf(lang) === index)
   }
 
   function getCodeSamplesDefaultLang() {
-    return themeConfig?.codeSamples?.defaultLang
+    const availableLangs = getCodeSamplesLangs() || []
+
+    const defaultLang = themeConfig?.codeSamples?.defaultLang
+
+    if (defaultLang && availableLangs.includes(defaultLang)) {
+      return defaultLang
+    }
+
+    return availableLangs[0]
   }
 
   function getCodeSamplesAvailableLanguages() {
@@ -691,7 +699,7 @@ export function useTheme(initialConfig: PartialUseThemeConfig = {}) {
   function setCodeSamplesConfig(config: Partial<UnwrapNestedRefs<CodeSamplesConfig>>) {
     if (config.langs) {
       // @ts-expect-error: This is a valid expression.
-      themeConfig.codeSamples.langs = config.langs
+      themeConfig.codeSamples.langs = config.langs.filter((lang, index, self) => self.indexOf(lang) === index)
     }
 
     if (config.defaultLang) {
@@ -700,8 +708,7 @@ export function useTheme(initialConfig: PartialUseThemeConfig = {}) {
     }
 
     if (config.availableLanguages) {
-      // @ts-expect-error: This is a valid expression.
-      themeConfig.codeSamples.availableLanguages = config.availableLanguages
+      setCodeSamplesAvailableLanguages(config.availableLanguages)
     }
 
     if (config.generator) {
@@ -715,6 +722,19 @@ export function useTheme(initialConfig: PartialUseThemeConfig = {}) {
     }
   }
 
+  function setCodeSamplesAvailableLanguages(languages: LanguageConfig[]) {
+    if (!themeConfig.codeSamples) {
+      return
+    }
+
+    const uniqueLanguages = [...new Set(languages.map(({ lang }) => lang))]
+
+    themeConfig.codeSamples.availableLanguages = uniqueLanguages.map((lang) => {
+      const language = availableLanguages.find(l => l.lang === lang)
+      return language || { lang, label: lang, highlighter: 'plaintext' }
+    })
+  }
+
   function getLinksPrefixesConfig() {
     return themeConfig.linksPrefixes
   }
diff --git a/src/lib/OpenApi.ts b/src/lib/OpenApi.ts
index 9caa51cc..198087e8 100644
--- a/src/lib/OpenApi.ts
+++ b/src/lib/OpenApi.ts
@@ -1,7 +1,7 @@
-import type { OpenAPIV3 } from '@scalar/openapi-types'
+import type { OpenAPI, OpenAPIV3 } from '@scalar/openapi-types'
 import type { ParsedOpenAPI } from '../types'
 import { httpVerbs } from '../index'
-import { processOpenAPI } from './processOpenAPI'
+import { processOpenAPI } from './processOpenAPI/processOpenAPI'
 
 export function OpenApi({
   spec,
@@ -16,6 +16,24 @@ export function OpenApi({
   transformedSpec: null,
   parsedSpec: null,
 }) {
+  let innerSpec: OpenAPI.Document | null = null
+
+  function setSpec(spec: any) {
+    innerSpec = spec
+  }
+
+  function getSpec(): OpenAPI.Document {
+    if (!innerSpec) {
+      setSpec(parsedSpec ?? transformedSpec ?? spec ?? {})
+    }
+
+    if (!innerSpec) {
+      throw new Error('OpenAPI spec is not defined')
+    }
+
+    return innerSpec
+  }
+
   function findOperation(paths: OpenAPIV3.PathsObject, operationId: string) {
     for (const path of Object.values(paths)) {
       for (const verb of httpVerbs) {
@@ -27,11 +45,7 @@ export function OpenApi({
     return null
   }
 
-  function getSpec(): ParsedOpenAPI {
-    return parsedSpec ?? transformedSpec ?? spec ?? {}
-  }
-
-  function getParsedSpec() {
+  function getParsedSpec(): ParsedOpenAPI {
     if (!parsedSpec) {
       parsedSpec = processOpenAPI(transformedSpec ?? spec)
     }
@@ -40,21 +54,25 @@ export function OpenApi({
   }
 
   function getOperation(operationId: string) {
-    if (!getSpec().paths) {
+    const paths = getSpec().paths as OpenAPIV3.PathsObject
+
+    if (!paths) {
       return null
     }
 
-    return findOperation(getSpec().paths, operationId)
+    return findOperation(paths, operationId)
   }
 
   function getOperationPath(operationId: string) {
-    if (!getSpec().paths) {
+    const paths = getSpec().paths as OpenAPIV3.PathsObject
+
+    if (!paths) {
       return null
     }
 
-    for (const [path, methods] of Object.entries(getSpec().paths)) {
+    for (const [path, methods] of Object.entries(paths)) {
       for (const verb of httpVerbs) {
-        if (methods[verb]?.operationId === operationId) {
+        if (methods && methods[verb]?.operationId === operationId) {
           return path
         }
       }
@@ -64,13 +82,15 @@ export function OpenApi({
   }
 
   function getOperationMethod(operationId: string) {
-    if (!getSpec().paths) {
+    const paths = getSpec().paths as OpenAPIV3.PathsObject
+
+    if (!paths) {
       return null
     }
 
-    for (const path of Object.values(getSpec().paths)) {
+    for (const path of Object.values(paths)) {
       for (const verb of httpVerbs) {
-        if (path[verb]?.operationId === operationId) {
+        if (path && path[verb]?.operationId === operationId) {
           return verb
         }
       }
@@ -96,7 +116,9 @@ export function OpenApi({
   }
 
   function getPaths(): OpenAPIV3.PathsObject {
-    return getSpec().paths ?? {}
+    const paths = getSpec().paths as OpenAPIV3.PathsObject
+
+    return paths ?? {}
   }
 
   function getPathsByVerbs() {
@@ -145,7 +167,9 @@ export function OpenApi({
 
     const operationPath = getOperationPath(operationId)
 
-    const pathServers = getSpec().paths[(operationPath ?? '')]?.servers
+    const paths = getSpec().paths as OpenAPIV3.PathsObject
+
+    const pathServers = paths[(operationPath ?? '')]?.servers
 
     return [
       ...(operation?.servers ?? []),
@@ -159,9 +183,11 @@ export function OpenApi({
       return []
     }
 
-    return Object.values(getSpec().paths).reduce((tags: string[], path) => {
+    const paths = getSpec().paths as OpenAPIV3.PathsObject
+
+    return Object.values(paths).reduce((tags: string[], path) => {
       for (const verb of httpVerbs) {
-        if (path[verb]?.tags) {
+        if (path && path[verb]?.tags) {
           path[verb].tags.forEach((tag: string) => {
             if (!tags.includes(tag)) {
               tags.push(tag)
@@ -233,6 +259,8 @@ export function OpenApi({
     spec: getSpec(),
     transformedSpec,
     parsedSpec,
+    setSpec,
+    getSpec,
     getOperation,
     getOperationPath,
     getOperationMethod,
diff --git a/src/lib/codeSamples/buildRequest.ts b/src/lib/codeSamples/buildRequest.ts
index ae0215ba..8a6402b5 100644
--- a/src/lib/codeSamples/buildRequest.ts
+++ b/src/lib/codeSamples/buildRequest.ts
@@ -25,11 +25,16 @@ function getPath(variables: Record<string, string>, pathParameters: OpenAPIV3.Pa
   return resolvedPath
 }
 
-function getHeaders(variables: Record<string, string>, headerParameters: OpenAPIV3.ParameterObject[], authorizations: PlaygroundSecurityScheme | PlaygroundSecurityScheme[] | null) {
-  const headers = new Headers({})
+function getHeaders(
+  headers: Headers,
+  variables: Record<string, string>,
+  headerParameters: OpenAPIV3.ParameterObject[],
+  authorizations: PlaygroundSecurityScheme | PlaygroundSecurityScheme[] | null,
+) {
+  const resolvedHeaders = new Headers(headers)
 
   processParameters(variables, headerParameters, (key: string, value: string) => {
-    headers.set(key, value)
+    resolvedHeaders.set(key, value)
   })
 
   if (authorizations && !Array.isArray(authorizations)) {
@@ -37,7 +42,7 @@ function getHeaders(variables: Record<string, string>, headerParameters: OpenAPI
   }
 
   if (!authorizations?.length) {
-    return headers
+    return resolvedHeaders
   }
 
   Object.entries(authorizations).forEach(([_, authorization]) => {
@@ -48,19 +53,19 @@ function getHeaders(variables: Record<string, string>, headerParameters: OpenAPI
     const value = unref(authorization.playgroundValue)
 
     if (authorization.type === 'http') {
-      headers.set('Authorization', `${authorization.scheme === 'basic' ? 'Basic' : 'Bearer'} ${value}`)
+      resolvedHeaders.set('Authorization', `${authorization.scheme === 'basic' ? 'Basic' : 'Bearer'} ${value}`)
     } else if (authorization.type === 'apiKey') {
-      headers.set(authorization.name ?? '', value)
+      resolvedHeaders.set(authorization.name ?? '', value)
     } else if (authorization.type === 'openIdConnect') {
-      headers.set('Authorization', `Bearer ${value}`)
+      resolvedHeaders.set('Authorization', `Bearer ${value}`)
     } else if (authorization.type === 'oauth2') {
-      headers.set('Authorization', `Bearer ${value}`)
+      resolvedHeaders.set('Authorization', `Bearer ${value}`)
     } else {
       console.warn('Unknown auth scheme:', authorization)
     }
   })
 
-  return headers
+  return resolvedHeaders
 }
 
 function getQuery(variables: Record<string, string>, queryParameters: OpenAPIV3.ParameterObject[]) {
@@ -99,6 +104,7 @@ export function buildRequest({
   parameters,
   authorizations,
   body,
+  headers = {},
   variables = {},
 }: {
   path: string
@@ -108,6 +114,7 @@ export function buildRequest({
   authorizations: PlaygroundSecurityScheme | PlaygroundSecurityScheme[] | null
   body: any
   variables: any
+  headers?: Record<string, string>
 }) {
   const resolvedVariables = setExamplesAsVariables(parameters, variables)
 
@@ -133,12 +140,17 @@ export function buildRequest({
 
   const query = getQuery(resolvedVariables, queryParameters)
 
-  const headers = getHeaders(resolvedVariables, headerParameters, authorizations)
+  const resolvedHeaders = getHeaders(
+    new Headers(headers),
+    resolvedVariables,
+    headerParameters,
+    authorizations,
+  )
 
   return new OARequest(
     `${baseUrl}${resolvedPath}`,
     method,
-    Object.fromEntries(headers),
+    Object.fromEntries(resolvedHeaders),
     body,
     query,
   )
diff --git a/src/lib/codeSamples/convertOARequestToRequest.ts b/src/lib/codeSamples/convertOARequestToRequest.ts
index 457942ed..de84f28b 100644
--- a/src/lib/codeSamples/convertOARequestToRequest.ts
+++ b/src/lib/codeSamples/convertOARequestToRequest.ts
@@ -6,7 +6,7 @@ export function OARequestToRequest(oaRequest: OARequest): Request {
   const query = new URLSearchParams(oaRequest.query).toString()
 
   const headers = new Headers(oaRequest.headers)
-  const body = oaRequest.body ? JSON.stringify(oaRequest.body) : undefined
+  const body = ['POST', 'PUT', 'PATCH'].includes(method) && oaRequest.body ? JSON.stringify(oaRequest.body) : undefined
 
   if (body && !headers.has('content-type')) {
     headers.set('content-type', 'application/json')
diff --git a/src/lib/createAsyncOpenApiInstance.ts b/src/lib/createAsyncOpenApiInstance.ts
new file mode 100644
index 00000000..c41ed43c
--- /dev/null
+++ b/src/lib/createAsyncOpenApiInstance.ts
@@ -0,0 +1,9 @@
+import type { ParsedOpenAPI } from '../types'
+import { processAsyncOpenAPI } from './processOpenAPI/processAsyncOpenAPI'
+
+export async function createAsyncOpenApiInstance(openapi: any) {
+  let spec = openapi.getSpec() as ParsedOpenAPI
+  spec = await processAsyncOpenAPI(spec)
+  openapi.setSpec(spec)
+  return openapi
+}
diff --git a/src/lib/createOpenApiInstance.ts b/src/lib/createOpenApiInstance.ts
index 87e96ad2..081dfdd6 100644
--- a/src/lib/createOpenApiInstance.ts
+++ b/src/lib/createOpenApiInstance.ts
@@ -1,7 +1,7 @@
 import type { OpenAPI } from '@scalar/openapi-types'
 import { OpenApi } from './OpenApi'
 import { prepareOpenAPI } from './prepareOpenAPI/prepareOpenAPI'
-import { processOpenAPI } from './processOpenAPI'
+import { processOpenAPI } from './processOpenAPI/processOpenAPI'
 
 export function createOpenApiInstance({
   spec,
diff --git a/src/lib/examples/getSchemaExample.ts b/src/lib/examples/getSchemaExample.ts
index 305b678b..b513c71c 100644
--- a/src/lib/examples/getSchemaExample.ts
+++ b/src/lib/examples/getSchemaExample.ts
@@ -1,5 +1,5 @@
 import type { OAExampleObject } from '../../types'
-import type { OAProperty } from '../getSchemaUi'
+import type { OAProperty } from '../processOpenAPI/getSchemaUi'
 import { getSchemaUiJson } from './getSchemaUiJson'
 import { getSchemaUiXml } from './getSchemaUiXml'
 
diff --git a/src/lib/examples/getSchemaUiJson.ts b/src/lib/examples/getSchemaUiJson.ts
index dd684eb0..5b45482c 100644
--- a/src/lib/examples/getSchemaUiJson.ts
+++ b/src/lib/examples/getSchemaUiJson.ts
@@ -1,4 +1,4 @@
-import type { OAProperty } from '../getSchemaUi'
+import type { OAProperty } from '../processOpenAPI/getSchemaUi'
 import { literalTypes } from '../../index'
 import { getPropertyExample } from './getPropertyExample'
 
diff --git a/src/lib/examples/getSchemaUiXml.ts b/src/lib/examples/getSchemaUiXml.ts
index e688dcd4..57fd8981 100644
--- a/src/lib/examples/getSchemaUiXml.ts
+++ b/src/lib/examples/getSchemaUiXml.ts
@@ -1,4 +1,4 @@
-import type { OAProperty } from '../getSchemaUi'
+import type { OAProperty } from '../processOpenAPI/getSchemaUi'
 import { jsXml } from 'json-xml-parse'
 import { getSchemaUiJson } from './getSchemaUiJson'
 
diff --git a/src/lib/getAsyncOpenApiInstance.ts b/src/lib/getAsyncOpenApiInstance.ts
new file mode 100644
index 00000000..21bb1cec
--- /dev/null
+++ b/src/lib/getAsyncOpenApiInstance.ts
@@ -0,0 +1,18 @@
+import { createAsyncOpenApiInstance } from './createAsyncOpenApiInstance'
+import { getOpenApiInstance } from './getOpenApiInstance'
+
+export async function getAsyncOpenApiInstance({
+  custom,
+  injected,
+}: {
+  custom?: { spec: any, parsedSpec?: any }
+  injected?: any
+} = {}) {
+  const openapi = getOpenApiInstance({ custom, injected })
+
+  if (!openapi) {
+    return null
+  }
+
+  return createAsyncOpenApiInstance(openapi)
+}
diff --git a/src/lib/getOpenApiInstance.ts b/src/lib/getOpenApiInstance.ts
index 21904edd..a1cf6f7e 100644
--- a/src/lib/getOpenApiInstance.ts
+++ b/src/lib/getOpenApiInstance.ts
@@ -1,33 +1,20 @@
-import type { Schemas } from '../composables/useOpenapi'
-import { DEFAULT_SCHEMA, useOpenapi } from '../composables/useOpenapi'
+import { useOpenapi } from '../composables/useOpenapi'
 import { createOpenApiInstance } from './createOpenApiInstance'
 
 export function getOpenApiInstance({
-  id,
   custom,
   injected,
-  injectedLocal,
 }: {
-  id?: string
   custom?: { spec: any, parsedSpec?: any }
-  injected?: Schemas | any
-  injectedLocal?: ReturnType<typeof createOpenApiInstance>
+  injected?: any
 } = {}) {
-  if (id === undefined) {
-    id = DEFAULT_SCHEMA
-  }
-
   if (custom?.spec) {
     return createOpenApiInstance({ spec: custom.spec })
   }
 
-  if (injectedLocal) {
-    return injectedLocal
-  }
-
-  if (injected && injected.schemas) {
+  if (injected) {
     try {
-      return injected.schemas.get(id)
+      return injected
     } catch {
       console.warn('Deprecated usage of injected.')
       return injected
@@ -35,7 +22,7 @@ export function getOpenApiInstance({
   }
 
   const globalSpec = useOpenapi()
-  if (globalSpec) {
+  if (globalSpec?.json) {
     return globalSpec
   }
 
diff --git a/src/lib/processOpenAPI/getCodeSamples.ts b/src/lib/processOpenAPI/getCodeSamples.ts
new file mode 100644
index 00000000..a44fb1da
--- /dev/null
+++ b/src/lib/processOpenAPI/getCodeSamples.ts
@@ -0,0 +1,56 @@
+import type { OpenAPIV3 } from '@scalar/openapi-types'
+import type { ParsedOpenAPI, ParsedOperation, PlaygroundSecurityScheme } from '../../types'
+import { availableLanguages, useTheme } from '../../composables/useTheme'
+import { buildRequest } from '../codeSamples/buildRequest'
+import { generateCodeSample } from '../codeSamples/generateCodeSample'
+import { resolveBaseUrl } from '../resolveBaseUrl'
+
+export async function getCodeSamples(spec: ParsedOpenAPI): Promise<ParsedOpenAPI> {
+  if (!spec?.paths) {
+    return spec
+  }
+
+  const baseUrl = resolveBaseUrl(spec.servers?.[0]?.url)
+
+  for (const [path, pathObject] of Object.entries(spec.paths)) {
+    for (const verb of Object.keys(pathObject) as OpenAPIV3.HttpMethods[]) {
+      const operation = pathObject[verb] as ParsedOperation
+
+      if (!operation) {
+        continue
+      }
+
+      const authorizations = operation.securityUi?.[0]?.schemes || []
+
+      const request = buildRequest({
+        path,
+        method: verb,
+        baseUrl,
+        parameters: operation.parameters || [],
+        authorizations: Object.entries(authorizations).map(([name, value]) => {
+          return {
+            ...spec.components?.securitySchemes?.[name],
+            playgroundValue: name,
+            label: String(name),
+          } as PlaygroundSecurityScheme
+        }),
+        body: operation.requestBody?.content?.['application/json']?.examples?.example?.value || {},
+        headers: {
+          ...(useTheme().getCodeSamplesDefaultHeaders() || {}),
+        },
+        variables: {},
+      })
+
+      operation.codeSamples = await Promise.all(
+        availableLanguages.map(async (language) => {
+          return {
+            ...language,
+            source: await generateCodeSample(language.lang, request),
+          }
+        }),
+      )
+    }
+  }
+
+  return spec
+}
diff --git a/src/lib/getSchemaUi.ts b/src/lib/processOpenAPI/getSchemaUi.ts
similarity index 97%
rename from src/lib/getSchemaUi.ts
rename to src/lib/processOpenAPI/getSchemaUi.ts
index 5c58d844..26be7e69 100644
--- a/src/lib/getSchemaUi.ts
+++ b/src/lib/processOpenAPI/getSchemaUi.ts
@@ -1,8 +1,8 @@
 import type { OpenAPI } from '@scalar/openapi-types'
-import { literalTypes } from '../index'
-import { getConstraints, hasConstraints } from './constraintsParser'
-import { getPropertyExamples } from './examples/getPropertyExamples'
-import { resolveCircularRef } from './resolveCircularRef'
+import { literalTypes } from '../../index'
+import { getConstraints, hasConstraints } from '../constraintsParser'
+import { getPropertyExamples } from '../examples/getPropertyExamples'
+import { resolveCircularRef } from '../resolveCircularRef'
 
 type JSONSchemaType = 'string' | 'number' | 'integer' | 'boolean' | 'array' | 'object' | 'null'
 
diff --git a/src/lib/getSecurityUi.ts b/src/lib/processOpenAPI/getSecurityUi.ts
similarity index 93%
rename from src/lib/getSecurityUi.ts
rename to src/lib/processOpenAPI/getSecurityUi.ts
index 3c96c970..3ccc8cf3 100644
--- a/src/lib/getSecurityUi.ts
+++ b/src/lib/processOpenAPI/getSecurityUi.ts
@@ -1,5 +1,5 @@
 import type { OpenAPIV3 } from '@scalar/openapi-types'
-import type { SecurityUi, SecurityUiItem } from '../types'
+import type { SecurityUi, SecurityUiItem } from '../../types'
 
 const NO_SECURITY = 'None'
 
diff --git a/src/lib/processOpenAPI/processAsyncOpenAPI.ts b/src/lib/processOpenAPI/processAsyncOpenAPI.ts
new file mode 100644
index 00000000..ba766a56
--- /dev/null
+++ b/src/lib/processOpenAPI/processAsyncOpenAPI.ts
@@ -0,0 +1,10 @@
+import type { ParsedOpenAPI } from '../../types'
+import { getCodeSamples } from './getCodeSamples'
+
+export async function processAsyncOpenAPI(spec: ParsedOpenAPI): Promise<ParsedOpenAPI> {
+  let parsedSpec = spec
+
+  parsedSpec = await getCodeSamples(parsedSpec)
+
+  return { ...parsedSpec }
+}
diff --git a/src/lib/processOpenAPI.ts b/src/lib/processOpenAPI/processOpenAPI.ts
similarity index 90%
rename from src/lib/processOpenAPI.ts
rename to src/lib/processOpenAPI/processOpenAPI.ts
index 186182d5..d78f6c36 100644
--- a/src/lib/processOpenAPI.ts
+++ b/src/lib/processOpenAPI/processOpenAPI.ts
@@ -1,11 +1,12 @@
 import type { OpenAPI, OpenAPIV3 } from '@scalar/openapi-types'
 import type { JSONSchema } from '@trojs/openapi-dereference'
-import type { ParsedContent, ParsedOpenAPI, ParsedOperation } from '../types'
+import type { ParsedContent, ParsedOpenAPI, ParsedOperation } from '../../types'
 import { dereferenceSync } from '@trojs/openapi-dereference'
 import { merge } from 'allof-merge'
-import { getSchemaExample } from './examples/getSchemaExample'
+import { getSchemaExample } from '../examples/getSchemaExample'
 import { getSchemaUi } from './getSchemaUi'
 import { getSecurityUi } from './getSecurityUi'
+import { getCodeSamples } from './getCodeSamples'
 
 function safelyMergeSpec(spec: OpenAPI.Document): ParsedOpenAPI {
   try {
@@ -44,6 +45,11 @@ export function processOpenAPI(spec: OpenAPI.Document): ParsedOpenAPI {
   parsedSpec = safelyGenerateSecurityUi(parsedSpec)
   parsedSpec = safelyGenerateSchemaUi(parsedSpec)
 
+  parsedSpec.externalDocs = spec.externalDocs || parsedSpec.externalDocs || {}
+  parsedSpec.info = spec.info || parsedSpec.info || {}
+  parsedSpec.servers = spec.servers || parsedSpec.servers || []
+  parsedSpec.tags = spec.tags || parsedSpec.tags || []
+
   return { ...parsedSpec }
 }
 
diff --git a/src/lib/resolveBaseUrl.ts b/src/lib/resolveBaseUrl.ts
new file mode 100644
index 00000000..52045862
--- /dev/null
+++ b/src/lib/resolveBaseUrl.ts
@@ -0,0 +1,12 @@
+export function resolveBaseUrl(url: string, defaultUrl: string = 'http://localhost') {
+  try {
+    // Ensure that the URL is valid.
+    // eslint-disable-next-line no-new
+    new URL(url)
+
+    return url
+  } catch (error: Error | any) {
+    console.error('Failed to resolve base URL:', error?.message)
+    return defaultUrl
+  }
+}
diff --git a/src/types.ts b/src/types.ts
index ee687b15..d1ed9e38 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -56,6 +56,7 @@ export type OperationObject = OpenAPIV3.Document | OpenAPIV3_1.OperationObject
 
 export type PlaygroundSecurityScheme = OpenAPIV3.HttpSecurityScheme & OpenAPIV3.ApiKeySecurityScheme & OpenAPIV3.OAuth2SecurityScheme & OpenAPIV3.OpenIdSecurityScheme & {
   playgroundValue: RemovableRef<any>
+      // | any
   label: string
 }
 
diff --git a/test/lib/__snapshots__/processOpenAPI.test.ts.snap b/test/lib/__snapshots__/processOpenAPI.test.ts.snap
index 490d5d5c..5c7ddd57 100644
--- a/test/lib/__snapshots__/processOpenAPI.test.ts.snap
+++ b/test/lib/__snapshots__/processOpenAPI.test.ts.snap
@@ -394,6 +394,7 @@ exports[`processOpenAPI > processes the OpenAPI spec 1`] = `
       },
     },
   },
+  "externalDocs": {},
   "info": {
     "contact": {
       "email": "hi@enzonotario.me",
diff --git a/test/lib/examples/hasExample.test.ts b/test/lib/examples/hasExample.test.ts
index d08bb299..3a582b3c 100644
--- a/test/lib/examples/hasExample.test.ts
+++ b/test/lib/examples/hasExample.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { hasExample } from '../../../src/lib/examples/hasExample'
 import { specWithCircularRef, specWithCircularRefAndExample } from '../../testsConstants'
-import { getSchemaUi } from '../../../src/lib/getSchemaUi'
+import { getSchemaUi } from '../../../src/lib/processOpenAPI/getSchemaUi'
 
 describe('hasExample', () => {
   it('returns true if schema has an example at the root level', () => {
diff --git a/test/lib/getSchemaUi.test.ts b/test/lib/getSchemaUi.test.ts
index 611f36d2..d9f667a7 100644
--- a/test/lib/getSchemaUi.test.ts
+++ b/test/lib/getSchemaUi.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { dereferenceSync } from '@trojs/openapi-dereference'
-import { getSchemaUi } from '../../src/lib/getSchemaUi'
+import { getSchemaUi } from '../../src/lib/processOpenAPI/getSchemaUi'
 import { specWithCircularRef } from '../testsConstants'
 import { getSchemaExample } from '../../src/lib/examples/getSchemaExample'
 
diff --git a/test/lib/getSecurityUi.test.ts b/test/lib/getSecurityUi.test.ts
index aebc97ed..a55aaba0 100644
--- a/test/lib/getSecurityUi.test.ts
+++ b/test/lib/getSecurityUi.test.ts
@@ -1,6 +1,6 @@
 import type { OpenAPIV3 } from '@scalar/openapi-types'
 import { describe, expect, it } from 'vitest'
-import { getSecurityUi } from '../../src/lib/getSecurityUi'
+import { getSecurityUi } from '../../src/lib/processOpenAPI/getSecurityUi'
 
 describe('getSecurityUi', () => {
   it('returns an empty array when security is undefined', () => {
diff --git a/test/lib/processOpenAPI.test.ts b/test/lib/processOpenAPI.test.ts
index 178b2f46..485c1808 100644
--- a/test/lib/processOpenAPI.test.ts
+++ b/test/lib/processOpenAPI.test.ts
@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest'
-import { processOpenAPI } from '../../src/lib/processOpenAPI'
 import realSpec from '../../docs/public/openapi.json'
+import { processOpenAPI } from '../../src/lib/processOpenAPI/processOpenAPI'
 
 describe('processOpenAPI', () => {
-  it('processes the OpenAPI spec', () => {
-    const parsedSPec = processOpenAPI(realSpec)
+  it('processes the OpenAPI spec', async () => {
+    const parsedSPec = await processOpenAPI(realSpec)
 
     expect(parsedSPec).toMatchSnapshot()
   })