Implement OAuth callback support for MCP servers

- Add react-router-dom dependency for routing support
- Create OAuthCallback component with animated background and loading spinner
- Add routing to App.tsx with /oauth/callback route
- Match styling with main app using animated-bg-container
- Use onMcpAuthorization from use-mcp library for OAuth handling
- Library already handles multiple server differentiation via state parameter
- Each MCP server gets unique OAuth flow identified by state containing server URL
- Clean up unused imports and variables in McpServerModal

Author: geelen

examples/chat-ui/package.json

@@ -26,6 +26,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.6.2",
     "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
     "tailwindcss": "^4.0.14",

examples/chat-ui/pnpm-lock.yaml

@@ -1,10 +1,15 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import ChatApp from "./components/ChatApp";
+import { OAuthCallback } from "./components/OAuthCallback";
 
 function App() {
   return (
-    <>
-      <ChatApp />
-    </>
+    <Router>
+      <Routes>
+        <Route path="/oauth/callback" element={<OAuthCallback />} />
+        <Route path="/" element={<ChatApp />} />
+      </Routes>
+    </Router>
   );
 }
 

examples/chat-ui/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import { X, Info, Settings, Plus, Trash2, Power, PowerOff } from 'lucide-react'
 import { useMcp, type Tool } from 'use-mcp/react'
 
@@ -63,7 +63,7 @@ const McpServerModal: React.FC<McpServerModalProps> = ({
     const stored = localStorage.getItem('mcpServerToolCounts')
     return stored ? JSON.parse(stored) : {}
   })
-  const logRef = useRef<HTMLDivElement>(null)
+  // const logRef = useRef<HTMLDivElement>(null) // Removed for now as debug logs not implemented in multi-server version
 
   // Save servers to localStorage whenever they change
   useEffect(() => {

examples/chat-ui/src/components/McpServerModal.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+import { onMcpAuthorization } from 'use-mcp'
+
+export function OAuthCallback() {
+  useEffect(() => {
+    onMcpAuthorization()
+  }, [])
+
+  return (
+    <div className="min-h-screen animated-bg-container flex items-center justify-center p-4">
+      <div className="bg-white rounded-lg shadow-xl p-8 text-center max-w-md w-full">
+        <h1 className="text-2xl font-bold text-zinc-900 mb-4">Authenticating...</h1>
+        <p className="text-zinc-600 mb-2">Please wait while we complete your authentication.</p>
+        <p className="text-sm text-zinc-500">This window should close automatically.</p>
+        
+        <div className="mt-6">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+        </div>
+      </div>
+    </div>
+  )
+}