Implement MCP OAuth authentication system

- Add MCPOAuthProvider implementing OAuthClientProvider interface
- Implement popup-based OAuth flow with message passing
- Add automatic connection retry after OAuth completion
- Support client registration persistence per server URL
- Add proper error suppression for expected OAuth UnauthorizedErrors
- Create comprehensive OAuth implementation documentation
- Clean up debug logging with emoji status indicators

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

docs/mcp_oauth_implementation.md

@@ -0,0 +1,135 @@
+# MCP OAuth Implementation Guide
+
+## Overview
+
+This document explains how OAuth authentication is implemented for MCP servers in our client, including lessons learned from early implementation attempts.
+
+## Final Working Implementation
+
+### Architecture
+
+The OAuth implementation uses the MCP TypeScript SDK's built-in auth system with a custom `OAuthClientProvider` that handles browser-based popup flows:
+
+```typescript
+class MCPOAuthProvider implements OAuthClientProvider {
+  // Implements all required OAuth provider methods
+  // Handles popup-based authorization flow
+  // Manages client registration and token storage
+}
+```
+
+### Key Components
+
+1. **MCPOAuthProvider**: Implements the SDK's `OAuthClientProvider` interface
+2. **Popup-based authorization**: Opens OAuth server in popup window
+3. **Message passing**: Popup communicates auth code back to parent window
+4. **Automatic retry**: Connection automatically retries after OAuth completion
+
+### OAuth Flow
+
+1. **Initial connection attempt**: Fails with `UnauthorizedError` (expected)
+2. **SDK triggers OAuth**: Calls `redirectToAuthorization()` which opens popup
+3. **User authorizes**: Completes OAuth flow in popup window
+4. **Authorization code received**: Popup sends auth code to parent via `postMessage`
+5. **Token exchange**: OAuth provider immediately calls SDK's `auth()` with the code
+6. **Tokens stored**: SDK calls `saveTokens()` with access/refresh tokens
+7. **Connection retry**: OAuth completion triggers automatic connection retry
+8. **Success**: Connection succeeds with valid tokens
+
+## What We Got Wrong Initially
+
+### Mistake 1: Manual OAuth Flow Management
+
+**Wrong approach**: We initially tried to manually manage the entire OAuth flow outside of the SDK:
+- Manually opening authorization URLs
+- Manually exchanging authorization codes for tokens
+- Trying to inject tokens into the transport after the fact
+
+**Why it was wrong**: The MCP SDK already has a complete OAuth implementation. Fighting against it created timing issues and complexity.
+
+**Correct approach**: Implement the `OAuthClientProvider` interface and let the SDK handle the OAuth flow orchestration.
+
+### Mistake 2: Waiting for Authorization in `redirectToAuthorization`
+
+**Wrong approach**: Making `redirectToAuthorization()` wait for the popup to complete:
+```typescript
+async redirectToAuthorization(authorizationUrl: URL): Promise<void> {
+  const popup = window.open(authorizationUrl);
+  // Wait for popup to complete and return auth code
+  return new Promise((resolve, reject) => {
+    // Listen for popup messages...
+  });
+}
+```
+
+**Why it was wrong**: The SDK's `auth()` function expects `redirectToAuthorization()` to return immediately after opening the authorization URL. The authorization code processing happens in a separate call.
+
+**Correct approach**: Return immediately from `redirectToAuthorization()` and process the authorization code asynchronously when received from the popup.
+
+### Mistake 3: Not Understanding the Two-Step OAuth Flow
+
+**Wrong approach**: Thinking the SDK's `auth()` function is called once and handles everything.
+
+**Why it was wrong**: The OAuth flow actually involves multiple interactions:
+1. First call to `auth()`: Starts authorization flow, calls `redirectToAuthorization()`
+2. User completes authorization in popup
+3. Authorization code received via popup message
+4. Second call to `auth()` with the authorization code: Exchanges code for tokens
+
+**Correct approach**: Handle authorization code reception asynchronously and immediately call `auth()` again with the code to complete token exchange.
+
+### Mistake 4: Wrong Error Handling Strategy
+
+**Wrong approach**: Treating initial `UnauthorizedError` as a real failure and showing error alerts.
+
+**Why it was wrong**: For OAuth servers, the initial connection attempt is *expected* to fail with `UnauthorizedError`. This triggers the OAuth flow.
+
+**Correct approach**: Suppress `UnauthorizedError` for OAuth servers and let the OAuth flow handle authentication automatically.
+
+## Key Implementation Details
+
+### Client Registration Per Server
+
+Client information is stored per server URL (not per connection) to avoid unnecessary re-registrations:
+```typescript
+// Generate consistent key for server
+private getServerKey(): string {
+  const url = new URL(this.serverUrl);
+  return btoa(`${url.hostname}${url.pathname}`).replace(/[+/=]/g, '');
+}
+```
+
+### Predictable Redirect URI
+
+Uses a single redirect URI with state-based session identification:
+- Redirect URI: `${origin}/oauth/mcp/callback`
+- State parameter: `${connectionId}.${randomString}`
+
+This avoids the "unregistered redirect_uri" error that occurs with dynamic URIs.
+
+### Automatic Connection Retry
+
+After OAuth completion, the connection automatically retries:
+```typescript
+private async handleOAuthSuccess(): Promise<void> {
+  // Reset connection state and retry with new tokens
+  this.connection.status = 'connecting';
+  await this.connect();
+}
+```
+
+## Best Practices Learned
+
+1. **Follow the SDK patterns**: Don't fight against the SDK's built-in OAuth system
+2. **Handle expected failures gracefully**: OAuth servers will return 401 on first connection
+3. **Use consistent redirect URIs**: Avoid dynamic URIs that require pre-registration
+4. **Store client info per server**: Minimize unnecessary client registrations
+5. **Process auth codes immediately**: Don't store them for later processing
+6. **Implement proper error suppression**: Distinguish between expected OAuth errors and real failures
+
+## Future Improvements
+
+- Add token refresh handling for long-lived connections
+- Implement proper error recovery for failed OAuth flows
+- Add support for different OAuth grant types (currently only authorization code)
+- Consider adding OAuth scope configuration options

docs/mcp_provider_interface.md

