feat: add React integration and OAuth authentication support

- Add React hooks and components for MCP integration
- Implement OAuth authentication with browser provider
- Add auth callback handling and types
- Update examples to use new React components
- Add utility functions for assertions
- Update package configurations and dependencies

Author: tonxxd

package.json

@@ -19,7 +19,6 @@
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "eslint": "^9.28.0",
-    "@eslint/js": "^9.28.0",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "husky": "^9.1.7",

packages/mcp-use/examples/client/react/index.tsx

@@ -1,12 +1,23 @@
 import React from 'react'
-import { createRoot } from 'react-dom/client'
+import ReactDOM from 'react-dom/client'
 import ReactExample from './react_example'
+import OAuthCallback from './oauth-callback'
 
-const container = document.getElementById('root')
-if (container) {
-  const root = createRoot(container)
-  root.render(<ReactExample />)
-}
-else {
-  console.error('Root element not found')
+// Simple router based on pathname
+function App() {
+  const path = window.location.pathname
+  
+  // Route to OAuth callback page
+  if (path === '/oauth/callback') {
+    return <OAuthCallback />
+  }
+  
+  // Default to main example
+  return <ReactExample />
 }
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

packages/mcp-use/examples/client/react/oauth-callback.tsx

@@ -0,0 +1,40 @@
+import { onMcpAuthorization } from 'mcp-use/react'
+import { useEffect } from 'react'
+
+/**
+ * OAuth callback page for MCP authentication
+ * This page handles the OAuth redirect and exchanges the authorization code for tokens
+ */
+export default function OAuthCallback() {
+  useEffect(() => {
+    // Handle the OAuth callback when the component mounts
+    onMcpAuthorization()
+  }, [])
+
+  return (
+    <div style={{ 
+      padding: '40px', 
+      fontFamily: 'Arial, sans-serif',
+      textAlign: 'center',
+      maxWidth: '600px',
+      margin: '0 auto',
+    }}>
+      <h1>🔐 Authenticating...</h1>
+      <p>Please wait while we complete your authentication.</p>
+      <p style={{ color: '#6c757d', fontSize: '0.9em' }}>
+        This window should close automatically once authentication is complete.
+      </p>
+      
+      <div style={{
+        marginTop: '30px',
+        padding: '20px',
+        backgroundColor: '#f8f9fa',
+        borderRadius: '8px',
+        fontSize: '0.9em',
+      }}>
+        <p>If this window doesn't close automatically, you can close it manually and return to the main application.</p>
+      </div>
+    </div>
+  )
+}
+