From 4636f94419ad5cec13fa95bc36f62fab62635e1c Mon Sep 17 00:00:00 2001
From: Enzo Notario <enzo.notario@gmail.com>
Date: Thu, 14 Nov 2024 22:52:51 -0300
Subject: [PATCH] feat(useTheme): allows to customize CodeSamples
 langs/generator (#116)

---
 .../theme/components/ExampleBlock.vue         |  13 +
 docs/.vitepress/config.mts                    |   4 +
 docs/.vitepress/theme/index.ts                |   4 +
 docs/customizations/code-samples.md           |  44 +++
 docs/customizations/operation-badges.md       |  61 +--
 .../parts/code-samples-example.md             |  68 ++++
 .../parts/operation-badges-example.md         |  14 +
 docs/layouts/custom-slots.md                  |  14 +-
 src/components/Operation/OAOperation.vue      |   3 +
 src/components/Path/OAPath.vue                |  28 +-
 .../Playground/OAPlaygroundParameters.vue     |  91 +----
 src/components/Sample/OACodeSamples.vue       |  62 +--
 src/components/Try/OATryItButton.vue          |  14 +-
 src/components/Try/OATryWithVariables.vue     |  40 +-
 src/composables/useTheme.ts                   | 108 ++++++
 src/index.ts                                  |   3 +
 src/lib/codeSamples/buildRequest.ts           | 118 ++++++
 src/lib/codeSamples/generateCodeSample.ts     |  20 +
 src/lib/codeSamples/generateCodeSampleCurl.ts |  13 +
 .../generateCodeSampleJavaScript.ts           |  31 ++
 src/lib/codeSamples/generateCodeSamplePhp.ts  |  50 +++
 .../codeSamples/generateCodeSamplePython.ts   |  32 ++
 src/lib/codeSamples/request.ts                |  17 +
 src/lib/fetchToCurl.ts                        |   5 +-
 src/lib/generateCodeSamples.ts                |  40 --
 test/lib/buildRequest.test.ts                 | 194 ++++++++++
 test/lib/generateCodeSamples.test.ts          | 355 +++++++++++++++---
 27 files changed, 1177 insertions(+), 269 deletions(-)
 create mode 100644 dev/.vitepress/theme/components/ExampleBlock.vue
 create mode 100644 docs/customizations/code-samples.md
 create mode 100644 docs/customizations/parts/code-samples-example.md
 create mode 100644 docs/customizations/parts/operation-badges-example.md
 create mode 100644 src/lib/codeSamples/buildRequest.ts
 create mode 100644 src/lib/codeSamples/generateCodeSample.ts
 create mode 100644 src/lib/codeSamples/generateCodeSampleCurl.ts
 create mode 100644 src/lib/codeSamples/generateCodeSampleJavaScript.ts
 create mode 100644 src/lib/codeSamples/generateCodeSamplePhp.ts
 create mode 100644 src/lib/codeSamples/generateCodeSamplePython.ts
 create mode 100644 src/lib/codeSamples/request.ts
 delete mode 100644 src/lib/generateCodeSamples.ts
 create mode 100644 test/lib/buildRequest.test.ts

diff --git a/dev/.vitepress/theme/components/ExampleBlock.vue b/dev/.vitepress/theme/components/ExampleBlock.vue
new file mode 100644
index 00000000..2bba2070
--- /dev/null
+++ b/dev/.vitepress/theme/components/ExampleBlock.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <slot name="code" />
+
+    <details class="rounded border" style="padding: 24px; margin: 16px 0;" open>
+      <summary>Example</summary>
+      <slot name="example" />
+    </details>
+  </div>
+</template>
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index b6542125..d14c0b27 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -83,6 +83,10 @@ export default defineConfigWithTheme({
                 text: 'Operation Badges',
                 link: '/customizations/operation-badges',
               },
+              {
+                text: 'Code Samples',
+                link: '/customizations/code-samples',
+              },
             ],
           },
         ],
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index b1647f38..fef9229e 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -2,6 +2,7 @@ import { theme, useOpenapi } from 'vitepress-openapi'
 import DefaultTheme from 'vitepress/theme'
 import spec from '../../public/openapi.json' assert {type: 'json'}
 import 'vitepress-openapi/dist/style.css'
+import ExampleBlock from '@dev/.vitepress/theme/components/ExampleBlock.vue'
 
 export default {
   extends: DefaultTheme,
@@ -13,5 +14,8 @@ export default {
 
     // Use the theme.
     theme.enhanceApp({ app, openapi })
+
+    // Register custom components.
+    app.component('ExampleBlock', ExampleBlock)
   },
 }