@@ -0,0 +1,305 @@
+# MCP Provider Interface Design
+
+> **⚠️ DRAFT/TENTATIVE DESIGN**  
+> This document outlines a proposed design for the MCP provider system. The design is subject to iteration and refinement during implementation.
+
+## Overview
+
+The MCP Provider system manages connections to multiple MCP servers, providing a unified interface for tool calling, resource access, and connection management. It follows similar architectural patterns to the InferenceProvider system.
+
+## Goals
+
+1. **Multi-Server Support**: Connect to multiple MCP servers simultaneously
+2. **Transport Abstraction**: Support SSE and Streamable HTTP transports with automatic fallback
+3. **Tool Aggregation**: Combine tools from all servers with conflict resolution
+4. **Connection Management**: Handle connection lifecycle, reconnection, and error recovery
+5. **OAuth Integration**: Support MCP server OAuth flows with proper callback routing
+6. **Debug Visibility**: Comprehensive debugging interface for development and troubleshooting
+
+## Core Interfaces
+
+### MCPConnection
+```typescript
+interface MCPConnection {
+  id: string;                    // Unique connection identifier
+  name: string;                  // User-provided server name
+  url: string;                   // Server URL
+  status: 'connecting' | 'connected' | 'failed' | 'disconnected';
+  client?: Client;               // MCP SDK client instance
+  transport: 'sse' | 'streamable-http';
+  authType: 'none' | 'oauth';
+  
+  // Available capabilities
+  tools: Tool[];                 // Tools with name-prefixed identifiers
+  resources?: Resource[];        // Available resources
+  prompts?: Prompt[];           // Available prompts
+  
+  // Connection metadata
+  error?: string;               // Last error message
+  lastConnected?: Date;         // Last successful connection
+  capabilities?: ServerCapabilities; // Server-advertised capabilities
+  
+  // Debug information
+  messageTrace?: MCPMessage[];  // Recent message exchange history
+  connectionAttempts: number;   // Number of reconnection attempts
+}
+```
+
+### MCPServerConfig
+```typescript
+interface MCPServerConfig {
+  name: string;                 // User-provided display name
+  url: string;                  // Server endpoint URL
+  transport?: 'sse' | 'streamable-http' | 'auto'; // Default: auto-detect
+  authType?: 'none' | 'oauth'; // Default: none
+  oauthConfig?: {
+    // OAuth configuration if needed
+    clientId?: string;
+  };
+  autoReconnect?: boolean;      // Default: true
+  maxReconnectAttempts?: number; // Default: 5
+}
+```
+
+### MCPContextValue
+```typescript
+interface MCPContextValue {
+  // Connection state
+  connections: MCPConnection[];
+  isLoading: boolean;
+  error: string | null;
+  
+  // Connection management
+  addMcpServer: (config: MCPServerConfig) => Promise<string>; // Returns connection ID
+  removeMcpServer: (connectionId: string) => void;
+  reconnectServer: (connectionId: string) => Promise<void>;
+  
+  // Tool access (explicit server routing)
+  getAllTools: () => Tool[];                    // All tools with prefixed names
+  getToolsForServer: (connectionId: string) => Tool[];
+  callTool: (connectionId: string, toolName: string, args: any) => Promise<any>;
+  
+  // Resource access
+  getAllResources: () => Resource[];
+  getResourcesForServer: (connectionId: string) => Resource[];
+  
+  // Status and debugging
+  getConnectedServers: () => MCPConnection[];
+  getServerStatus: (connectionId: string) => MCPConnection['status'];
+  getConnectionById: (connectionId: string) => MCPConnection | undefined;
+  getMessageTrace: (connectionId: string) => MCPMessage[];
+}
+```
+
+## Tool Name Resolution
+
+### Prefixing Strategy
+Tools from each server are prefixed with the user-provided server name to avoid conflicts:
+
+```typescript
+// Original tool from weather server: "get_weather"
+// Prefixed tool: "weather_server.get_weather"
+
+// Original tool from calendar server: "get_events" 
+// Prefixed tool: "calendar.get_events"
+```
+
+### Tool Discovery and Registration
+```typescript
+class MCPConnection {
+  private async discoverTools(): Promise<Tool[]> {
+    const tools = await this.client.listTools();
+    return tools.map(tool => ({
+      ...tool,
+      function: {
+        ...tool.function,
+        name: `${this.name}.${tool.function.name}`, // Add prefix
+        description: `[${this.name}] ${tool.function.description}`, // Add server context
+      }
+    }));
+  }
+}
+```
+
+## Connection Management
+
+### Connection Lifecycle
+```typescript
+class MCPConnection {
+  async connect(): Promise<void> {
+    this.status = 'connecting';
+    
+    try {
+      // 1. Try StreamableHTTP first
+      if (this.transport === 'auto' || this.transport === 'streamable-http') {
+        await this.tryStreamableHttp();
+      }
+      
+      // 2. Fallback to SSE if needed
+      if (this.status !== 'connected' && (this.transport === 'auto' || this.transport === 'sse')) {
+        await this.trySSE();
+      }
+      
+      // 3. Initialize capabilities
+      await this.initializeCapabilities();
+      
+      this.status = 'connected';
+      this.lastConnected = new Date();
+      this.connectionAttempts = 0;
+      
+    } catch (error) {
+      this.status = 'failed';
+      this.error = error.message;
+      this.connectionAttempts++;
+      
+      if (this.autoReconnect && this.connectionAttempts < this.maxReconnectAttempts) {
+        setTimeout(() => this.connect(), this.getBackoffDelay());
+      }
+    }
+  }
+}
+```
+
+### Auto-Reconnection Strategy
+- Exponential backoff: 1s, 2s, 4s, 8s, 16s
+- Maximum 5 attempts by default
+- Reset attempt counter on successful connection
+- User can manually retry after max attempts reached
+
+## React Integration
+
+### MCPProvider Context
+```typescript
+export function MCPProvider({ children }: { children: ReactNode }) {
+  const [connections, setConnections] = useState<MCPConnection[]>([]);
+  const [connectionStates, setConnectionStates] = useState<Record<string, any>>({});
+  
+  // Load persisted connections from localStorage on mount
+  useEffect(() => {
+    loadPersistedConnections();
+  }, []);
+  
+  // Auto-save connections to localStorage
+  useEffect(() => {
+    persistConnections(connections);
+  }, [connections]);
+  
+  // ... implementation
+}
+```
+
+### Hook Usage
+```typescript
+const {
+  connections,
+  addMcpServer,
+  callTool,
+  getAllTools
+} = useMCP();
+
+// Add a server
+const connectionId = await addMcpServer({
+  name: 'Weather Service',
+  url: 'https://weather.mcp.example.com',
+  transport: 'auto'
+});
+
+// Call a tool
+const result = await callTool(connectionId, 'get_weather', { 
+  location: 'San Francisco' 
+});
+```
+
+## Authentication & OAuth
+
+### OAuth Flow for MCP Servers
+Following the established callback routing pattern:
+- OAuth callbacks: `/oauth/mcp/{connectionId}/callback`
+- Server-specific state management
+- Automatic token refresh handling
+
+```typescript
+interface MCPOAuthProvider {
+  authenticate(connectionId: string): Promise<void>;
+  refreshToken(connectionId: string): Promise<void>;
+  getAuthStatus(connectionId: string): 'authenticated' | 'pending' | 'failed';
+}
+```
+
+## Error Handling & Debugging
+
+### Message Tracing
+```typescript
+interface MCPMessage {
+  timestamp: Date;
+  direction: 'sent' | 'received';
+  type: 'request' | 'response' | 'notification';
+  method?: string;
+  id?: string | number;
+  content: any;
+  error?: any;
+}
+```
+
+### Connection Debugging
+- Real-time connection status monitoring
+- Message trace viewer with filtering
+- Transport fallback information
+- OAuth flow status tracking
+- Tool discovery and registration logs
+
+## Implementation Strategy
+
+### Phase 1: Core Connection Management ⏳
+1. Basic MCPConnection class with transport support
+2. MCPProvider React context with connection lifecycle
+3. Tool discovery and name prefixing
+4. Basic error handling and reconnection
+
+### Phase 2: Debug Interface ⏳
+1. Connection status dashboard
+2. Tool listing and testing interface
+3. Message trace viewer
+4. Manual connection controls
+
+### Phase 3: OAuth & Advanced Features
+1. OAuth integration for authenticated servers
+2. Resource and prompt support
+3. Enhanced debugging and monitoring
+4. Performance optimizations
+
+### Phase 4: Integration
+1. Integration with agent loop and inference provider
+2. Unified tool calling across test tools and MCP tools
+3. Advanced error recovery and resilience
+
+## Security Considerations
+
+1. **URL Validation**: Validate MCP server URLs to prevent malicious redirects
+2. **OAuth Security**: Proper PKCE implementation for OAuth flows
+3. **Message Validation**: Validate all MCP messages against protocol schema
+4. **Storage Security**: Secure storage of OAuth tokens and sensitive config
+5. **CORS Handling**: Proper CORS error detection and user guidance
+
+## Testing Strategy
+
+### Unit Tests
+- MCPConnection class functionality
+- Tool name prefixing and conflict resolution
+- Connection lifecycle and error handling
+- OAuth flow simulation
+
+### Integration Tests
+- Real MCP server connections (with test servers)
+- Transport fallback scenarios
+- Multi-server tool calling
+- OAuth authentication flows
+
+## Future Enhancements
+
+1. **Advanced Tool Routing**: Smart tool routing based on capability matching
+2. **Connection Pooling**: Efficient connection reuse and management
+3. **Caching**: Tool schema and response caching
+4. **Monitoring**: Connection health monitoring and alerts
+5. **Batch Operations**: Bulk tool calling and resource access
+6. **Custom Transports**: Support for WebSocket and custom transport protocols

src/App.tsx

@@ -1,30 +1,63 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { InferenceProvider } from '@/contexts/InferenceContext'
+import { MCPProvider } from '@/contexts/MCPContext'
 import { InferenceTest } from '@/components/InferenceTest'
