mintlify__docs/snippets/vercel-json-generator.mdx

export const VercelJsonGenerator = () => {
  const [subdomain, setSubdomain] = useState('[SUBDOMAIN]')
  const [subpath, setSubpath] = useState('[SUBPATH]')

  const cleanSubpath = subpath.trim().replace(/^\/+|\/+$/g, '') || '[SUBPATH]'

  const vercelConfig = {
    rewrites: [
      {
        source: "/_mintlify/:path*",
        destination: `https://${subdomain}.mintlify.site/_mintlify/:path*`
      },
      {
        source: "/api/request",
        destination: `https://${subdomain}.mintlify.site/_mintlify/api/request`
      },
      {
        source: `/${cleanSubpath}`,
        destination: `https://${subdomain}.mintlify.site/${cleanSubpath}`
      },
      {
        source: `/${cleanSubpath}/:path*`,
        destination: `https://${subdomain}.mintlify.site/${cleanSubpath}/:path*`
      },
      {
        source: "/mintlify-assets/:path+",
        destination: `https://${subdomain}.mintlify.site/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">
            Subpath
          </label>
          <input
            type="text"
            value={subpath}
            onChange={(e) => setSubpath(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 p-2 rounded-lg transition-all duration-200 group"
        >
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 dark:text-white/60 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-white/60 transition-colors">
            <path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
            <path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
          </svg>
          <span className="absolute top-9 left-1/2 transform -translate-x-1/2 bg-primary text-white text-xs px-1.5 py-0.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
            Copy
          </span>
        </button>
        <pre className="p-4 rounded-lg overflow-auto text-xs border dark:border-white/10">
          <code>{JSON.stringify(vercelConfig, null, 2)}</code>
        </pre>
      </div>
    </div>
  )
}