diff --git a/docs/customizations/code-samples.md b/docs/customizations/code-samples.md
new file mode 100644
index 00000000..c16476b4
--- /dev/null
+++ b/docs/customizations/code-samples.md
@@ -0,0 +1,44 @@
+---
+aside: false
+outline: false
+---
+
+# Code Samples
+
+Code Samples allow you to showcase API request examples in multiple programming languages.
+This feature helps API consumers understand how to integrate with your API using their preferred language.
+
+You can customize:
+
+- Which languages to display (`langs`)
+- Available languages for selection (`availableLangs`)
+- How code is generated for each language (`generator`)
+
+
+<ExampleBlock>
+
+<template #code>
+
+## Custom Languages
+
+For example, you can add [Bru Markup Language](https://docs.usebruno.com/bru-lang/overview) to the list of languages to show and available languages to select from and a generator to convert the request object to Bru code.
+
+```markdown
+---
+aside: false
+outline: false
+title: vitepress-openapi
+---
+
+<!--@include: ./parts/code-samples-example.md-->
+```
+
+</template>
+
+<template #example>
+
+<!--@include: ./parts/code-samples-example.md-->
+
+</template>
+
+</ExampleBlock>
diff --git a/docs/customizations/operation-badges.md b/docs/customizations/operation-badges.md
index c04d39d6..76c0d802 100644
--- a/docs/customizations/operation-badges.md
+++ b/docs/customizations/operation-badges.md
@@ -12,7 +12,9 @@ Each operation can have different badges that indicate its state, for example if
 
 By default, only the `deprecated` badge is shown, as appropriate. You can customize the operation badges using the `useTheme({ operation: { badges: string[] })` function. **The order in which you set the badges is the order in which they will be displayed.**
 
-For example:
+<ExampleBlock>
+
+<template #code>
 
 ```markdown
 ---
@@ -21,22 +23,20 @@ outline: false
 title: vitepress-openapi
 ---
 
-<script setup lang="ts">
-import { useData } from 'vitepress'
-import { useTheme } from 'vitepress-openapi'
-import spec from '../public/openapi.json'
+<!--@include: ./parts/operation-badges-example.md-->
+```
 
-const { isDark } = useData()
+</template>
 
-useTheme({
-    operation: {
-        badges: ['deprecated', 'operationId'],
-    },
-})
-</script>
+<template #example>
 
-<OAOperation :spec="spec" operationId="getAllArtists" :isDark="isDark" />
-```
+<!--@include: ./parts/operation-badges-example.md-->
+
+</template>
+
+</ExampleBlock>
+
+# Custom Prefix
 
 You can also customize the prefix of the badges by setting the `operation.badgePrefix.{badgeName}` key in the i18n messages. For example, in your `.vitepress/theme/index.ts`, before calling `theme.enhanceApp({ app })`, you can set the following:
 
@@ -67,36 +67,3 @@ export default {
         theme.enhanceApp({ app })
     },
 }
-
-```
-
-## Example
-
----
-
-<script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
-import { useData } from 'vitepress'
-import { useTheme } from 'vitepress-openapi'
-import spec from '../public/openapi.json'
-
-const { isDark } = useData()
-
-onMounted(() => {
-    useTheme({
-        operation: {
-            badges: ['deprecated', 'operationId'],
-        },
-    })
-})
-
-onUnmounted(() => {
-    useTheme({
-        operation: {
-            badges: ['deprecated'],
-        },
-    })
-})
-</script>
-
-<OAOperation :spec="spec" operationId="getAllArtists" :isDark="isDark" />
diff --git a/docs/customizations/parts/code-samples-example.md b/docs/customizations/parts/code-samples-example.md
new file mode 100644
index 00000000..1d4d9950
--- /dev/null
+++ b/docs/customizations/parts/code-samples-example.md
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { useTheme, generateCodeSample } from 'vitepress-openapi'
+
+const { isDark } = useData()
+
+useTheme({
+    codeSamples: {
+        // List of languages to show in Code Samples section.
+        langs: [
+            'bruno',
+            ...useTheme().getCodeSamplesLangs(),
+        ],
+        // List of available languages to select from.
+        availableLanguages: [
+            {
+                lang: 'bruno',
+                label: 'Bruno',
+                highlighter: 'plaintext',
+            },
+            ...useTheme().getCodeSamplesAvailableLanguages(),
+        ],
+        defaultLang: 'bruno',
+        generator: (lang, request) => {
+            if (lang === 'bruno') {
+                return generateBruRequest(request)
+            }
+
+            return generateCodeSample(lang, request)
+        },
+    },
+})
+
+function generateBruRequest(request) {
+  const { url, method, headers, body, query } = request;
+
+  const methodLower = method.toLowerCase();
+
+  const queryString = query && Object.keys(query).length
+    ? `${url}?${new URLSearchParams(query).toString()}`
+    : url;
+
+  const headersSection = headers && Object.keys(headers).length
+    ? `headers {\n${Object.entries(headers)
+        .map(([key, value]) => `  ${key}: ${value}`)
+        .join('\n')}\n}`
+    : '';
+
+  const bodySection = body
+    ? `body {\n  ${JSON.stringify(body, null, 2).replace(/\n/g, '\n  ')}\n}`
+    : '';
+
+  const bruRequest = `${methodLower} {
+  url: ${queryString}
+}
+
+${headersSection}
+
+${bodySection}
+`;
+
+  return bruRequest
+        .trim()
+        .replace(/\n{2,}/g, '\n\n') // Remove extra newlines
+}
+</script>
+
+<OASpec :isDark="isDark" />
diff --git a/docs/customizations/parts/operation-badges-example.md b/docs/customizations/parts/operation-badges-example.md
new file mode 100644
index 00000000..90d9a072
--- /dev/null
+++ b/docs/customizations/parts/operation-badges-example.md
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { useTheme } from 'vitepress-openapi'
+
+const { isDark } = useData()
+
+useTheme({
+    operation: {
+        badges: ['deprecated', 'operationId'],
+    },
+})
+</script>
+
+<OASpec :isDark="isDark" />
diff --git a/docs/layouts/custom-slots.md b/docs/layouts/custom-slots.md
index 87079c8b..0bceda03 100644
--- a/docs/layouts/custom-slots.md
+++ b/docs/layouts/custom-slots.md
@@ -7,6 +7,10 @@ outline: false
 
 The `OAOperation` component provides several slots for customizing the operation layout.
 
+<ExampleBlock>
+
+<template #code>
+
 ## Description
 
 The `description` slot allows you to customize the operation description.
@@ -21,11 +25,15 @@ title: vitepress-openapi
 <!--@include: ./parts/custom-slots-example.md-->
 ```
 
-This will render the following:
+</template>
+
+<template #example>
 
-::: info Custom description slot 
 <!--@include: ./parts/custom-slots-example.md-->
-:::
+
+</template>
+
+</ExampleBlock>
 
 ## WIP
 
diff --git a/src/components/Operation/OAOperation.vue b/src/components/Operation/OAOperation.vue
index 6c5b4fe6..aeeee281 100644
--- a/src/components/Operation/OAOperation.vue
+++ b/src/components/Operation/OAOperation.vue
@@ -258,6 +258,7 @@ function hasSlot(name) {
     >
       <ClientOnly>
         <OATryWithVariables
+          :request="tryIt.request"
           :operation-id="tryIt.operationId"
           :path="tryIt.path"
           :method="tryIt.method"
@@ -266,6 +267,7 @@ function hasSlot(name) {
           :schema="tryIt.schema"
           :security-schemes="tryIt.securitySchemes"
           :is-dark="isDark"
+          @update:request="tryIt.updateRequest"
         />
       </ClientOnly>
     </template>
@@ -295,6 +297,7 @@ function hasSlot(name) {
         :path="codeSamples.path"
         :method="codeSamples.method"
         :base-url="codeSamples.baseUrl"
+        :request="codeSamples.request"
         :is-dark="isDark"
       />
     </template>
diff --git a/src/components/Path/OAPath.vue b/src/components/Path/OAPath.vue
index 2ceebb11..fac1ab2e 100644
--- a/src/components/Path/OAPath.vue
+++ b/src/components/Path/OAPath.vue
@@ -1,7 +1,9 @@
 <script setup>
-import { computed, defineProps } from 'vue'
+import { computed, defineProps, ref } from 'vue'
 import { useTheme } from 'vitepress-openapi/composables/useTheme'
 import { getOpenApiInstance } from 'vitepress-openapi'
+import { buildRequest } from 'vitepress-openapi/lib/codeSamples/buildRequest'
+import { propertiesTypesJsonRecursive } from 'vitepress-openapi/lib/generateSchemaJson'
 
 const props = defineProps({
   id: {
@@ -39,6 +41,26 @@ const operationResponses = operationParsed?.responses
 const operationSlots = computed(() => themeConfig.getOperationSlots().filter(slot => !themeConfig.getOperationHiddenSlots().includes(slot)))
 
 const operationCols = computed(() => themeConfig.getOperationCols())
+
+const shouldBuildRequest = computed(() => ['try-it', 'code-samples'].some(slot => operationSlots.value.includes(slot)))
+
+const request = ref(
+  shouldBuildRequest.value
+    ? buildRequest({
+      path: operationPath,
+      method: operationMethod,
+      baseUrl,
+      parameters: operationParameters ?? [],
+      authScheme: securitySchemes.length ? securitySchemes[0] : undefined,
+      body: operationRequestBody ? propertiesTypesJsonRecursive(operationRequestBody, true) : undefined,
+      variables: {},
+    })
+    : {},
+)
+
+function updateRequest(newRequest) {
+  request.value = newRequest
+}
 </script>
 
 <template>
@@ -171,6 +193,8 @@ const operationCols = computed(() => themeConfig.getOperationCols())
                 :parameters="operationParameters"
                 :schema="operationRequestBody"
                 :security-schemes="securitySchemes"
+                :request="request"
+                :update-request="updateRequest"
               />
             </template>
 
@@ -182,6 +206,8 @@ const operationCols = computed(() => themeConfig.getOperationCols())
                 :method="operationMethod"
                 :base-url="baseUrl"
                 :path="operationPath"
+                :request="request"
+                :update-request="updateRequest"
               />
             </template>
           </div>
diff --git a/src/components/Playground/OAPlaygroundParameters.vue b/src/components/Playground/OAPlaygroundParameters.vue
index 8f16ff0f..7e81cd3d 100644
--- a/src/components/Playground/OAPlaygroundParameters.vue
+++ b/src/components/Playground/OAPlaygroundParameters.vue
@@ -2,11 +2,12 @@
 import { computed, defineEmits, defineProps, ref, watch } from 'vue'
 import OAJSONEditor from 'vitepress-openapi/components/Common/OAJSONEditor.vue'
 import { propertiesTypesJsonRecursive } from 'vitepress-openapi/lib/generateSchemaJson'
-import { usePlayground, useTheme } from 'vitepress-openapi'
+import { OARequest, usePlayground, useTheme } from 'vitepress-openapi'
 import { useStorage } from '@vueuse/core'
 import OAPlaygroundParameterInput from 'vitepress-openapi/components/Playground/OAPlaygroundParameterInput.vue'
 import OAPlaygroundSecurityInput from 'vitepress-openapi/components/Playground/OAPlaygroundSecurityInput.vue'
 import { getExample } from 'vitepress-openapi/lib/getExample'
+import { buildRequest } from 'vitepress-openapi/lib/codeSamples/buildRequest'
 
 interface SecurityScheme {
   type: string
@@ -18,10 +19,7 @@ interface SecurityScheme {
 const props = defineProps({
   request: { // v-model
     type: Object,
-    default: () => ({
-      url: '',
-      headers: {},
-    }),
+    default: () => (new OARequest()),
   },
   operationId: {
     type: String,
@@ -90,77 +88,6 @@ const authScheme = ref(null)
 
 const body = ref(props.schema ? propertiesTypesJsonRecursive(props.schema, true) : null)
 
-function buildRequest() {
-  let requestPath = props.path
-
-  for (const [key, value] of Object.entries(variables.value)) {
-    if (!pathParameters.find(parameter => parameter.name === key)) {
-      continue
-    }
-
-    if (value === undefined || value === '') {
-      continue
-    }
-
-    requestPath = requestPath.replace(`{${key}}`, value)
-  }
-
-  const url = new URL(`${props.baseUrl}${requestPath}`)
-
-  for (const [key, value] of Object.entries(variables.value)) {
-    if (!queryParameters.find(parameter => parameter.name === key)) {
-      continue
-    }
-
-    if (value === undefined || value === '') {
-      continue
-    }
-
-    url.searchParams.set(key, value)
-  }
-
-  const headers = new Headers({})
-
-  for (const [key, value] of Object.entries(variables.value)) {
-    if (!headerParameters.find(parameter => parameter.name === key)) {
-      continue
-    }
-
-    if (value === undefined || value === '') {
-      continue
-    }
-
-    headers.set(key, value)
-  }
-
-  if (authScheme.value) {
-    switch (authScheme.value.type) {
-      case 'http':
-        headers.set('Authorization', `${authScheme.value.scheme === 'basic' ? 'Basic' : 'Bearer'} ${authScheme.value.value}`)
-        break
-      case 'apiKey':
-        headers.set(authScheme.value.name, authScheme.value.value)
-        break
-      case 'openIdConnect':
-        headers.set('Authorization', `Bearer ${authScheme.value.value}`)
-        break
-      case 'oauth2':
-        headers.set('Authorization', `Bearer ${authScheme.value.value}`)
-        break
-    }
-  }
-
-  const newRequest = {
-    url: url.toString(),
-    headers: Object.fromEntries(headers),
-    body: body.value,
-  }
-
-  emits('update:request', newRequest)
-
-  return newRequest
-}
-
 function setAuthScheme(scheme: SecurityScheme) {
   const name = selectedSchemeName.value
 
@@ -172,7 +99,17 @@ function setAuthScheme(scheme: SecurityScheme) {
   }
 }
 
-watch([variables, authScheme, body], buildRequest, { deep: true, immediate: true })
+watch([variables, authScheme, body], () => {
+  emits('update:request', buildRequest({
+    baseUrl: props.baseUrl,
+    method: props.method,
+    path: props.path,
+    variables: variables.value,
+    authScheme: authScheme.value,
+    body: body.value,
+    parameters: props.parameters,
+  }))
+}, { deep: true })
 
 watch(selectedScheme, () => {
   if (!selectedScheme.value) {
diff --git a/src/components/Sample/OACodeSamples.vue b/src/components/Sample/OACodeSamples.vue
index f6d22f0d..3287dfd5 100644
--- a/src/components/Sample/OACodeSamples.vue
+++ b/src/components/Sample/OACodeSamples.vue
@@ -1,57 +1,73 @@
 <script setup>
-import { generateCodeSamples } from '../../lib/generateCodeSamples'
+import { OARequest, useTheme } from 'vitepress-openapi'
+import { computed } from 'vue'
 
 const props = defineProps({
   operationId: {
     type: String,
     required: true,
   },
-  path: {
-    type: String,
-    required: true,
-  },
-  method: {
-    type: String,
-    default: 'GET',
-  },
-  baseUrl: {
-    type: String,
-    required: true,
-  },
   isDark: {
     type: Boolean,
     default: false,
   },
+  request: {
+    type: Object,
+    default: () => (new OARequest()),
+  },
 })
 
-const url = props.baseUrl + props.path
+const themeConfig = useTheme()
+
+const availableLanguages = themeConfig.getCodeSamplesAvailableLanguages()
+
+const configuredLanguages = themeConfig.getCodeSamplesLangs()
+
+const generator = themeConfig.getCodeSamplesGenerator()
 
-const samples = generateCodeSamples(url, props.method)
+const samples = computed(() => availableLanguages
+  .filter((availableLanguage) => {
+    return configuredLanguages.includes(availableLanguage.lang)
+  })
+  .map((availableLanguage) => {
+    return {
+      ...availableLanguage,
+      source: generator(availableLanguage.lang, {
+        ...props.request,
+        headers: {
+          ...(themeConfig.getCodeSamplesDefaultHeaders() || {}),
+          ...props.request.headers,
+        },
+      }),
+    }
+  }),
+)
+const defaultLang = themeConfig.getCodeSamplesDefaultLang()
 </script>
 
 <template>
   <div class="vp-code-group vp-adaptive-theme">
     <div class="tabs">
-      <template v-for="(sample, key) in samples" :key="key">
+      <template v-for="sample in samples" :key="sample.lang">
         <input
-          :id="`tab-${props.operationId}-${key}`"
+          :id="`tab-${props.operationId}-${sample.lang}`"
           type="radio"
           :name="`group-${props.operationId}`"
-          :checked="key === 'curl'"
+          :checked="sample.lang === defaultLang"
         >
-        <label :for="`tab-${props.operationId}-${key}`">{{ sample.label || sample.lang }}</label>
+        <label :for="`tab-${props.operationId}-${sample.lang}`">{{ sample.label || sample.lang }}</label>
       </template>
     </div>
 
     <div class="blocks">
       <OACodeBlock
-        v-for="(sample, key) in samples"
-        :key="key"
+        v-for="sample in samples"
+        :key="sample.lang"
         :code="sample.source"
-        :lang="sample.lang"
+        :lang="sample.highlighter"
         :label="sample.label"
         :is-dark="props.isDark"
-        :class="{ active: key === 'curl' }"
+        :class="{ active: sample.lang === defaultLang }"
         class="!mb-0"
       />
     </div>
diff --git a/src/components/Try/OATryItButton.vue b/src/components/Try/OATryItButton.vue
index 3cd55021..0ca51264 100644
--- a/src/components/Try/OATryItButton.vue
+++ b/src/components/Try/OATryItButton.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import { Button } from 'vitepress-openapi/components/ui/button'
 import { Badge } from 'vitepress-openapi/components/ui/badge'
+import { OARequest } from 'vitepress-openapi'
 
 interface PlaygroundResponse {
   body: any
@@ -29,11 +30,7 @@ const props = defineProps({
   },
   request: {
     type: Object,
-    default: () => ({
-      url: '',
-      headers: {},
-      body: {},
-    }),
+    default: () => (new OARequest()),
   },
   isDark: {
     type: Boolean,
@@ -76,7 +73,12 @@ async function tryIt() {
       headers['Content-Type'] = 'application/json'
     }
 
-    const data = await fetch(props.request.url ?? defaultRequestUrl, {
+    const url = new URL(props.request.url ?? defaultRequestUrl)
+    for (const [key, value] of Object.entries(props.request.query)) {
+      url.searchParams.set(key, value)
+    }
+
+    const data = await fetch(url.toString(), {
       method: props.method.toUpperCase(),
       headers,
       body: props.request.body ? JSON.stringify(props.request.body) : null,
diff --git a/src/components/Try/OATryWithVariables.vue b/src/components/Try/OATryWithVariables.vue
index 4f2095ef..510da1c8 100644
--- a/src/components/Try/OATryWithVariables.vue
+++ b/src/components/Try/OATryWithVariables.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { computed, defineProps, ref } from 'vue'
-import fetchToCurl from 'vitepress-openapi/lib/fetchToCurl'
-import { formatJson } from 'vitepress-openapi/lib/formatJson'
+import { defineEmits, defineProps, ref } from 'vue'
 import OAPlaygroundResponse from 'vitepress-openapi/components/Playground/OAPlaygroundResponse.vue'
 import OAPlaygroundParameters from 'vitepress-openapi/components/Playground/OAPlaygroundParameters.vue'
+import { OARequest } from 'vitepress-openapi'
 
 const props = defineProps({
   operationId: {
@@ -42,32 +41,23 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  request: {
+    type: Object,
+    default: () => (new OARequest()),
+  },
 })
 
-const request = ref({
-  url: `${props.baseUrl}${props.path}`,
-  headers: {},
-})
+const emits = defineEmits([
+  'update:request',
+])
 
 const loading = ref(false)
-
-const curl = computed(() => {
-  return fetchToCurl({
-    method: props.method.toUpperCase(),
-    url: request.value.url,
-    headers: {
-      ...request.value.headers,
-      ...(!request.value.headers?.['Content-Type'] ? { 'Content-Type': 'application/json' } : {}),
-    },
-    body: request.value.body ? formatJson(request.value.body) : null,
-  })
-})
 </script>
 
 <template>
   <div class="flex flex-col space-y-2">
     <OAPlaygroundParameters
-      v-model:request="request"
+      :request="props.request"
       :operation-id="props.operationId"
       :path="props.path"
       :method="props.method"
@@ -76,17 +66,11 @@ const curl = computed(() => {
       :security-schemes="props.securitySchemes ?? {}"
       :schema="props.schema"
       :is-dark="props.isDark"
-    />
-
-    <OACodeBlock
-      :code="curl"
-      lang="bash"
-      label="cURL"
-      :is-dark="props.isDark"
+      @update:request="($event) => $emit('update:request', $event)"
     />
 
     <OATryItButton
-      :request="request"
+      :request="props.request"
       :operation-id="props.operationId"
       :path="props.path"
       :method="props.method"
diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
index 675b97f1..27d82864 100644
--- a/src/composables/useTheme.ts
+++ b/src/composables/useTheme.ts
@@ -1,6 +1,8 @@
 import { ref } from 'vue'
 import vitesseLight from 'shiki/themes/vitesse-light.mjs'
 import vitesseDark from 'shiki/themes/vitesse-dark.mjs'
+import type { IOARequest } from '../lib/codeSamples/request'
+import { generateCodeSample } from '../lib/codeSamples/generateCodeSample'
 import { deepUnref } from '../lib/deepUnref'
 import { locales } from '../locales'
 import type { OperationSlot } from '../types'
@@ -95,8 +97,25 @@ export interface UseThemeConfig {
   operation?: Partial<OperationConfig>
   i18n?: Partial<I18nConfig>
   spec?: Partial<SpecConfig>
+  codeSamples?: Partial<CodeSamplesConfig>
 }
 
+export interface CodeSamplesConfig {
+  langs: string[]
+  defaultLang: string
+  availableLanguages: LanguageConfig[]
+  generator: GeneratorFunction
+  defaultHeaders: Record<string, string>
+}
+
+interface LanguageConfig {
+  lang: string
+  label: string
+  highlighter: string
+}
+
+type GeneratorFunction = (lang: string, request: IOARequest) => string
+
 export const DEFAULT_OPERATION_SLOTS: OperationSlot[] = [
   'header',
   'path',
@@ -111,6 +130,29 @@ export const DEFAULT_OPERATION_SLOTS: OperationSlot[] = [
   'footer',
 ]
 
+const availableLanguages: LanguageConfig[] = [
+  {
+    lang: 'curl',
+    label: 'cURL',
+    highlighter: 'bash',
+  },
+  {
+    lang: 'javascript',
+    label: 'JavaScript',
+    highlighter: 'javascript',
+  },
+  {
+    lang: 'php',
+    label: 'PHP',
+    highlighter: 'php',
+  },
+  {
+    lang: 'python',
+    label: 'Python',
+    highlighter: 'python',
+  },
+]
+
 const themeConfig: UseThemeConfig = {
   theme: {
     highlighterTheme: {
@@ -173,6 +215,20 @@ const themeConfig: UseThemeConfig = {
     defaultTag: 'Default',
     defaultTagDescription: '',
   },
+  codeSamples: {
+    langs: [
+      'curl',
+      'javascript',
+      'php',
+      'python',
+    ],
+    defaultLang: 'curl',
+    availableLanguages,
+    generator: (lang: string, request: IOARequest) => generateCodeSample(lang, request),
+    defaultHeaders: {
+      'Content-Type': 'application/json',
+    },
+  },
 }
 
 const defaultThemeConfig = { ...deepUnref(themeConfig) }
@@ -257,6 +313,10 @@ export function useTheme(config: Partial<UseThemeConfig> = {}) {
     if (config?.spec !== undefined) {
       setSpecConfig(config.spec)
     }
+
+    if (config?.codeSamples !== undefined) {
+      setCodeSamplesConfig(config.codeSamples)
+    }
   }
 
   function reset() {
@@ -478,6 +538,48 @@ export function useTheme(config: Partial<UseThemeConfig> = {}) {
     }
   }
 
+  function getCodeSamplesLangs() {
+    return themeConfig.codeSamples.langs
+  }
+
+  function getCodeSamplesDefaultLang() {
+    return themeConfig.codeSamples.defaultLang
+  }
+
+  function getCodeSamplesAvailableLanguages() {
+    return themeConfig.codeSamples.availableLanguages
+  }
+
+  function getCodeSamplesGenerator() {
+    return themeConfig.codeSamples.generator
+  }
+
+  function getCodeSamplesDefaultHeaders() {
+    return themeConfig.codeSamples.defaultHeaders
+  }
+
+  function setCodeSamplesConfig(config: Partial<CodeSamplesConfig>) {
+    if (config.langs) {
+      themeConfig.codeSamples.langs = config.langs
+    }
+
+    if (config.defaultLang) {
+      themeConfig.codeSamples.defaultLang = config.defaultLang
+    }
+
+    if (config.availableLanguages) {
+      themeConfig.codeSamples.availableLanguages = config.availableLanguages
+    }
+
+    if (config.generator) {
+      themeConfig.codeSamples.generator = config.generator
+    }
+
+    if (config.defaultHeaders) {
+      themeConfig.codeSamples.defaultHeaders = config.defaultHeaders
+    }
+  }
+
   return {
     schemaConfig: themeConfig.requestBody,
     reset,
@@ -522,5 +624,11 @@ export function useTheme(config: Partial<UseThemeConfig> = {}) {
     setI18nConfig,
     getSpecConfig,
     setSpecConfig,
+    getCodeSamplesLangs,
+    getCodeSamplesDefaultLang,
+    getCodeSamplesAvailableLanguages,
+    getCodeSamplesGenerator,
+    getCodeSamplesDefaultHeaders,
+    setCodeSamplesConfig,
   }
 }
diff --git a/src/index.ts b/src/index.ts
index e98fbb05..09fa356c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -19,6 +19,9 @@ export { usePaths } from './composables/usePaths'
 export { OpenApi } from './lib/OpenApi'
 export { getOpenApiInstance } from './lib/getOpenApiInstance'
 export { createOpenApiInstance } from './lib/createOpenApiInstance'
+export { OARequest } from './lib/codeSamples/request'
+export type { IOARequest } from './lib/codeSamples/request'
+export { generateCodeSample } from './lib/codeSamples/generateCodeSample'
 export { locales } from './locales'
 
 interface VPTheme {
diff --git a/src/lib/codeSamples/buildRequest.ts b/src/lib/codeSamples/buildRequest.ts
new file mode 100644
index 00000000..de0c868a
--- /dev/null
+++ b/src/lib/codeSamples/buildRequest.ts
@@ -0,0 +1,118 @@
+import { getExample } from '../getExample'
+import { OARequest } from './request'
+
+function processParameters(variables, parameters, callback) {
+  const parameterNames = new Set(parameters.map(parameter => parameter.name))
+  for (const [key, value] of Object.entries(variables)) {
+    if (!parameterNames.has(key)) {
+      continue
+    }
+    if (value === undefined || value === '') {
+      continue
+    }
+    callback(key, value)
+  }
+}
+
+function getPath(variables, pathParameters, path) {
+  let resolvedPath = path
+  processParameters(variables, pathParameters, (key, value) => {
+    resolvedPath = resolvedPath.replace(`{${key}}`, value)
+  })
+  return resolvedPath
+}
+
+function getHeaders(variables, headerParameters, authScheme) {
+  const headers = new Headers({})
+
+  processParameters(variables, headerParameters, (key, value) => {
+    headers.set(key, value)
+  })
+
+  if (authScheme) {
+    switch (authScheme.type) {
+      case 'http':
+        headers.set('Authorization', `${authScheme.scheme === 'basic' ? 'Basic' : 'Bearer'} ${authScheme.value}`)
+        break
+      case 'apiKey':
+        headers.set(authScheme.name, authScheme.value)
+        break
+      case 'openIdConnect':
+        headers.set('Authorization', `Bearer ${authScheme.value}`)
+        break
+      case 'oauth2':
+        headers.set('Authorization', `Bearer ${authScheme.value}`)
+        break
+    }
+  }
+  return headers
+}
+
+function getQuery(variables, queryParameters) {
+  const query = {}
+
+  processParameters(variables, queryParameters, (key, value) => {
+    query[key] = value
+  })
+
+  return query
+}
+
+function setExamplesAsVariables(parameters, variables) {
+  parameters.forEach((parameter) => {
+    if (variables[parameter.name] !== undefined) {
+      return
+    }
+
+    const example = getExample(parameter)
+    if (example !== null) {
+      variables[parameter.name] = example
+    }
+  })
+
+  return variables
+}
+
+export function buildRequest({
+  path,
+  method,
+  baseUrl,
+  parameters,
+  authScheme,
+  body,
+  variables = {},
+}) {
+  const resolvedVariables = setExamplesAsVariables(parameters, variables)
+
+  const pathParameters = parameters.filter(parameter => parameter.in === 'path')
+  const queryParameters = parameters.filter(parameter => parameter.in === 'query')
+  const headerParameters = parameters.filter(parameter => parameter.in === 'header')
+
+  if (import.meta.env.VITE_DEBUG) {
+    console.warn('Building request with parameters:', {
+      path,
+      method,
+      baseUrl,
+      pathParameters,
+      queryParameters,
+      headerParameters,
+      authScheme,
+      body,
+      resolvedVariables,
+    })
+  }
+
+  const resolvedPath = getPath(resolvedVariables, pathParameters, path)
+
+  const query = getQuery(resolvedVariables, queryParameters)
+
+  const headers = getHeaders(resolvedVariables, headerParameters, authScheme)
+
+  return new OARequest(
+    `${baseUrl}${resolvedPath}`,
+    method,
+    Object.fromEntries(headers),
+    body,
+    query,
+  )
+}
diff --git a/src/lib/codeSamples/generateCodeSample.ts b/src/lib/codeSamples/generateCodeSample.ts
new file mode 100644
index 00000000..5d11b3bf
--- /dev/null
+++ b/src/lib/codeSamples/generateCodeSample.ts
@@ -0,0 +1,20 @@
+import type { OARequest } from './request'
+import { generateCodeSampleJavaScript } from './generateCodeSampleJavaScript'
+import { generateCodeSampleCurl } from './generateCodeSampleCurl'
+import { generateCodeSamplePhp } from './generateCodeSamplePhp'
+import { generateCodeSamplePython } from './generateCodeSamplePython'
+
+export function generateCodeSample(lang: string, request: OARequest): string {
+  switch (lang) {
+    case 'curl':
+      return generateCodeSampleCurl(request)
+    case 'javascript':
+      return generateCodeSampleJavaScript(request)
+    case 'php':
+      return generateCodeSamplePhp(request)
+    case 'python':
+      return generateCodeSamplePython(request)
+    default:
+      return ''
+  }
+}
diff --git a/src/lib/codeSamples/generateCodeSampleCurl.ts b/src/lib/codeSamples/generateCodeSampleCurl.ts
new file mode 100644
index 00000000..85044f6c
--- /dev/null
+++ b/src/lib/codeSamples/generateCodeSampleCurl.ts
@@ -0,0 +1,13 @@
+import fetchToCurl from '../fetchToCurl'
+import { formatJson } from '../formatJson'
+import type { OARequest } from './request'
+
+export function generateCodeSampleCurl(request: OARequest) {
+  return fetchToCurl({
+    method: request.method.toUpperCase(),
+    url: request.url,
+    headers: request.headers,
+    body: request.body ? formatJson(request.body) : null,
+    query: request.query,
+  })
+}
diff --git a/src/lib/codeSamples/generateCodeSampleJavaScript.ts b/src/lib/codeSamples/generateCodeSampleJavaScript.ts
new file mode 100644
index 00000000..7f8343c4
--- /dev/null
+++ b/src/lib/codeSamples/generateCodeSampleJavaScript.ts
@@ -0,0 +1,31 @@
+import type { OARequest } from './request'
+
+export function generateCodeSampleJavaScript(request: OARequest) {
+  const queryString = Object.keys(request.query ?? {}).length
+    ? `?${new URLSearchParams(request.query).toString()}`
+    : ''
+
+  const jsFetchOptions = Object.fromEntries(
+    Object.entries({
+      method: request.method !== 'GET' ? request.method : undefined,
+      headers: Object.keys(request.headers ?? {}).length ? 'REPLACE_HEADERS' : undefined,
+      body: request.body ? 'REPLACE_BODY' : undefined,
+    })
+      .filter(([_, v]) => v !== undefined) // Filter undefined values.
+    ,
+  )
+
+  const optionsString = JSON.stringify(jsFetchOptions)
+    .replace(/"([^"]+)":/g, '$1:') // Remove quotes from keys.
+    .replace(/"/g, '\'') // Replace double quotes with single quotes.
+    .replace(/REPLACE_BODY/, JSON.stringify(request.body))
+    .replace(
+      /'REPLACE_HEADERS'/,
+      JSON.stringify(request.headers ?? {})
+        .replace(/"/g, '\''),
+    )
+
+  return `fetch('${request.url}${queryString}'${Object.keys(jsFetchOptions).length ? `, ${optionsString}` : ''})
+  .then(response => response.json())
+  .then(data => console.log(data));`
+}
diff --git a/src/lib/codeSamples/generateCodeSamplePhp.ts b/src/lib/codeSamples/generateCodeSamplePhp.ts
new file mode 100644
index 00000000..42ab4085
--- /dev/null
+++ b/src/lib/codeSamples/generateCodeSamplePhp.ts
@@ -0,0 +1,50 @@
+import type { OARequest } from './request'
+
+export function generateCodeSamplePhp({ url, method, headers, body, query }: OARequest): string {
+  let phpCode = `<?php\n`
+
+  phpCode += `$url = '${url}';\n`
+
+  phpCode += `$method = '${method}';\n`
+
+  if (Object.keys(headers).length > 0) {
+    phpCode += `$headers = [\n`
+    for (const [key, value] of Object.entries(headers)) {
+      phpCode += `    '${key}' => '${value}',\n`
+    }
+    phpCode += `];\n`
+  }
+
+  if (Object.keys(query).length > 0) {
+    phpCode += `$query = http_build_query([\n`
+    for (const [key, value] of Object.entries(query)) {
+      phpCode += `    '${key}' => '${value}',\n`
+    }
+    phpCode += `]);\n`
+  }
+
+  if (body) {
+    phpCode += `$body = json_encode(${JSON.stringify(body)});\n`
+  }
+
+  phpCode += `\n$ch = curl_init();\n`
+  phpCode += `curl_setopt($ch, CURLOPT_URL, $url${Object.keys(query).length ? ` . '?' . $query` : ''});\n`
+  phpCode += `curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\n`
+  phpCode += `curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);\n`
+
+  if (Object.keys(headers).length > 0) {
+    phpCode += `curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);\n`
+  }
+
+  if (body) {
+    phpCode += `curl_setopt($ch, CURLOPT_POSTFIELDS, $body);\n`
+  }
+
+  phpCode += `\n$response = curl_exec($ch);\n`
+  phpCode += `curl_close($ch);\n`
+  phpCode += `\necho $response;\n`
+
+  phpCode += `?>`
+
+  return phpCode
+}
diff --git a/src/lib/codeSamples/generateCodeSamplePython.ts b/src/lib/codeSamples/generateCodeSamplePython.ts
new file mode 100644
index 00000000..2c9ff73c
--- /dev/null
+++ b/src/lib/codeSamples/generateCodeSamplePython.ts
@@ -0,0 +1,32 @@
+import type { OARequest } from './request'
+
+export function generateCodeSamplePython(request: OARequest): string {
+  const { url, method, headers, body, query } = request
+
+  let queryString
+  if (Object.keys(query ?? {}).length) {
+    queryString = `params = ${JSON.stringify(query, null, 4).replace(/"([^"]+)":/g, '\'$1\':').replace(/"/g, '\'')}`
+  }
+
+  let headersString
+  if (Object.keys(headers ?? {}).length) {
+    headersString = `headers = ${JSON.stringify(headers, null, 4).replace(/"([^"]+)":/g, '\'$1\':').replace(/"/g, '\'')}`
+  }
+
+  let bodyString
+  if (body) {
+    bodyString = `data = ${JSON.stringify(body, null, 4).replace(/"([^"]+)":/g, '\'$1\':').replace(/"/g, '\'')}`
+  }
+
+  return (`import requests
+
+url = '${url}'
+${queryString || ''}
+${headersString || ''}
+${bodyString || ''}
+
+response = requests.${method.toLowerCase()}(url${queryString ? ', params=params' : ''}${headersString ? ', headers=headers' : ''}${bodyString ? ', json=data' : ''})
+print(response.json())
+`)
+    .replace(/\n{2,}/g, '\n\n') // Remove extra newlines
+}
diff --git a/src/lib/codeSamples/request.ts b/src/lib/codeSamples/request.ts
new file mode 100644
index 00000000..afbe3b35
--- /dev/null
+++ b/src/lib/codeSamples/request.ts
@@ -0,0 +1,17 @@
+export interface IOARequest {
+  url: string
+  method: string
+  headers: Record<string, string>
+  body: any
+  query: Record<string, string>
+}
+
+export class OARequest {
+  constructor(
+    public url: string = '',
+    public method: string = 'GET',
+    public headers: Record<string, string> = {},
+    public body: any = null,
+    public query: Record<string, string> = {},
+  ) {}
+}
diff --git a/src/lib/fetchToCurl.ts b/src/lib/fetchToCurl.ts
index 84ed8164..1e8d3631 100644
--- a/src/lib/fetchToCurl.ts
+++ b/src/lib/fetchToCurl.ts
@@ -114,10 +114,11 @@ export const fetchToCurl = ({
   method,
   headers,
   body,
-}: { url: string, method: string, headers: any, body: any }): string => {
+  query,
+}: { url: string, method: string, headers: any, body: any, query: any }): string => {
   const headersArgument = generateHeadersArgument(headers)
 
-  let output = `curl ${generateMethodArgument(method)}'${url}'`
+  let output = `curl ${generateMethodArgument(method)}'${url}${Object.keys(query ?? {}).length ? `?${new URLSearchParams(query).toString()}` : ''}'`
 
   if (headersArgument.params) {
     output += ` \\\n${headersArgument.params}`
diff --git a/src/lib/generateCodeSamples.ts b/src/lib/generateCodeSamples.ts
deleted file mode 100644
index c1c777af..00000000
--- a/src/lib/generateCodeSamples.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export function generateCodeSamples(url: string, method: string) {
-  const jsFetchOptions = method !== 'GET' ? `, { method: "${method}" }` : ''
-
-  const phpCode = method === 'GET'
-    ? `file_get_contents("${url}");`
-    : `$ch = curl_init();
-curl_setopt($ch, CURLOPT_URL, "${url}");
-curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "${method}");
-curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
-$response = curl_exec($ch);
-curl_close($ch);
-echo $response;`
-
-  return {
-    curl: {
-      lang: 'bash',
-      label: 'cURL',
-      source: `curl -X ${method} ${url}`,
-    },
-    javascript: {
-      lang: 'javascript',
-      label: 'JavaScript',
-      source: `fetch("${url}"${jsFetchOptions})
-  .then(response => response.json())
-  .then(data => console.log(data));`,
-    },
-    php: {
-      lang: 'php',
-      label: 'PHP',
-      source: phpCode,
-    },
-    python: {
-      lang: 'python',
-      label: 'Python',
-      source: `import requests
-response = requests.${method.toLowerCase()}("${url}")
-print(response.json())`,
-    },
-  }
-}
diff --git a/test/lib/buildRequest.test.ts b/test/lib/buildRequest.test.ts
new file mode 100644
index 00000000..20cf5f38
--- /dev/null
+++ b/test/lib/buildRequest.test.ts
@@ -0,0 +1,194 @@
+import { describe, expect, it } from 'vitest'
+import { buildRequest } from '../../src/lib/codeSamples/buildRequest'
+
+describe('buildRequest', () => {
+  it('builds request with path, query, and header parameters', () => {
+    const request = buildRequest({
+      path: '/users/{userId}',
+      method: 'GET',
+      baseUrl: 'https://api.example.com',
+      parameters: [
+        { name: 'userId', in: 'path' },
+        { name: 'search', in: 'query' },
+        { name: 'Authorization', in: 'header' },
+      ],
+      authScheme: null,
+      body: null,
+      variables: {
+        userId: '123',
+        search: 'test',
+        Authorization: 'Bearer token',
+      },
+    })
+    expect(request.url).toBe('https://api.example.com/users/123')
+    expect(request.query.search).toBe('test')
+    expect(request.headers.authorization).toBe('Bearer token')
+  })
+
+  it('builds request with auth scheme', () => {
+    const request = buildRequest({
+      path: '/users',
+      method: 'GET',
+      baseUrl: 'https://api.example.com',
+      parameters: [],
+      authScheme: { type: 'http', scheme: 'bearer', value: 'token' },
+      body: null,
+      variables: {},
+    })
+    expect(request.headers.authorization).toBe('Bearer token')
+  })
+
+  it('builds request with body', () => {
+    const request = buildRequest({
+      path: '/users',
+      method: 'POST',
+      baseUrl: 'https://api.example.com',
+      parameters: [],
+      authScheme: null,
+      body: { name: 'John Doe' },
+      variables: {},
+    })
+    expect(request.body).toEqual({ name: 'John Doe' })
+  })
+
+  it('handles empty variables', () => {
+    const request = buildRequest({
+      path: '/users',
+      method: 'GET',
+      baseUrl: 'https://api.example.com',
+      parameters: [],
+      authScheme: null,
+      body: null,
+      variables: {},
+    })
+    expect(request.url).toBe('https://api.example.com/users')
+  })
+
+  it('handles undefined variables', () => {
+    const request = buildRequest({
+      path: '/users/{userId}',
+      method: 'GET',
+      baseUrl: 'https://api.example.com',
+      parameters: [{ name: 'userId', in: 'path' }],
+      authScheme: null,
+      body: null,
+      variables: { userId: undefined },
+    })
+    expect(request.url).toBe('https://api.example.com/users/{userId}')
+  })
+
+  it('handles missing path parameters in variables', () => {
+    const request = buildRequest({
+      path: '/users/{userId}',
+      method: 'GET',
+      baseUrl: 'https://api.example.com',
+      parameters: [{ name: 'userId', in: 'path' }],
+      authScheme: null,
+      body: null,
+      variables: {},
+    })
+    expect(request.url).toBe('https://api.example.com/users/{userId}')
+  })
+
+  it('builds request with path, query, headers with examples', () => {
+    const request = buildRequest({
+      path: '/users/{userId}',
+      method: 'GET',
+      baseUrl: 'https://api.example.com',
+      parameters: [
+        { name: 'userId', in: 'path', example: '123' },
+        { name: 'search', in: 'query', example: 'test' },
+        { name: 'Authorization', in: 'header', example: 'Bearer YOUR_TOKEN' },
+      ],
+      authScheme: null,
+      body: null,
+      variables: {},
+    })
+    expect(request.url).toBe('https://api.example.com/users/123')
+    expect(request.query.search).toBe('test')
+    expect(request.headers.authorization).toBe('Bearer YOUR_TOKEN')
+  })
+
+  it('builds request with basic auth scheme', () => {
+    const request = buildRequest({
+      path: '/users',
+      method: 'GET',
+      baseUrl: 'https://api.example.com',
+      parameters: [],
+      authScheme: { type: 'http', scheme: 'basic', value: 'username:password' },
+      body: null,
+      variables: {},
+    })
+    expect(request.headers.authorization).toBe('Basic username:password')
+  })
+
+  it('builds request with apiKey auth scheme', () => {
+    const request = buildRequest({
+      path: '/users',
+      method: 'GET',
+      baseUrl: 'https://api.example.com',
+      parameters: [],
+      authScheme: { type: 'apiKey', name: 'x-api-key', in: 'header', value: 'key123' },
+      body: null,
+      variables: {},
+    })
+    expect(request.headers['x-api-key']).toBe('key123')
+  })
+
+  it('variables take precedence over examples', () => {
+    const request = buildRequest({
+      path: '/users/{userId}',
+      method: 'GET',
+      baseUrl: 'https://api.example.com',
+      parameters: [
+        { name: 'userId', in: 'path', example: '123' },
+        { name: 'search', in: 'query', example: 'test' },
+      ],
+      authScheme: null,
+      body: null,
+      variables: {
+        userId: '456',
+        search: 'production',
+      },
+    })
+    expect(request.url).toBe('https://api.example.com/users/456')
+    expect(request.query.search).toBe('production')
+  })
+
+  it('handles URL-unsafe characters in parameters', () => {
+    const request = buildRequest({
+      path: '/users/{userId}',
+      method: 'GET',
+      baseUrl: 'https://api.example.com',
+      parameters: [
+        { name: 'userId', in: 'path' },
+        { name: 'q', in: 'query' },
+      ],
+      authScheme: null,
+      body: null,
+      variables: {
+        userId: 'user/123',
+        q: 'test&special=true',
+      },
+    })
+    expect(request.url).toBe('https://api.example.com/users/user/123')
+    expect(request.query.q).toBe('test&special=true')
+  })
+
+  it('handles duplicate query parameters', () => {
+    const request = buildRequest({
+      path: '/users',
+      method: 'GET',
+      baseUrl: 'https://api.example.com',
+      parameters: [
+        { name: 'tag', in: 'query' },
+      ],
+      authScheme: null,
+      body: null,
+      variables: {
+        tag: ['urgent', 'important'],
+      },
+    })
+    expect(request.query.tag).toEqual(['urgent', 'important'])
+  })
+})
diff --git a/test/lib/generateCodeSamples.test.ts b/test/lib/generateCodeSamples.test.ts
index 88d41663..5308509f 100644
--- a/test/lib/generateCodeSamples.test.ts
+++ b/test/lib/generateCodeSamples.test.ts
@@ -1,52 +1,323 @@
 import { describe, expect, it } from 'vitest'
-import { generateCodeSamples } from '../../src/lib/generateCodeSamples'
-
-describe('generateCodeSamples', () => {
-  it('generates code samples for GET method', () => {
-    const url = 'https://api.example.com/path/testOperation'
-    const method = 'GET'
-    const samples = generateCodeSamples(url, method)
-    expect(samples.curl.source).toBe(`curl -X GET ${url}`)
-    expect(samples.javascript.source).toBe(`fetch("${url}")
+import { OARequest } from 'vitepress-openapi'
+import { generateCodeSampleJavaScript } from '../../src/lib/codeSamples/generateCodeSampleJavaScript'
+import { generateCodeSampleCurl } from '../../src/lib/codeSamples/generateCodeSampleCurl'
+import { generateCodeSamplePhp } from '../../src/lib/codeSamples/generateCodeSamplePhp'
+import { generateCodeSamplePython } from '../../src/lib/codeSamples/generateCodeSamplePython'
+
+describe('generateCodeSampleJavaScript', () => {
+  it('generates code sample for GET request without query, headers, or body', () => {
+    const request = new OARequest('https://api.example.com/resource')
+    const result = generateCodeSampleJavaScript(request)
+    expect(result).toBe(`fetch('https://api.example.com/resource')
+  .then(response => response.json())
+  .then(data => console.log(data));`)
+  })
+
+  it('generates code sample for POST request with body', () => {
+    const request = new OARequest('https://api.example.com/resource', 'POST', {}, { key: 'value' })
+    const result = generateCodeSampleJavaScript(request)
+    expect(result).toBe(`fetch('https://api.example.com/resource', {method:'POST',body:'{"key":"value"}'})
+  .then(response => response.json())
+  .then(data => console.log(data));`)
+  })
+
+  it('generates code sample for POST request with deep body', () => {
+    const request = new OARequest('https://api.example.com/resource', 'POST', {}, { key: { nested: 'value', nestedArray: [1, 2, { deep: 'value' }] } })
+    const result = generateCodeSampleJavaScript(request)
+    expect(result).toBe(`fetch('https://api.example.com/resource', {method:'POST',body:'{"key":{"nested":"value","nestedArray":[1,2,{"deep":"value"}]}}'})
+  .then(response => response.json())
+  .then(data => console.log(data));`)
+  })
+
+  it('generates code sample with headers', () => {
+    const request = new OARequest('https://api.example.com/resource', 'GET', { Authorization: 'Bearer token' })
+    const result = generateCodeSampleJavaScript(request)
+    expect(result).toBe(`fetch('https://api.example.com/resource', {headers:{'Authorization':'Bearer token'}})
   .then(response => response.json())
   .then(data => console.log(data));`)
-    expect(samples.php.source).toBe(`file_get_contents("${url}");`)
-    expect(samples.python.source).toBe(`import requests
-response = requests.get("${url}")
-print(response.json())`)
-  })
-
-  it('generates code samples for POST method', () => {
-    const url = 'https://api.example.com/path/testOperation'
-    const method = 'POST'
-    const samples = generateCodeSamples(url, method)
-    expect(samples.curl.source).toBe(`curl -X POST ${url}`)
-    expect(samples.javascript.source).toBe(`fetch("${url}", { method: "POST" })
+  })
+
+  it('generates code sample with query parameters', () => {
+    const request = new OARequest('https://api.example.com/resource', 'GET', {}, null, { search: 'query' })
+    const result = generateCodeSampleJavaScript(request)
+    expect(result).toBe(`fetch('https://api.example.com/resource?search=query')
   .then(response => response.json())
   .then(data => console.log(data));`)
-    expect(samples.php.source).toBe(`$ch = curl_init();
-curl_setopt($ch, CURLOPT_URL, "${url}");
-curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
+  })
+
+  it('generates code sample with all parameters', () => {
+    const request = new OARequest('https://api.example.com/resource', 'PUT', { 'Content-Type': 'application/json' }, { key: 'value' }, { search: 'query' })
+    const result = generateCodeSampleJavaScript(request)
+    expect(result).toBe(`fetch('https://api.example.com/resource?search=query', {method:'PUT',headers:{'Content-Type':'application/json'},body:'{"key":"value"}'})
+  .then(response => response.json())
+  .then(data => console.log(data));`)
+  })
+})
+
+describe('generateCodeSampleCurl', () => {
+  it('generates curl command for GET request', () => {
+    const request = new OARequest('https://api.example.com/resource')
+    const result = generateCodeSampleCurl(request)
+    expect(result).toBe(`curl -X GET \\
+'https://api.example.com/resource'`)
+  })
+
+  it('generates curl command for POST request with body', () => {
+    const request = new OARequest('https://api.example.com/resource', 'POST', {}, { key: 'value' })
+    const result = generateCodeSampleCurl(request)
+    expect(result).toBe(`curl -X POST \\
+'https://api.example.com/resource' \\
+ --data '{
+  "key": "value"
+}'`)
+  })
+
+  it('generates curl command for POST request with deep body', () => {
+    const request = new OARequest('https://api.example.com/resource', 'POST', {}, { key: { nested: 'value', nestedArray: [1, 2, { deep: 'value' }] } })
+    const result = generateCodeSampleCurl(request)
+    expect(result).toBe(`curl -X POST \\
+'https://api.example.com/resource' \\
+ --data '{
+  "key": {
+    "nested": "value",
+    "nestedArray": [
+      1,
+      2,
+      {
+        "deep": "value"
+      }
+    ]
+  }
+}'`)
+  })
+
+  it('generates curl command with headers', () => {
+    const request = new OARequest('https://api.example.com/resource', 'GET', { Authorization: 'Bearer token' })
+    const result = generateCodeSampleCurl(request)
+    expect(result).toBe(`curl -X GET \\
+'https://api.example.com/resource' \\
+ -H "Authorization: Bearer token"`)
+  })
+
+  it('generates curl command with query parameters', () => {
+    const request = new OARequest('https://api.example.com/resource', 'GET', {}, null, { search: 'query' })
+    const result = generateCodeSampleCurl(request)
+    expect(result).toBe(`curl -X GET \\
+'https://api.example.com/resource?search=query'`)
+  })
+
+  it('generates curl command with all parameters', () => {
+    const request = new OARequest('https://api.example.com/resource', 'PUT', { 'Content-Type': 'application/json' }, { key: 'value' }, { search: 'query' })
+    const result = generateCodeSampleCurl(request)
+    expect(result).toBe(`curl -X PUT \\
+'https://api.example.com/resource?search=query' \\
+ -H "Content-Type: application/json" \\
+ --data '{
+  "key": "value"
+}'`)
+  })
+})
+
+describe('generateCodeSamplePhp', () => {
+  it('generates PHP code for GET request', () => {
+    const request = new OARequest('https://api.example.com/resource')
+    const result = generateCodeSamplePhp(request)
+    expect(result).toBe(`<?php
+$url = 'https://api.example.com/resource';
+$method = 'GET';
+
+$ch = curl_init();
+curl_setopt($ch, CURLOPT_URL, $url);
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
+
 $response = curl_exec($ch);
 curl_close($ch);
-echo $response;`)
-    expect(samples.python.source).toBe(`import requests
-response = requests.post("${url}")
-print(response.json())`)
-  })
-
-  it('handles empty URL gracefully', () => {
-    const url = ''
-    const method = 'GET'
-    const samples = generateCodeSamples(url, method)
-    expect(samples.curl.source).toBe(`curl -X GET `)
-    expect(samples.javascript.source).toBe(`fetch("")
-  .then(response => response.json())
-  .then(data => console.log(data));`)
-    expect(samples.php.source).toBe(`file_get_contents("");`)
-    expect(samples.python.source).toBe(`import requests
-response = requests.get("")
-print(response.json())`)
+
+echo $response;
+?>`)
+  })
+
+  it('generates PHP code for POST request with body', () => {
+    const request = new OARequest('https://api.example.com/resource', 'POST', {}, { key: 'value' })
+    const result = generateCodeSamplePhp(request)
+    expect(result).toBe(`<?php
+$url = 'https://api.example.com/resource';
+$method = 'POST';
+$body = json_encode({"key":"value"});
+
+$ch = curl_init();
+curl_setopt($ch, CURLOPT_URL, $url);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
+curl_setopt($ch, CURLOPT_POSTFIELDS, $body);
+
+$response = curl_exec($ch);
+curl_close($ch);
+
+echo $response;
+?>`)
+  })
+
+  it('generates PHP code for POST request with deep body', () => {
+    const request = new OARequest('https://api.example.com/resource', 'POST', {}, { key: { nested: 'value', nestedArray: [1, 2, { deep: 'value' }] } })
+    const result = generateCodeSamplePhp(request)
+    expect(result).toBe(`<?php
+$url = 'https://api.example.com/resource';
+$method = 'POST';
+$body = json_encode({"key":{"nested":"value","nestedArray":[1,2,{"deep":"value"}]}});
+
+$ch = curl_init();
+curl_setopt($ch, CURLOPT_URL, $url);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
+curl_setopt($ch, CURLOPT_POSTFIELDS, $body);
+
+$response = curl_exec($ch);
+curl_close($ch);
+
+echo $response;
+?>`)
+  })
+
+  it('generates PHP code with headers', () => {
+    const request = new OARequest('https://api.example.com/resource', 'GET', { Authorization: 'Bearer token' })
+    const result = generateCodeSamplePhp(request)
+    expect(result).toBe(`<?php
+$url = 'https://api.example.com/resource';
+$method = 'GET';
+$headers = [
+    'Authorization' => 'Bearer token',
+];
+
+$ch = curl_init();
+curl_setopt($ch, CURLOPT_URL, $url);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
+curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
+
+$response = curl_exec($ch);
+curl_close($ch);
+
+echo $response;
+?>`)
+  })
+
+  it('generates PHP code with query parameters', () => {
+    const request = new OARequest('https://api.example.com/resource', 'GET', {}, null, { search: 'query' })
+    const result = generateCodeSamplePhp(request)
+    expect(result).toBe(`<?php
+$url = 'https://api.example.com/resource';
+$method = 'GET';
+$query = http_build_query([
+    'search' => 'query',
+]);
+
+$ch = curl_init();
+curl_setopt($ch, CURLOPT_URL, $url . '?' . $query);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
+
+$response = curl_exec($ch);
+curl_close($ch);
+
+echo $response;
+?>`)
+  })
+
+  it('generates PHP code with all parameters', () => {
+    const request = new OARequest('https://api.example.com/resource', 'PUT', { 'Content-Type': 'application/json' }, { key: 'value' }, { search: 'query' })
+    const result = generateCodeSamplePhp(request)
+    expect(result).toBe(`<?php
+$url = 'https://api.example.com/resource';
+$method = 'PUT';
+$headers = [
+    'Content-Type' => 'application/json',
+];
+$query = http_build_query([
+    'search' => 'query',
+]);
+$body = json_encode({"key":"value"});
+
+$ch = curl_init();
+curl_setopt($ch, CURLOPT_URL, $url . '?' . $query);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
+curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
+curl_setopt($ch, CURLOPT_POSTFIELDS, $body);
+
+$response = curl_exec($ch);
+curl_close($ch);
+
+echo $response;
+?>`)
+  })
+})
+
+describe('generateCodeSamplePython', () => {
+  it('generates Python code for GET request', () => {
+    const request = new OARequest('https://api.example.com/resource')
+    const result = generateCodeSamplePython(request)
+    expect(result).toBe(`import requests
+
+url = 'https://api.example.com/resource'
+
+response = requests.get(url)
+print(response.json())
+`)
+  })
+
+  it('generates Python code for POST request with body', () => {
+    const request = new OARequest('https://api.example.com/resource', 'POST', {}, { key: 'value' })
+    const result = generateCodeSamplePython(request)
+    expect(result).toBe(`import requests
+
+url = 'https://api.example.com/resource'
+
+data = {
+    'key': 'value'
+}
+
+response = requests.post(url, json=data)
+print(response.json())
+`)
+  })
+
+  it('generates Python code for POST request with deep body', () => {
+    const request = new OARequest('https://api.example.com/resource', 'POST', {}, { key: { nested: 'value', nestedArray: [1, 2, { deep: 'value' }] } })
+    const result = generateCodeSamplePython(request)
+    expect(result).toBe(`import requests
+
+url = 'https://api.example.com/resource'
+
+data = {
+    'key': {
+        'nested': 'value',
+        'nestedArray': [
+            1,
+            2,
+            {
+                'deep': 'value'
+            }
+        ]
+    }
+}
+
+response = requests.post(url, json=data)
+print(response.json())
+`)
+  })
+
+  it('generates Python code with headers', () => {
+    // TODO
+  })
+
+  it('generates Python code with query parameters', () => {
+    // TODO
+  })
+
+  it('generates Python code with all parameters', () => {
+    // TODO
   })
 })