+import { MCPTest } from '@/components/MCPTest'
 import { OAuthCallback } from '@/components/OAuthCallback'
 
 function App() {
   // Simple routing based on pathname
   const pathname = window.location.pathname;
   const isInferenceOAuthCallback = pathname === '/oauth/inference/callback';
-  const isMcpOAuthCallback = pathname.startsWith('/oauth/mcp/');
+  const isMcpOAuthCallback = pathname === '/oauth/mcp/callback';
 
   if (isInferenceOAuthCallback) {
     return <OAuthCallback type="inference" />;
   }
 
   if (isMcpOAuthCallback) {
-    // Extract server identifier from path like /oauth/mcp/server123/callback
+    return <OAuthCallback type="mcp" />;
-    const serverMatch = pathname.match(/^\/oauth\/mcp\/([^\/]+)\/callback$/);
-    const serverId = serverMatch?.[1];
-    return <OAuthCallback type="mcp" serverId={serverId} />;
   }
 
+  const [activeTab, setActiveTab] = useState<'inference' | 'mcp'>('inference');
+
   return (
     <InferenceProvider>
-      <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
+      <MCPProvider>
-        <InferenceTest />
+        <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
-      </div>
+          {/* Tab Navigation */}
+          <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+            <div className="max-w-6xl mx-auto px-6">
+              <div className="flex space-x-8">
+                <button
+                  onClick={() => setActiveTab('inference')}
+                  className={`py-4 px-1 border-b-2 font-medium text-sm ${
+                    activeTab === 'inference'
+                      ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                      : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+                  }`}
+                >
+                  Inference Provider Test
+                </button>
+                <button
+                  onClick={() => setActiveTab('mcp')}
+                  className={`py-4 px-1 border-b-2 font-medium text-sm ${
+                    activeTab === 'mcp'
+                      ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                      : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+                  }`}
+                >
+                  MCP Provider Test
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Tab Content */}
+          {activeTab === 'inference' && <InferenceTest />}
+          {activeTab === 'mcp' && <MCPTest />}
+        </div>
+      </MCPProvider>
     </InferenceProvider>
   )
 }

src/components/MCPTest.tsx

