diff --git a/advanced/subpath/vercel.mdx b/advanced/subpath/vercel.mdx
index 85939577..e7bfd4e7 100644
--- a/advanced/subpath/vercel.mdx
+++ b/advanced/subpath/vercel.mdx
@@ -1,30 +1,30 @@
 ---
 title: "Vercel"
-description: "Host documentation at a /docs subpath using Vercel"
+description: "Host documentation at a subpath using Vercel"
 ---
 
-## vercel.json Configuration
+import { VercelJsonGenerator } from "/snippets/vercel-json-generator.mdx";
 
-To host your documentation at a custom subpath using Vercel, you need to add the
-following configuration to your `vercel.json` file.
+<Steps>
+  <Step title="Move your docs files">
+    Edit your file structure so that all your files are within a folder which is your custom subpath. So if you want to host your docs at `/docs` you would do the following:
 
-```json
-{
-  "rewrites": [
-    {
-      "source": "/docs",
-      "destination": "https://[subdomain].mintlify.dev/docs"
-    },
-    {
-      "source": "/docs/:match*",
-      "destination": "https://[subdomain].mintlify.dev/docs/:match*"
-    }
-  ]
-}
-```
+    ```
+    /docs
+      introduction.mdx
+      navigation.mdx
+    docs.json
+    ```
+  </Step>
+  <Step title="Configure your vercel.json">
+    In your main website add the following rewrites to your `vercel.json`.
+
+    <VercelJsonGenerator />
+  </Step>
+</Steps>
 
 <Note>
   For more information, you can also refer to Vercel's offical guide on
   rewrites: [Project Configuration:
   Rewrites](https://vercel.com/docs/projects/project-configuration#rewrites)
-</Note>
+</Note>
\ No newline at end of file
diff --git a/snippets/vercel-json-generator.mdx b/snippets/vercel-json-generator.mdx
new file mode 100644
index 00000000..e6c61100
--- /dev/null
+++ b/snippets/vercel-json-generator.mdx
@@ -0,0 +1,94 @@
+export const VercelJsonGenerator = () => {
+  const [subdomain, setSubdomain] = useState('[SUBDOMAIN]')
+  const [subdirectory, setSubdirectory] = useState('docs')
+
+  const vercelConfig = {
+    rewrites: [
+      {
+        source: "/api/request",
+        destination: `https://${subdomain}.mintlify.app/api/request`
+      },
+      {
+        source: `/${subdirectory}`,
+        destination: `https://${subdomain}.mintlify.app`
+      },
+      {
+        source: `/${subdirectory}/llms.txt`,
+        destination: `https://${subdomain}.mintlify.app/llms.txt`
+      },
+      {
+        source: `/${subdirectory}/llms-full.txt`,
+        destination: `https://${subdomain}.mintlify.app/llms-full.txt`
+      },
+      {
+        source: `/${subdirectory}/sitemap.xml`,
+        destination: `https://${subdomain}.mintlify.app/sitemap.xml`
+      },
+      {
+        source: `/${subdirectory}/robots.txt`,
+        destination: `https://${subdomain}.mintlify.app/robots.txt`
+      },
+      {
+        source: `/${subdirectory}/:path*`,
+        destination: `https://${subdomain}.mintlify.app/${subdirectory}/:path*`
+      },
+      {
+        source: "/mintlify-assets/:path+",
+        destination: `https://${subdomain}.mintlify.app/mintlify-assets/:path+`
+      }
+    ]
+  }
+
+  const copyToClipboard = () => {
+    navigator.clipboard
+      .writeText(JSON.stringify(vercelConfig, null, 2))
+      .then(() => {
+        console.log('Copied config to clipboard!')
+      })
+      .catch((err) => {
+        console.error("Failed to copy: ", err)
+      })
+  }
+
+  return (
+    <div className="p-4 border dark:border-white/10 rounded-2xl not-prose space-y-4">
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm text-zinc-950/70 dark:text-white/70 mb-1">
+            Subdomain
+          </label>
+          <input
+            type="text"
+            value={subdomain}
+            onChange={(e) => setSubdomain(e.target.value)}
+            placeholder="your-subdomain"
+            className="w-full p-1 text-sm rounded border dark:border-white/10 bg-transparent"
+          />
+        </div>
+        <div>
+          <label className="block text-sm text-zinc-950/70 dark:text-white/70 mb-1">
+            Subdirectory
+          </label>
+          <input
+            type="text"
+            value={subdirectory}
+            onChange={(e) => setSubdirectory(e.target.value)}
+            placeholder="docs"
+            className="w-full p-1 text-sm rounded border dark:border-white/10 bg-transparent"
+          />
+        </div>
+      </div>
+      <div className="relative">
+        <button
+          onClick={copyToClipboard}
+          className="absolute top-2 right-2 px-2 py-1 text-sm border dark:border-white/10 rounded hover:bg-zinc-950/5 dark:hover:bg-white/5 transition-colors bg-white"
+        >
+          Copy to Clipboard
+        </button>
+        <pre className="bg-zinc-950/5 dark:bg-white/5 p-4 rounded-lg overflow-auto text-xs">
+          <code>{JSON.stringify(vercelConfig, null, 2)}</code>
+        </pre>
+      </div>
+    </div>
+  )
+}