feat: the frontend part of mcp (#22131)

Co-authored-by: jZonG <jzongcode@gmail.com>
Co-authored-by: Novice <novice12185727@gmail.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>

web/hooks/use-oauth.ts

@@ -0,0 +1,36 @@
+'use client'
+import { useEffect } from 'react'
+
+export const useOAuthCallback = () => {
+  useEffect(() => {
+    if (window.opener) {
+      window.opener.postMessage({
+        type: 'oauth_callback',
+      }, '*')
+      window.close()
+    }
+  }, [])
+}
+
+export const openOAuthPopup = (url: string, callback: () => void) => {
+  const width = 600
+  const height = 600
+  const left = window.screenX + (window.outerWidth - width) / 2
+  const top = window.screenY + (window.outerHeight - height) / 2
+
+  const popup = window.open(
+    url,
+    'OAuth',
+    `width=${width},height=${height},left=${left},top=${top},scrollbars=yes`,
+  )
+
+  const handleMessage = (event: MessageEvent) => {
+    if (event.data?.type === 'oauth_callback') {
+      window.removeEventListener('message', handleMessage)
+      callback()
+    }
+  }
+
+  window.addEventListener('message', handleMessage)
+  return popup
+}