@@ -0,0 +1,430 @@
+// Test UI for MCP provider functionality
+
+import React, { useState, useCallback } from 'react';
+import { useMCP } from '@/contexts/MCPContext';
+import type { MCPServerConfig } from '@/types/mcp';
+
+export function MCPTest() {
+  const {
+    connections,
+    isLoading,
+    error,
+    addMcpServer,
+    removeMcpServer,
+    reconnectServer,
+    getAllTools,
+    getToolsForServer,
+    callTool,
+    getAllResources,
+    getConnectedServers,
+  } = useMCP();
+
+  const [newServerName, setNewServerName] = useState('');
+  const [newServerUrl, setNewServerUrl] = useState('');
+  const [selectedConnectionId, setSelectedConnectionId] = useState<string>('');
+  const [selectedToolName, setSelectedToolName] = useState('');
+  const [toolArgs, setToolArgs] = useState('{}');
+  const [toolResult, setToolResult] = useState<string>('');
+
+  const handleAddServer = useCallback(async () => {
+    if (!newServerName.trim() || !newServerUrl.trim()) {
+      alert('Please enter both server name and URL');
+      return;
+    }
+
+    const config: MCPServerConfig = {
+      name: newServerName.trim(),
+      url: newServerUrl.trim(),
+      transport: 'auto',
+      authType: 'none',
+      autoReconnect: false, // Disable auto-reconnect for now to prevent loops
+    };
+
+    try {
+      await addMcpServer(config);
+      setNewServerName('');
+      setNewServerUrl('');
+    } catch (error) {
+      console.error('Failed to add server:', error);
+      alert(`Failed to add server: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }, [newServerName, newServerUrl, addMcpServer]);
+
+  const handleAddServerWithOAuth = useCallback(async () => {
+    if (!newServerName.trim() || !newServerUrl.trim()) {
+      alert('Please enter both server name and URL');
+      return;
+    }
+
+    const config: MCPServerConfig = {
+      name: newServerName.trim(),
+      url: newServerUrl.trim(),
+      transport: 'auto',
+      authType: 'oauth',
+      autoReconnect: false,
+    };
+
+    try {
+      await addMcpServer(config);
+      setNewServerName('');
+      setNewServerUrl('');
+    } catch (error) {
+      console.error('Failed to add server with OAuth:', error);
+      alert(`Failed to add server with OAuth: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }, [newServerName, newServerUrl, addMcpServer]);
+
+  const handleRemoveServer = useCallback((connectionId: string) => {
+    if (confirm('Are you sure you want to remove this server?')) {
+      removeMcpServer(connectionId);
+      if (selectedConnectionId === connectionId) {
+        setSelectedConnectionId('');
+      }
+    }
+  }, [removeMcpServer, selectedConnectionId]);
+
+  const handleReconnectServer = useCallback(async (connectionId: string) => {
+    try {
+      await reconnectServer(connectionId);
+    } catch (error) {
+      console.error('Failed to reconnect:', error);
+      alert(`Failed to reconnect: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }, [reconnectServer]);
+
+  const handleCallTool = useCallback(async () => {
+    if (!selectedConnectionId || !selectedToolName) {
+      alert('Please select a connection and tool');
+      return;
+    }
+
+    try {
+      const args = JSON.parse(toolArgs);
+      const result = await callTool(selectedConnectionId, selectedToolName, args);
+      setToolResult(JSON.stringify(result, null, 2));
+    } catch (error) {
+      console.error('Tool call failed:', error);
+      const errorResult = {
+        error: error instanceof Error ? error.message : 'Unknown error',
+        details: error,
+      };
+      setToolResult(JSON.stringify(errorResult, null, 2));
+    }
+  }, [selectedConnectionId, selectedToolName, toolArgs, callTool]);
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'connected': return 'text-green-600 dark:text-green-400';
+      case 'connecting': return 'text-yellow-600 dark:text-yellow-400';
+      case 'failed': return 'text-red-600 dark:text-red-400';
+      case 'disconnected': return 'text-gray-600 dark:text-gray-400';
+      default: return 'text-gray-600 dark:text-gray-400';
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'connected': return '✅';
+      case 'connecting': return '🔄';
+      case 'failed': return '❌';
+      case 'disconnected': return '⚫';
+      default: return '❓';
+    }
+  };
+
+  const selectedConnection = connections.find(conn => conn.id === selectedConnectionId);
+  const selectedTools = selectedConnection ? getToolsForServer(selectedConnectionId) : [];
+  const allTools = getAllTools();
+  const allResources = getAllResources();
+  const connectedServers = getConnectedServers();
+
+  return (
+    <div className="max-w-6xl mx-auto p-6 space-y-6">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">
+          MCP Provider Test
+        </h1>
+
+        {/* Add Server Section */}
+        <div className="space-y-4 mb-6">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            Add MCP Server
+          </h2>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <input
+              type="text"
+              placeholder="Server name (e.g., 'Weather Service')"
+              className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+              value={newServerName}
+              onChange={(e) => setNewServerName(e.target.value)}
+            />
+            <input
+              type="url"
+              placeholder="Server URL (e.g., 'https://api.example.com/mcp')"
+              className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+              value={newServerUrl}
+              onChange={(e) => setNewServerUrl(e.target.value)}
+            />
+          </div>
+          
+          <div className="flex gap-4">
+            <button
+              onClick={handleAddServer}
+              disabled={isLoading}
+              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+            >
+              {isLoading ? 'Adding...' : 'Add Server (No Auth)'}
+            </button>
+            <button
+              onClick={handleAddServerWithOAuth}
+              disabled={isLoading}
+              className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50"
+            >
+              {isLoading ? 'Adding...' : 'Add Server (OAuth)'}
+            </button>
+          </div>
+        </div>
+
+        {/* Server List */}
+        <div className="space-y-4 mb-6">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            Connected Servers ({connections.length})
+          </h2>
+          
+          {connections.length === 0 ? (
+            <p className="text-gray-600 dark:text-gray-400">No servers added yet.</p>
+          ) : (
+            <div className="space-y-3">
+              {connections.map((connection) => (
+                <div key={connection.id} className="border border-gray-200 dark:border-gray-700 rounded-md p-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3">
+                        <span className="text-lg">{getStatusIcon(connection.status)}</span>
+                        <div>
+                          <h3 className="font-medium text-gray-900 dark:text-gray-100">
+                            {connection.name}
+                          </h3>
+                          <p className="text-sm text-gray-600 dark:text-gray-400">
+                            {connection.url}
+                          </p>
+                        </div>
+                      </div>
+                      
+                      <div className="mt-2 flex items-center gap-4 text-sm">
+                        <span className={getStatusColor(connection.status)}>
+                          Status: {connection.status}
+                        </span>
+                        <span className="text-gray-600 dark:text-gray-400">
+                          Transport: {connection.transport}
+                        </span>
+                        <span className="text-gray-600 dark:text-gray-400">
+                          Tools: {connection.tools.length}
+                        </span>
+                        <span className="text-gray-600 dark:text-gray-400">
+                          Resources: {connection.resources.length}
+                        </span>
+                        {connection.connectionAttempts > 0 && (
+                          <span className="text-orange-600 dark:text-orange-400">
+                            Attempts: {connection.connectionAttempts}
+                          </span>
+                        )}
+                      </div>
+                      
+                      {connection.error && (
+                        <div className="mt-2 text-sm text-red-600 dark:text-red-400">
+                          Error: {connection.error}
+                        </div>
+                      )}
+                      
+                      {connection.lastConnected && (
+                        <div className="mt-2 text-sm text-gray-500 dark:text-gray-500">
+                          Last connected: {connection.lastConnected.toLocaleString()}
+                        </div>
+                      )}
+                    </div>
+                    
+                    <div className="flex gap-2">
+                      {connection.status === 'failed' && (
+                        <button
+                          onClick={() => handleReconnectServer(connection.id)}
+                          className="px-3 py-1 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 text-sm"
+                        >
+                          Retry
+                        </button>
+                      )}
+                      <button
+                        onClick={() => handleRemoveServer(connection.id)}
+                        className="px-3 py-1 bg-red-600 text-white rounded-md hover:bg-red-700 text-sm"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Tool Testing */}
+        {connectedServers.length > 0 && (
+          <div className="space-y-4 mb-6">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              Tool Testing
+            </h2>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* Server Selection */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Select Server:
+                </label>
+                <select
+                  value={selectedConnectionId}
+                  onChange={(e) => {
+                    setSelectedConnectionId(e.target.value);
+                    setSelectedToolName('');
+                  }}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                >
+                  <option value="">Select a server</option>
+                  {connectedServers.map((connection) => (
+                    <option key={connection.id} value={connection.id}>
+                      {connection.name} ({connection.tools.length} tools)
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Tool Selection */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Select Tool:
+                </label>
+                <select
+                  value={selectedToolName}
+                  onChange={(e) => setSelectedToolName(e.target.value)}
+                  disabled={!selectedConnectionId}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 disabled:opacity-50"
+                >
+                  <option value="">Select a tool</option>
+                  {selectedTools.map((tool) => (
+                    <option key={tool.function.name} value={tool.function.name}>
+                      {tool.function.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            {/* Tool Arguments */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Tool Arguments (JSON):
+              </label>
+              <textarea
+                value={toolArgs}
+                onChange={(e) => setToolArgs(e.target.value)}
+                placeholder='{"param1": "value1", "param2": "value2"}'
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono text-sm"
+                rows={3}
+              />
+            </div>
+
+            {/* Call Tool Button */}
+            <button
+              onClick={handleCallTool}
+              disabled={!selectedConnectionId || !selectedToolName || isLoading}
+              className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50"
+            >
+              {isLoading ? 'Calling...' : 'Call Tool'}
+            </button>
+
+            {/* Tool Result */}
+            {toolResult && (
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Tool Result:
+                </label>
+                <pre className="bg-gray-100 dark:bg-gray-700 p-4 rounded-md text-xs overflow-x-auto text-gray-900 dark:text-gray-100">
+                  {toolResult}
+                </pre>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Summary Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md p-4 text-center">
+            <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+              {connections.length}
+            </div>
+            <div className="text-sm text-blue-800 dark:text-blue-200">
+              Total Servers
+            </div>
+          </div>
+          
+          <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-md p-4 text-center">
+            <div className="text-2xl font-bold text-green-600 dark:text-green-400">
+              {connectedServers.length}
+            </div>
+            <div className="text-sm text-green-800 dark:text-green-200">
+              Connected
+            </div>
+          </div>
+          
+          <div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-md p-4 text-center">
+            <div className="text-2xl font-bold text-purple-600 dark:text-purple-400">
+              {allTools.length}
+            </div>
+            <div className="text-sm text-purple-800 dark:text-purple-200">
+              Total Tools
+            </div>
+          </div>
+          
+          <div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-md p-4 text-center">
+            <div className="text-2xl font-bold text-orange-600 dark:text-orange-400">
+              {allResources.length}
+            </div>
+            <div className="text-sm text-orange-800 dark:text-orange-200">
+              Total Resources
+            </div>
+          </div>
+        </div>
+
+        {/* Error Display */}
+        {error && (
+          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md p-4">
+            <p className="text-red-700 dark:text-red-400">Error: {error}</p>
+          </div>
+        )}
+
+        {/* All Tools List */}
+        {allTools.length > 0 && (
+          <div className="space-y-4">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              All Available Tools ({allTools.length})
+            </h2>
+            <div className="grid gap-2">
+              {allTools.map((tool, index) => (
+                <div key={index} className="bg-gray-50 dark:bg-gray-700 rounded-md p-3">
+                  <div className="font-medium text-gray-900 dark:text-gray-100">
+                    {tool.function.name}
+                  </div>
+                  {tool.function.description && (
+                    <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                      {tool.function.description}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/OAuthCallback.tsx

@@ -4,10 +4,9 @@ import React, { useEffect } from 'react';
 
 interface OAuthCallbackProps {
   type: 'inference' | 'mcp';
-  serverId?: string; // Required when type is 'mcp'
 }
 
-export function OAuthCallback({ type, serverId }: OAuthCallbackProps) {
+export function OAuthCallback({ type }: OAuthCallbackProps) {
   useEffect(() => {
     // Extract OAuth parameters from URL
     const urlParams = new URLSearchParams(window.location.search);
@@ -16,7 +15,8 @@ export function OAuthCallback({ type, serverId }: OAuthCallbackProps) {
     const error = urlParams.get('error');
     const errorDescription = urlParams.get('error_description');
 
-    // Send result to parent window
+    // For MCP OAuth, we just pass the callback data to the parent window
+    // The parent window (which has the MCPProvider context) will handle the actual callback processing
     if (window.opener) {
       const messageType = type === 'inference' ? 'oauth_callback' : 'mcp_oauth_callback';
       
@@ -24,14 +24,13 @@ export function OAuthCallback({ type, serverId }: OAuthCallbackProps) {
         window.opener.postMessage({
           type: messageType,
           callbackType: type,
-          serverId,
           error: errorDescription || error,
+          state,
         }, window.location.origin);
       } else if (code && state) {
         window.opener.postMessage({
           type: messageType,
           callbackType: type,
-          serverId,
           code,
           state,
         }, window.location.origin);
@@ -39,8 +38,8 @@ export function OAuthCallback({ type, serverId }: OAuthCallbackProps) {
         window.opener.postMessage({
           type: messageType,
           callbackType: type,
-          serverId,
           error: 'Invalid OAuth callback - missing code or state',
+          state,
         }, window.location.origin);
       }
 
@@ -52,7 +51,7 @@ export function OAuthCallback({ type, serverId }: OAuthCallbackProps) {
       // Fallback if not in a popup - redirect to main app
       window.location.href = '/';
     }
-  }, []);
+  }, [type]);
 
   return (
     <div className="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">

src/contexts/MCPContext.tsx

@@ -0,0 +1,352 @@
+// React context for MCP server connection management
+
+import React, { createContext, useContext, useState, useCallback, useEffect, ReactNode, useRef } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+import type {
+  MCPConnection,
+  MCPServerConfig,
+  MCPResource,
+  MCPContextValue,
+  MCPError,
+} from '@/types/mcp';
+import type { Tool } from '@/types/inference';
+import { MCPConnectionManager } from '@/mcp/connection';
+
+const MCPContext = createContext<MCPContextValue | null>(null);
+
+interface MCPProviderProps {
+  children: ReactNode;
+}
+
+export function MCPProvider({ children }: MCPProviderProps) {
+  const [connections, setConnections] = useState<MCPConnection[]>([]);
+  const [managers, setManagers] = useState<Map<string, MCPConnectionManager>>(new Map());
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const hasLoadedPersisted = useRef(false);
+
+  // Load persisted connections from localStorage on mount
+  useEffect(() => {
+    // Prevent loading if we've already loaded
+    if (hasLoadedPersisted.current) {
+      return;
+    }
+    
+    hasLoadedPersisted.current = true;
+    
+    const loadPersistedConnections = async () => {
+      try {
+        const persistedData = localStorage.getItem('mcp_connections');
+        if (persistedData) {
+          const persistedConfigs: MCPServerConfig[] = JSON.parse(persistedData);
+          
+          // Restore connections directly without using addMcpServer to avoid loops
+          for (const config of persistedConfigs) {
+            try {
+              const connectionId = uuidv4();
+              const manager = new MCPConnectionManager(connectionId, config);
+              
+              // Add to managers map
+              setManagers(prev => new Map(prev).set(connectionId, manager));
+              
+              // Add initial connection state
+              setConnections(prev => [...prev, manager.getConnection()]);
+              
+              // Don't auto-connect during restoration - let user manually connect
+              console.log(`Restored connection config for ${config.name}`);
+            } catch (error) {
+              console.warn(`Failed to restore connection to ${config.name}:`, error);
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load persisted MCP connections:', error);
+      }
+    };
+
+    loadPersistedConnections();
+  }, []); // Empty dependency array - only run once on mount
+
+  const persistConnections = useCallback(() => {
+    try {
+      const configs = connections.map(conn => conn.config);
+      localStorage.setItem('mcp_connections', JSON.stringify(configs));
+    } catch (error) {
+      console.error('Failed to persist MCP connections:', error);
+    }
+  }, [connections]);
+
+  // Auto-save connections to localStorage when they change
+  useEffect(() => {
+    // Only save if we've finished initial loading
+    if (hasLoadedPersisted.current && connections.length > 0) {
+      persistConnections();
+    }
+  }, [persistConnections]);
+
+  const addMcpServer = useCallback(async (config: MCPServerConfig): Promise<string> => {
+    const connectionId = uuidv4();
+    
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Create connection manager
+      const manager = new MCPConnectionManager(connectionId, config);
+      
+      // Set up callback for connection state updates
+      manager.setConnectionUpdateCallback(() => {
+        setConnections(prev => 
+          prev.map(conn => 
+            conn.id === connectionId ? manager.getConnection() : conn
+          )
+        );
+      });
+      
+      // Add to managers map
+      setManagers(prev => new Map(prev).set(connectionId, manager));
+      
+      // Add initial connection state
+      setConnections(prev => [...prev, manager.getConnection()]);
+      
+      // Attempt to connect
+      try {
+        await manager.connect();
+        
+        // Update connection state after successful connection
+        setConnections(prev => 
+          prev.map(conn => 
+            conn.id === connectionId ? manager.getConnection() : conn
+          )
+        );
+      } catch (error) {
+        // Update connection state with error
+        setConnections(prev => 
+          prev.map(conn => 
+            conn.id === connectionId ? managers.get(connectionId)?.getConnection() || conn : conn
+          )
+        );
+        
+        // For OAuth servers, initial connection failure is expected
+        // The OAuth flow will handle the authentication and retry automatically
+        console.log('Caught error during connection:', {
+          authType: config.authType,
+          errorType: typeof error,
+          errorConstructor: error?.constructor?.name,
+          errorMessage: error?.message,
+          errorDetails: error?.details,
+          detailsConstructor: error?.details?.constructor?.name,
+          fullError: error
+        });
+        
+        const isUnauthorizedError = 
+          config.authType === 'oauth' && (
+            (error instanceof Error && error.message === 'Unauthorized') ||
+            (error instanceof Error && error.constructor.name === 'UnauthorizedError') ||
+            (error && typeof error === 'object' && error.message === 'Unauthorized' && 
+             error.details && error.details.constructor && error.details.constructor.name === 'UnauthorizedError')
+          );
+        
+        if (isUnauthorizedError) {
+          console.log('Initial OAuth connection failed as expected, OAuth flow will handle authentication...');
+        } else {
+          console.log('Non-OAuth error, propagating:', error);
+          // For non-OAuth errors, propagate the error
+          const errorMessage = error instanceof Error ? error.message : 'Failed to add MCP server';
+          setError(errorMessage);
+          throw error;
+        }
+      }
+      
+      return connectionId;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [managers]);
+
+  const removeMcpServer = useCallback((connectionId: string) => {
+    const manager = managers.get(connectionId);
+    if (manager) {
+      // Disconnect the server
+      manager.disconnect();
+      
+      // Remove from managers
+      setManagers(prev => {
+        const newMap = new Map(prev);
+        newMap.delete(connectionId);
+        return newMap;
+      });
+      
+      // Remove from connections
+      setConnections(prev => prev.filter(conn => conn.id !== connectionId));
+    }
+  }, [managers]);
+
+  const reconnectServer = useCallback(async (connectionId: string): Promise<void> => {
+    const manager = managers.get(connectionId);
+    if (!manager) {
+      throw new Error(`Connection ${connectionId} not found`);
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      await manager.reconnect();
+      
+      // Update connection state
+      setConnections(prev => 
+        prev.map(conn => 
+          conn.id === connectionId ? manager.getConnection() : conn
+        )
+      );
+    } catch (error) {
+      // Update connection state with error
+      setConnections(prev => 
+        prev.map(conn => 
+          conn.id === connectionId ? manager.getConnection() : conn
+        )
+      );
+      
+      const errorMessage = error instanceof Error ? error.message : 'Failed to reconnect server';
+      setError(errorMessage);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [managers]);
+
+  const getAllTools = useCallback((): Tool[] => {
+    return connections.flatMap(conn => conn.tools);
+  }, [connections]);
+
+  const getToolsForServer = useCallback((connectionId: string): Tool[] => {
+    const connection = connections.find(conn => conn.id === connectionId);
+    return connection?.tools || [];
+  }, [connections]);
+
+  const callTool = useCallback(async (connectionId: string, toolName: string, args: any): Promise<any> => {
+    const manager = managers.get(connectionId);
+    if (!manager) {
+      throw new Error(`Connection ${connectionId} not found`);
+    }
+
+    try {
+      return await manager.callTool(toolName, args);
+    } catch (error) {
+      // Update connection state in case status changed
+      setConnections(prev => 
+        prev.map(conn => 
+          conn.id === connectionId ? manager.getConnection() : conn
+        )
+      );
+      throw error;
+    }
+  }, [managers]);
+
+  const getAllResources = useCallback((): MCPResource[] => {
+    return connections.flatMap(conn => conn.resources);
+  }, [connections]);
+
+  const getResourcesForServer = useCallback((connectionId: string): MCPResource[] => {
+    const connection = connections.find(conn => conn.id === connectionId);
+    return connection?.resources || [];
+  }, [connections]);
+
+  const getConnectedServers = useCallback((): MCPConnection[] => {
+    return connections.filter(conn => conn.status === 'connected');
+  }, [connections]);
+
+  const getServerStatus = useCallback((connectionId: string): MCPConnection['status'] => {
+    const connection = connections.find(conn => conn.id === connectionId);
+    return connection?.status || 'disconnected';
+  }, [connections]);
+
+  const getConnectionById = useCallback((connectionId: string): MCPConnection | undefined => {
+    return connections.find(conn => conn.id === connectionId);
+  }, [connections]);
+
+  const updateServerConfig = useCallback((connectionId: string, configUpdate: Partial<MCPServerConfig>) => {
+    setConnections(prev => 
+      prev.map(conn => 
+        conn.id === connectionId 
+          ? { ...conn, config: { ...conn.config, ...configUpdate } }
+          : conn
+      )
+    );
+  }, []);
+
+  const handleOAuthCallback = useCallback(async (connectionId: string, authorizationCode: string): Promise<void> => {
+    const manager = managers.get(connectionId);
+    if (!manager) {
+      throw new Error(`Connection ${connectionId} not found`);
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Type assertion to access the OAuth callback method
+      const connectionManager = manager as any;
+      if (typeof connectionManager.handleOAuthCallback === 'function') {
+        await connectionManager.handleOAuthCallback(authorizationCode);
+        
+        // Update connection state
+        setConnections(prev => 
+          prev.map(conn => 
+            conn.id === connectionId ? manager.getConnection() : conn
+          )
+        );
+      } else {
+        throw new Error('OAuth callback not supported by this connection');
+      }
+    } catch (error) {
+      // Update connection state with error
+      setConnections(prev => 
+        prev.map(conn => 
+          conn.id === connectionId ? manager.getConnection() : conn
+        )
+      );
+      
+      const errorMessage = error instanceof Error ? error.message : 'Failed to handle OAuth callback';
+      setError(errorMessage);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [managers]);
+
+  const contextValue: MCPContextValue = {
+    connections,
+    isLoading,
+    error,
+    addMcpServer,
+    removeMcpServer,
+    reconnectServer,
+    getAllTools,
+    getToolsForServer,
+    callTool,
+    getAllResources,
+    getResourcesForServer,
+    getConnectedServers,
+    getServerStatus,
+    getConnectionById,
+    updateServerConfig,
+    handleOAuthCallback,
+  };
+
+  return (
+    <MCPContext.Provider value={contextValue}>
+      {children}
+    </MCPContext.Provider>
+  );
+}
+
+export function useMCP(): MCPContextValue {
+  const context = useContext(MCPContext);
+  if (!context) {
+    throw new Error('useMCP must be used within an MCPProvider');
+  }
+  return context;
+}

src/mcp/connection.ts

@@ -0,0 +1,674 @@
+// Individual MCP server connection management
+
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js';
+import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
+import type { Transport } from '@modelcontextprotocol/sdk/shared/transport.js';
+import { 
+  auth, 
+  discoverOAuthMetadata, 
+  extractResourceMetadataUrl,
+  type OAuthClientProvider,
+  type OAuthClientMetadata,
+  type OAuthClientInformation,
+  type OAuthTokens,
+  type OAuthClientInformationFull
+} from '@modelcontextprotocol/sdk/client/auth.js';
+
+import type {
+  MCPConnection,
+  MCPServerConfig,
+  MCPResource,
+  MCPPrompt,
+  MCPConnectionManager,
+  MCPError,
+} from '@/types/mcp';
+import type { Tool } from '@/types/inference';
+
+interface MCPOAuthState {
+  codeVerifier: string;
+  state: string;
+  expiresAt: number;
+}
+
+class MCPOAuthProvider implements OAuthClientProvider {
+  private connectionId: string;
+  private serverName: string;
+  private serverUrl: string;
+  pendingAuthorizationCode?: string;
+  authError?: string;
+  private onOAuthComplete?: () => void;
+  
+  constructor(connectionId: string, serverName: string, serverUrl: string, onOAuthComplete?: () => void) {
+    this.connectionId = connectionId;
+    this.serverName = serverName;
+    this.serverUrl = serverUrl;
+    this.onOAuthComplete = onOAuthComplete;
+  }
+  
+  get redirectUrl(): string {
+    return `${window.location.origin}/oauth/mcp/callback`;
+  }
+  
+  get clientMetadata(): OAuthClientMetadata {
+    return {
+      redirect_uris: [this.redirectUrl],
+      grant_types: ['authorization_code'],
+      response_types: ['code'],
+      client_name: `MCP Client - ${this.serverName}`,
+      token_endpoint_auth_method: 'none', // Public client
+    };
+  }
+  
+  state(): string {
+    // Encode connection ID in the state parameter for callback identification
+    const randomPart = this.generateRandomString(8);
+    return `${this.connectionId}.${randomPart}`;
+  }
+  
+  // Generate a consistent key for the server based on URL
+  getServerKey(): string {
+    try {
+      const url = new URL(this.serverUrl);
+      // Use hostname + pathname to create a unique but consistent key
+      // This allows the same server to reuse client registration even if added multiple times
+      return btoa(`${url.hostname}${url.pathname}`).replace(/[+/=]/g, '');
+    } catch {
+      // Fallback to connection ID if URL parsing fails
+      return this.connectionId;
+    }
+  }
+
+  clientInformation(): OAuthClientInformation | undefined {
+    const serverKey = this.getServerKey();
+    const stored = localStorage.getItem(`mcp_oauth_client_${serverKey}`);
+    return stored ? JSON.parse(stored) : undefined;
+  }
+  
+  async saveClientInformation(clientInformation: OAuthClientInformationFull): Promise<void> {
+    console.log('Registered OAuth client for MCP server');
+    const serverKey = this.getServerKey();
+    localStorage.setItem(`mcp_oauth_client_${serverKey}`, JSON.stringify(clientInformation));
+  }
+  
+  tokens(): OAuthTokens | undefined {
+    const stored = localStorage.getItem(`mcp_oauth_tokens_${this.connectionId}`);
+    return stored ? JSON.parse(stored) : undefined;
+  }
+  
+  async saveTokens(tokens: OAuthTokens): Promise<void> {
+    console.log('OAuth tokens saved successfully');
+    localStorage.setItem(`mcp_oauth_tokens_${this.connectionId}`, JSON.stringify(tokens));
+  }
+  
+  async redirectToAuthorization(authorizationUrl: URL): Promise<void> {
+    console.log('🔐 Starting OAuth flow in popup window...');
+    
+    // Open popup for OAuth flow
+    const popup = window.open(
+      authorizationUrl.toString(),
+      'mcp_oauth_popup',
+      'width=600,height=700,scrollbars=yes,resizable=yes'
+    );
+
+    if (!popup) {
+      throw new Error('Failed to open OAuth popup. Please allow popups for this site.');
+    }
+
+    // Set up message listener for the authorization code
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+      if (event.data.type !== 'mcp_oauth_callback') return;
+      
+      // Extract connection ID from state parameter
+      const state = event.data.state;
+      if (!state || !state.startsWith(this.connectionId + '.')) return;
+
+      window.removeEventListener('message', handleMessage);
+      popup.close();
+
+      if (event.data.error) {
+        console.error('❌ OAuth authorization failed:', event.data.error);
+        this.authError = event.data.error;
+      } else if (event.data.code) {
+        console.log('✅ OAuth authorization successful, exchanging code for tokens...');
+        this.processAuthorizationCode(event.data.code);
+      } else {
+        console.error('❌ OAuth callback missing authorization code');
+        this.authError = 'No authorization code received';
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+  }
+  
+  async saveCodeVerifier(codeVerifier: string): Promise<void> {
+    const oauthState: MCPOAuthState = {
+      codeVerifier,
+      state: this.generateRandomString(16),
+      expiresAt: Date.now() + (10 * 60 * 1000), // 10 minutes
+    };
+    localStorage.setItem(`mcp_oauth_state_${this.connectionId}`, JSON.stringify(oauthState));
+  }
+  
+  async codeVerifier(): Promise<string> {
+    const stored = localStorage.getItem(`mcp_oauth_state_${this.connectionId}`);
+    if (!stored) {
+      throw new Error('No OAuth state found');
+    }
+    
+    const oauthState: MCPOAuthState = JSON.parse(stored);
+    if (Date.now() > oauthState.expiresAt) {
+      localStorage.removeItem(`mcp_oauth_state_${this.connectionId}`);
+      throw new Error('OAuth state expired');
+    }
+    
+    return oauthState.codeVerifier;
+  }
+  
+  private generateRandomString(length: number): string {
+    const array = new Uint8Array(length);
+    crypto.getRandomValues(array);
+    return btoa(String.fromCharCode.apply(null, Array.from(array)))
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_')
+      .replace(/=/g, '');
+  }
+
+  // Method to process authorization code immediately when received from popup
+  private async processAuthorizationCode(authorizationCode: string): Promise<void> {
+    try {
+      // Call the SDK's auth function with the authorization code to exchange for tokens
+      const result = await auth(this, {
+        serverUrl: this.serverUrl,
+        authorizationCode,
+      });
+      
+      if (result === 'AUTHORIZED') {
+        console.log('🎉 OAuth authentication completed! Connecting to MCP server...');
+        this.notifyOAuthComplete();
+      } else {
+        console.error('❌ OAuth token exchange failed');
+        this.authError = 'Authorization failed';
+      }
+    } catch (error) {
+      console.error('❌ OAuth token exchange error:', error instanceof Error ? error.message : error);
+      this.authError = error instanceof Error ? error.message : 'Authorization failed';
+    }
+  }
+
+  // Method to notify connection manager that OAuth is complete
+  private notifyOAuthComplete(): void {
+    if (this.onOAuthComplete) {
+      this.onOAuthComplete();
+    }
+  }
+
+  // Method to get and clear the pending authorization code
+  getPendingAuthorizationCode(): string | undefined {
+    const code = this.pendingAuthorizationCode;
+    this.pendingAuthorizationCode = undefined;
+    return code;
+  }
+}
+
+export class MCPConnectionManager implements MCPConnectionManager {
+  private connection: MCPConnection;
+  private client?: Client;
+  private transport?: Transport;
+  private reconnectTimeout?: NodeJS.Timeout;
+  private oauthProvider?: MCPOAuthProvider;
+  private onConnectionUpdate?: () => void;
+
+  constructor(id: string, config: MCPServerConfig) {
+    this.connection = {
+      id,
+      name: config.name,
+      url: config.url,
+      status: 'disconnected',
+      transport: 'streamable-http', // Will be determined during connection
+      authType: config.authType || 'none',
+      tools: [],
+      resources: [],
+      prompts: [],
+      connectionAttempts: 0,
+      config,
+    };
+    
+    // Initialize OAuth provider if auth is required
+    if (this.connection.authType === 'oauth') {
+      this.oauthProvider = new MCPOAuthProvider(id, config.name, config.url, () => {
+        // Callback when OAuth completes successfully
+        this.handleOAuthSuccess();
+      });
+    }
+  }
+
+  getConnection(): MCPConnection {
+    return { ...this.connection };
+  }
+
+  // Set callback for connection state updates
+  setConnectionUpdateCallback(callback: () => void): void {
+    this.onConnectionUpdate = callback;
+  }
+
+  // Notify about connection state changes
+  private notifyConnectionUpdate(): void {
+    if (this.onConnectionUpdate) {
+      this.onConnectionUpdate();
+    }
+  }
+
+  async connect(): Promise<void> {
+    this.connection.status = 'connecting';
+    this.connection.error = undefined;
+    
+    try {
+      // Validate URL format
+      console.log('Validating URL:', this.connection.url);
+      try {
+        const url = new URL(this.connection.url);
+        console.log('URL parsed successfully:', {
+          protocol: url.protocol,
+          hostname: url.hostname,
+          pathname: url.pathname,
+          port: url.port
+        });
+      } catch (urlError) {
+        throw new Error(`Invalid URL format: ${this.connection.url}`);
+      }
+      
+      // Clear any existing connections
+      await this.disconnect();
+      
+      // Determine transport strategy
+      const transportPreference = this.connection.config.transport || 'auto';
+      
+      if (transportPreference === 'auto' || transportPreference === 'streamable-http') {
+        try {
+          await this.tryStreamableHttp();
+          this.connection.transport = 'streamable-http';
+        } catch (error) {
+          if (transportPreference === 'streamable-http') {
+            throw error; // Don't fallback if explicitly requested
+          }
+          // Try SSE fallback
+          await this.trySSE();
+          this.connection.transport = 'sse';
+        }
+      } else if (transportPreference === 'sse') {
+        await this.trySSE();
+        this.connection.transport = 'sse';
+      }
+
+      // Initialize client capabilities
+      await this.initializeCapabilities();
+      
+      this.connection.status = 'connected';
+      this.connection.lastConnected = new Date();
+      this.connection.connectionAttempts = 0;
+      
+    } catch (error) {
+      this.connection.status = 'failed';
+      this.connection.error = error instanceof Error ? error.message : 'Unknown connection error';
+      this.connection.connectionAttempts++;
+      
+      // Schedule auto-reconnect if enabled
+      if (this.connection.config.autoReconnect !== false && 
+          this.connection.connectionAttempts < (this.connection.config.maxReconnectAttempts || 5)) {
+        const delay = this.getBackoffDelay();
+        console.log(`Scheduling reconnect attempt ${this.connection.connectionAttempts} in ${delay}ms`);
+        this.reconnectTimeout = setTimeout(async () => {
+          try {
+            await this.reconnect();
+          } catch (error) {
+            console.error('Auto-reconnect failed:', error);
+            // Don't throw here to prevent uncaught promise rejection
+          }
+        }, delay);
+      }
+      
+      throw this.createMCPError('connection', this.connection.error, error);
+    }
+  }
+
+  async disconnect(): Promise<void> {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = undefined;
+    }
+    
+    if (this.client) {
+      try {
+        await this.client.close();
+      } catch (error) {
+        // Ignore disconnect errors
+      }
+      this.client = undefined;
+    }
+    
+    if (this.transport) {
+      try {
+        await this.transport.close();
+      } catch (error) {
+        // Ignore transport close errors
+      }
+      this.transport = undefined;
+    }
+    
+    this.connection.status = 'disconnected';
+    this.connection.client = undefined;
+  }
+
+  // Method to handle OAuth callback with authorization code
+  async handleOAuthCallback(authorizationCode: string): Promise<void> {
+    if (!this.oauthProvider) {
+      throw new Error('OAuth provider not initialized');
+    }
+
+    console.log('Processing OAuth callback with authorization code...');
+    
+    try {
+      // If we have an active transport, use its finishAuth method
+      if (this.transport && typeof (this.transport as any).finishAuth === 'function') {
+        console.log('Calling transport.finishAuth...');
+        await (this.transport as any).finishAuth(authorizationCode);
+        console.log('OAuth authorization completed via transport');
+        
+        // Now attempt to connect - the transport should be authenticated
+        await this.connect();
+      } else {
+        // If no transport yet, store the authorization code and try connecting
+        // The transport creation will handle the auth flow
+        this.oauthProvider.pendingAuthorizationCode = authorizationCode;
+        console.log('Stored authorization code, attempting connection...');
+        await this.connect();
+      }
+      
+      console.log('OAuth callback processed successfully');
+    } catch (error) {
+      console.error('OAuth callback processing failed:', error);
+      throw new Error(`OAuth callback failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }
+
+  // Method to clear stored OAuth data
+  clearOAuthData(): void {
+    if (this.connection.authType === 'oauth' && this.oauthProvider) {
+      // Clear connection-specific data
+      localStorage.removeItem(`mcp_oauth_tokens_${this.connection.id}`);
+      localStorage.removeItem(`mcp_oauth_state_${this.connection.id}`);
+      
+      // Note: We intentionally don't clear client information here since it's 
+      // shared across connections to the same server. Use clearSharedClientData() 
+      // if you need to clear the client registration for this server.
+    }
+  }
+
+  // Method to clear shared client data for this server (affects all connections to the same server)
+  clearSharedClientData(): void {
+    if (this.connection.authType === 'oauth' && this.oauthProvider) {
+      const serverKey = this.oauthProvider.getServerKey();
+      localStorage.removeItem(`mcp_oauth_client_${serverKey}`);
+    }
+  }
+
+  async reconnect(): Promise<void> {
+    await this.connect();
+  }
+
+  // Handle successful OAuth completion
+  private async handleOAuthSuccess(): Promise<void> {
+    console.log('OAuth completed successfully, retrying connection...');
+    
+    try {
+      // Reset connection state and retry
+      this.connection.status = 'connecting';
+      this.connection.error = undefined;
+      this.notifyConnectionUpdate();
+      
+      // Attempt to connect now that we have valid tokens
+      await this.connect();
+      
+      console.log('Post-OAuth connection successful!');
+      this.notifyConnectionUpdate();
+    } catch (error) {
+      console.error('Post-OAuth connection failed:', error);
+      this.connection.status = 'failed';
+      this.connection.error = error instanceof Error ? error.message : 'Post-OAuth connection failed';
+      this.notifyConnectionUpdate();
+    }
+  }
+
+  private async handleOAuthAuthentication(): Promise<void> {
+    if (!this.oauthProvider) {
+      throw new Error('OAuth provider not initialized');
+    }
+
+    console.log('Starting OAuth authentication flow...');
+    
+    try {
+      const result = await auth(this.oauthProvider, {
+        serverUrl: this.connection.url,
+        scope: this.connection.config.oauthConfig?.scope,
+      });
+      
+      if (result === 'REDIRECT') {
+        // OAuth flow was initiated via popup, no further action needed here
+        console.log('OAuth flow initiated via popup');
+      } else if (result === 'AUTHORIZED') {
+        console.log('OAuth authentication successful');
+      }
+    } catch (error) {
+      console.error('OAuth authentication failed:', error);
+      throw new Error(`OAuth authentication failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }
+
+  private async tryStreamableHttp(): Promise<void> {
+    try {
+      console.log('Attempting StreamableHTTP connection to:', this.connection.url);
+      
+      // Create transport options with OAuth provider if configured
+      const transportOptions: any = {};
+      
+      if (this.connection.authType === 'oauth' && this.oauthProvider) {
+        transportOptions.authProvider = this.oauthProvider;
+      }
+      
+      const transport = new StreamableHTTPClientTransport(new URL(this.connection.url), transportOptions);
+      await this.initializeClient(transport);
+      console.log('StreamableHTTP connection successful');
+    } catch (error) {
+      console.error('StreamableHTTP connection failed:', error);
+      throw error;
+    }
+  }
+
+  private async trySSE(): Promise<void> {
+    try {
+      console.log('Attempting SSE connection to:', this.connection.url);
+      
+      // Create transport options with OAuth provider if configured
+      const transportOptions: any = {};
+      
+      if (this.connection.authType === 'oauth' && this.oauthProvider) {
+        transportOptions.authProvider = this.oauthProvider;
+      }
+      
+      const transport = new SSEClientTransport(new URL(this.connection.url), transportOptions);
+      console.log('SSE transport created, attempting client connection...');
+      await this.initializeClient(transport);
+      console.log('SSE connection successful');
+    } catch (error) {
+      console.error('SSE connection failed:', error);
+      console.error('Error details:', {
+        message: error instanceof Error ? error.message : 'Unknown error',
+        stack: error instanceof Error ? error.stack : undefined,
+        url: this.connection.url
+      });
+      throw error;
+    }
+  }
+
+  private async initializeClient(transport: Transport): Promise<void> {
+    try {
+      console.log('Initializing MCP client...');
+      this.transport = transport;
+      this.client = new Client(
+        {
+          name: 'example-remote-client',
+          version: '1.0.0',
+        },
+        {
+          capabilities: {},
+        }
+      );
+
+      console.log('Connecting client to transport...');
+      console.log('Transport type:', transport.constructor.name);
+      console.log('Transport details:', transport);
+      
+      await this.client.connect(transport);
+      this.connection.client = this.client;
+      console.log('Client connected successfully');
+    } catch (error) {
+      console.error('Client initialization failed:', error);
+      console.error('Error type:', error?.constructor?.name);
+      console.error('Error message:', error instanceof Error ? error.message : error);
+      console.error('Full error object:', error);
+      throw error;
+    }
+  }
+
+  private async initializeCapabilities(): Promise<void> {
+    if (!this.client) {
+      throw new Error('Client not initialized');
+    }
+
+    try {
+      // Discover tools
+      this.connection.tools = await this.discoverTools();
+      
+      // Discover resources (if supported)
+      try {
+        this.connection.resources = await this.discoverResources();
+      } catch (error) {
+        // Resources not supported by this server
+        this.connection.resources = [];
+      }
+      
+      // Discover prompts (if supported)
+      try {
+        this.connection.prompts = await this.discoverPrompts();
+      } catch (error) {
+        // Prompts not supported by this server
+        this.connection.prompts = [];
+      }
+      
+    } catch (error) {
+      throw this.createMCPError('protocol', 'Failed to initialize server capabilities', error);
+    }
+  }
+
+  async discoverTools(): Promise<Tool[]> {
+    if (!this.client) {
+      throw new Error('Client not connected');
+    }
+
+    try {
+      const result = await this.client.listTools();
+
+      // Transform MCP tools to our Tool interface with name prefixing
+      return result.tools.map(tool => ({
+        type: 'function' as const,
+        function: {
+          name: `${this.connection.name}.${tool.name}`,
+          description: `[${this.connection.name}] ${tool.description || ''}`,
+          parameters: tool.inputSchema || {},
+        },
+      }));
+    } catch (error) {
+      throw this.createMCPError('protocol', 'Failed to discover tools', error);
+    }
+  }
+
+  async discoverResources(): Promise<MCPResource[]> {
+    if (!this.client) {
+      throw new Error('Client not connected');
+    }
+
+    try {
+      const result = await this.client.listResources();
+
+      return result.resources.map(resource => ({
+        uri: resource.uri,
+        name: resource.name,
+        description: resource.description,
+        mimeType: resource.mimeType,
+      }));
+    } catch (error) {
+      throw this.createMCPError('protocol', 'Failed to discover resources', error);
+    }
+  }
+
+  async discoverPrompts(): Promise<MCPPrompt[]> {
+    if (!this.client) {
+      throw new Error('Client not connected');
+    }
+
+    try {
+      const result = await this.client.listPrompts();
+
+      return result.prompts.map(prompt => ({
+        name: prompt.name,
+        description: prompt.description,
+        arguments: prompt.arguments,
+      }));
+    } catch (error) {
+      throw this.createMCPError('protocol', 'Failed to discover prompts', error);
+    }
+  }
+
+  async callTool(toolName: string, args: any): Promise<any> {
+    if (!this.client) {
+      throw new Error('Client not connected');
+    }
+
+    // Remove the server prefix from the tool name
+    const unprefixedName = toolName.startsWith(`${this.connection.name}.`) 
+      ? toolName.slice(this.connection.name.length + 1)
+      : toolName;
+
+    try {
+      const result = await this.client.callTool({
+        name: unprefixedName,
+        arguments: args,
+      });
+
+      return result;
+    } catch (error) {
+      throw this.createMCPError('tool_execution', `Failed to call tool ${unprefixedName}`, error);
+    }
+  }
+
+  getStatus(): MCPConnection['status'] {
+    return this.connection.status;
+  }
+
+  private getBackoffDelay(): number {
+    // Exponential backoff: 1s, 2s, 4s, 8s, 16s
+    return Math.min(1000 * Math.pow(2, this.connection.connectionAttempts - 1), 16000);
+  }
+
+  private createMCPError(type: MCPError['type'], message: string, details?: any): MCPError {
+    return {
+      type,
+      message,
+      details,
+      connectionId: this.connection.id,
+      retryable: type === 'connection' || type === 'transport',
+    };
+  }
+}

src/types/mcp.ts

@@ -0,0 +1,132 @@
+// MCP provider types and interfaces
+
+import type { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import type { Tool } from './inference';
+
+export interface MCPServerConfig {
+  name: string;                 // User-provided display name
+  url: string;                  // Server endpoint URL
+  transport?: 'sse' | 'streamable-http' | 'auto'; // Default: auto-detect
+  authType?: 'none' | 'oauth'; // Default: none
+  oauthConfig?: {
+    clientId?: string;
+    authUrl?: string;           // OAuth authorization endpoint
+    tokenUrl?: string;          // Token exchange endpoint
+    scope?: string;             // OAuth scope
+    redirectUri?: string;       // Override default redirect URI
+  };
+  autoReconnect?: boolean;      // Default: true
+  maxReconnectAttempts?: number; // Default: 5
+}
+
+export interface MCPMessage {
+  timestamp: Date;
+  direction: 'sent' | 'received';
+  type: 'request' | 'response' | 'notification';
+  method?: string;
+  id?: string | number;
+  content: any;
+  error?: any;
+}
+
+export interface MCPResource {
+  uri: string;
+  name: string;
+  description?: string;
+  mimeType?: string;
+}
+
+export interface MCPPrompt {
+  name: string;
+  description?: string;
+  arguments?: Array<{
+    name: string;
+    description?: string;
+    required?: boolean;
+  }>;
+}
+
+export interface MCPConnection {
+  id: string;                    // Unique connection identifier
+  name: string;                  // User-provided server name
+  url: string;                   // Server URL
+  status: 'connecting' | 'connected' | 'failed' | 'disconnected';
+  client?: Client;               // MCP SDK client instance
+  transport: 'sse' | 'streamable-http';
+  authType: 'none' | 'oauth';
+  
+  // Available capabilities
+  tools: Tool[];                 // Tools with name-prefixed identifiers
+  resources: MCPResource[];      // Available resources
+  prompts: MCPPrompt[];         // Available prompts
+  
+  // Connection metadata
+  error?: string;               // Last error message
+  lastConnected?: Date;         // Last successful connection
+  connectionAttempts: number;   // Number of reconnection attempts
+  
+  // Configuration
+  config: MCPServerConfig;
+}
+
+export interface MCPConnectionManager {
+  // Connection lifecycle
+  connect(): Promise<void>;
+  disconnect(): void;
+  reconnect(): Promise<void>;
+  
+  // Capability discovery
+  discoverTools(): Promise<Tool[]>;
+  discoverResources(): Promise<MCPResource[]>;
+  discoverPrompts(): Promise<MCPPrompt[]>;
+  
+  // Tool execution
+  callTool(toolName: string, args: any): Promise<any>;
+  
+  // Status
+  getStatus(): MCPConnection['status'];
+  getConnection(): MCPConnection;
+  
+  // Connection state updates
+  setConnectionUpdateCallback(callback: () => void): void;
+}
+
+export interface MCPError {
+  type: 'connection' | 'auth' | 'tool_execution' | 'protocol' | 'transport';
+  message: string;
+  details?: any;
+  connectionId?: string;
+  retryable: boolean;
+}
+
+export interface MCPContextValue {
+  // Connection state
+  connections: MCPConnection[];
+  isLoading: boolean;
+  error: string | null;
+  
+  // Connection management
+  addMcpServer: (config: MCPServerConfig) => Promise<string>; // Returns connection ID
+  removeMcpServer: (connectionId: string) => void;
+  reconnectServer: (connectionId: string) => Promise<void>;
+  
+  // Tool access (explicit server routing)
+  getAllTools: () => Tool[];                    // All tools with prefixed names
+  getToolsForServer: (connectionId: string) => Tool[];
+  callTool: (connectionId: string, toolName: string, args: any) => Promise<any>;
+  
+  // Resource access
+  getAllResources: () => MCPResource[];
+  getResourcesForServer: (connectionId: string) => MCPResource[];
+  
+  // Status and debugging
+  getConnectedServers: () => MCPConnection[];
+  getServerStatus: (connectionId: string) => MCPConnection['status'];
+  getConnectionById: (connectionId: string) => MCPConnection | undefined;
+  
+  // Connection configuration
+  updateServerConfig: (connectionId: string, config: Partial<MCPServerConfig>) => void;
+  
+  // OAuth handling
+  handleOAuthCallback: (connectionId: string, authorizationCode: string) => Promise<void>;
+}