${JSON.stringify(logData.requestHeaders, null, 2)}

`;\n detailsContent.appendChild(reqHeadersDiv);\n }\n\n if (logData.requestBody) {\n const reqBodyDiv = document.createElement('div');\n reqBodyDiv.innerHTML = `Request Body:

${typeof logData.requestBody === 'string' ? logData.requestBody : JSON.stringify(logData.requestBody, null, 2)}

`;\n detailsContent.appendChild(reqBodyDiv);\n }\n\n if (logData.responseHeaders) {\n const resHeadersDiv = document.createElement('div');\n resHeadersDiv.innerHTML = `Response Headers:

${JSON.stringify(logData.responseHeaders, null, 2)}

`;\n detailsContent.appendChild(resHeadersDiv);\n }\n\n if (logData.responseBody) {\n const resBodyDiv = document.createElement('div');\n resBodyDiv.innerHTML = `Response Body:

${typeof logData.responseBody === 'string' ? logData.responseBody : JSON.stringify(logData.responseBody, null, 2)}

`;\n detailsContent.appendChild(resBodyDiv);\n }\n\n detailsContainer.appendChild(detailsContent);\n entry.appendChild(detailsContainer);\n\n // Click handler for expand/collapse\n header.onclick = (e) => {\n if (hasDetails) {\n const isExpanded = detailsContainer.classList.contains('expanded');\n detailsContainer.classList.toggle('expanded');\n expandArrow.classList.toggle('expanded');\n e.stopPropagation();\n }\n };\n }\n\n // Right-click or double-click to highlight\n header.oncontextmenu = (e) => {\n e.preventDefault();\n entry.classList.toggle('highlighted');\n };\n header.ondblclick = () => {\n entry.classList.toggle('highlighted');\n };\n\n logDiv.appendChild(entry);\n logDiv.scrollTop = logDiv.scrollHeight;\n}\n\nwindow.setStatus = function(status: string): void {\n const statusEl = document.getElementById('status');\n if (!statusEl) return;\n statusEl.className = 'status ' + status;\n statusEl.textContent = status.charAt(0).toUpperCase() + status.slice(1);\n}\n\nfunction savePreferences(): void {\n const serverSelect = document.getElementById('serverSelect') as HTMLSelectElement;\n const customUrl = document.getElementById('customUrl') as HTMLInputElement;\n\n if (serverSelect && customUrl) {\n localStorage.setItem('mcp_server_select', serverSelect.value);\n if (serverSelect.value === 'custom') {\n localStorage.setItem('mcp_custom_url', customUrl.value);\n }\n }\n}\n\nfunction loadPreferences(): void {\n const savedServer = localStorage.getItem('mcp_server_select');\n const savedCustomUrl = localStorage.getItem('mcp_custom_url');\n\n if (savedServer) {\n const serverSelect = document.getElementById('serverSelect') as HTMLSelectElement;\n if (serverSelect) {\n serverSelect.value = savedServer;\n if (savedServer === 'custom') {\n const customUrlGroup = document.getElementById('customUrlGroup');\n if (customUrlGroup) {\n customUrlGroup.style.display = 'block';\n }\n if (savedCustomUrl) {\n const customUrl = document.getElementById('customUrl') as HTMLInputElement;\n if (customUrl) {\n customUrl.value = savedCustomUrl;\n }\n }\n }\n }\n }\n}\n\nconst serverSelect = document.getElementById('serverSelect');\nif (serverSelect) {\n serverSelect.addEventListener('change', function(e: Event) {\n const target = e.target as HTMLSelectElement;\n const customUrlGroup = document.getElementById('customUrlGroup');\n if (customUrlGroup) {\n customUrlGroup.style.display = target.value === 'custom' ? 'block' : 'none';\n }\n savePreferences();\n });\n}\n\nconst customUrl = document.getElementById('customUrl');\nif (customUrl) {\n customUrl.addEventListener('change', savePreferences);\n}\n\n\nexport const withOAuth =\n (provider: OAuthClientProvider, baseUrl?: string | URL): Middleware =>\n next => {\n return async (input, init) => {\n const makeRequest = async (): Promise => {\n const headers = new Headers(init?.headers);\n\n // Add authorization header if tokens are available\n const tokens = await provider.tokens();\n if (tokens) {\n headers.set('Authorization', `Bearer ${tokens.access_token}`);\n }\n\n return await next(input, { ...init, headers });\n };\n\n let response = await makeRequest();\n console.log(\"Got response??\");\n\n // Handle 401 responses by attempting re-authentication\n if (response.status === 401) {\n try {\n const resourceMetadataUrl = extractResourceMetadataUrl(response);\n\n // Use provided baseUrl or extract from request URL\n const serverUrl = baseUrl || (typeof input === 'string' ? new URL(input).origin : input.origin);\n\n const result = await auth(provider, {\n serverUrl,\n resourceMetadataUrl,\n fetchFn: next\n });\n\n if (result === 'REDIRECT') {\n throw new UnauthorizedError('Authentication requires user authorization - redirect initiated');\n }\n\n if (result !== 'AUTHORIZED') {\n throw new UnauthorizedError(`Authentication failed with result: ${result}`);\n }\n\n // Retry the request with fresh tokens\n response = await makeRequest();\n } catch (error) {\n if (error instanceof UnauthorizedError) {\n throw error;\n }\n throw new UnauthorizedError(`Failed to re-authenticate: ${error instanceof Error ? error.message : String(error)}`);\n }\n }\n\n // If we still have a 401 after re-auth attempt, throw an error\n if (response.status === 401) {\n const url = typeof input === 'string' ? input : input.toString();\n throw new UnauthorizedError(`Authentication failed for ${url}`);\n }\n\n return response;\n };\n };\n\nexport const withWindowLogging = (): Middleware => {\n return next => async (input, init) => {\n const startTime = performance.now();\n const method = init?.method || 'GET';\n const url = typeof input === 'string' ? input : input.toString();\n\n // Capture request details\n let requestBody: any = null;\n const requestHeaders: Record = {};\n \n if (init?.headers) {\n const headers = new Headers(init.headers);\n headers.forEach((value, key) => {\n requestHeaders[key] = value;\n });\n }\n\n if (init?.body) {\n try {\n if (typeof init.body === 'string') {\n requestBody = init.body;\n // Try to parse as JSON if possible\n try {\n requestBody = JSON.parse(init.body);\n } catch {\n // Keep as string if not valid JSON\n }\n } else {\n requestBody = init.body;\n }\n } catch (error) {\n requestBody = '[Unable to capture request body]';\n }\n }\n\n try {\n const response = await next(input, init);\n const duration = Math.round(performance.now() - startTime);\n\n // Capture response details\n const responseHeaders: Record = {};\n response.headers.forEach((value, key) => {\n responseHeaders[key] = value;\n });\n\n let responseBody: any = null;\n try {\n const clonedResponse = response.clone();\n const contentType = response.headers.get('content-type') || '';\n \n if (contentType.includes('application/json')) {\n responseBody = await clonedResponse.json();\n } else if (contentType.includes('text/')) {\n responseBody = await clonedResponse.text();\n }\n } catch (error) {\n responseBody = '[Unable to capture response body]';\n }\n\n const message = `HTTP ${method} ${url} ${response.status} ${response.statusText} (${duration}ms)`;\n \n const logData: LogData = {\n message,\n requestBody: requestBody,\n responseBody: responseBody,\n requestHeaders: Object.keys(requestHeaders).length > 0 ? requestHeaders : undefined,\n responseHeaders: Object.keys(responseHeaders).length > 0 ? responseHeaders : undefined\n };\n\n if (response.status >= 400) {\n window.log(logData, 'error');\n } else {\n window.log(logData, 'http');\n }\n await new Promise(resolve => setTimeout(resolve, 10));\n\n return response;\n } catch (error) {\n const duration = Math.round(performance.now() - startTime);\n const errorMessage = `HTTP ${method} ${url} failed: ${error instanceof Error ? error.message : String(error)} (${duration}ms)`;\n \n const logData: LogData = {\n message: errorMessage,\n requestBody: requestBody,\n requestHeaders: Object.keys(requestHeaders).length > 0 ? requestHeaders : undefined\n };\n\n window.log(logData, 'error');\n await new Promise(resolve => setTimeout(resolve, 10));\n throw error;\n }\n // sleep for 10 ms\n };\n};\n\nexport const withClientMetadataDiscovery = (provider: OAuthClientProvider, clientMetadataUrl: string): Middleware => {\n return next => async (input, init) => {\n const url = typeof input === 'string' ? input : input.toString();\n \n // Check if this is a request to the oauth-authorization-server metadata endpoint\n if (url.includes('/.well-known/oauth-authorization-server')) {\n const response = await next(input, init);\n \n if (response.ok) {\n try {\n const metadata = await response.json();\n \n // Check if client_id_metadata_document_supported is true\n if (metadata.client_id_metadata_document_supported === true) {\n window.log('Client metadata discovery supported! saving client info with metadata URL as client_id (skipping DCR)', 'success');\n \n // Save client information with the metadata URL as the client_id\n provider.saveClientInformation({\n client_id: clientMetadataUrl\n });\n }\n \n // Return a new response with the same data\n return new Response(JSON.stringify(metadata), {\n status: response.status,\n statusText: response.statusText,\n headers: response.headers\n });\n } catch (error) {\n window.log(`Failed to parse authorization server metadata: ${error}`, 'error');\n }\n }\n }\n \n return next(input, init);\n };\n};\n\n\nwindow.connectToServer = async function(): Promise {\n const serverSelect = document.getElementById('serverSelect') as HTMLSelectElement;\n const callbackUrl = (document.getElementById('callbackUrl') as HTMLInputElement)?.value;\n\n let serverUrl: string;\n if (serverSelect.value === 'custom') {\n serverUrl = (document.getElementById('customUrl') as HTMLInputElement)?.value || '';\n if (!serverUrl) {\n window.log('Please enter a custom server URL', 'error');\n return;\n }\n } else {\n serverUrl = serverSelect.value;\n }\n\n const connectBtn = document.getElementById('connectBtn') as HTMLButtonElement;\n const listToolsBtn = document.getElementById('listToolsBtn') as HTMLButtonElement;\n const disconnectBtn = document.getElementById('disconnectBtn') as HTMLButtonElement;\n\n connectBtn.disabled = true;\n window.setStatus('connecting');\n\n try {\n let parsedUrl: URL;\n try {\n parsedUrl = new URL(serverUrl);\n } catch {\n window.log('Invalid server URL format', 'error');\n return;\n }\n\n window.log('Initializing MCP client...', 'info');\n window.log('Using SDK: @modelcontextprotocol/sdk@1.18.2', 'info');\n\n const clientMetadata: ClientMetadata = {\n client_name: 'Browser Test Client',\n redirect_uris: [callbackUrl],\n grant_types: ['authorization_code', 'refresh_token'],\n response_types: ['code'],\n token_endpoint_auth_method: 'none',\n };\n\n oauthProvider = new BrowserOAuthProvider(callbackUrl, clientMetadata);\n\n client = new Client({\n name: 'browser-oauth-client',\n version: '1.0.0'\n }, {\n capabilities: {}\n });\n\n // Check if localhost development mode is enabled\n const useLocalhostDev = (document.getElementById('useLocalhostDev') as HTMLInputElement)?.checked;\n\n let clientMetadataUrl: string;\n if (useLocalhostDev) {\n // Use localhost development URL with callback configured\n clientMetadataUrl = `http://localhost/?redirect_uri=${encodeURIComponent(callbackUrl)}`;\n window.log('Using localhost development mode', 'info');\n } else {\n clientMetadataUrl = `${window.location.origin}/client-metadata.json`;\n }\n\n const fetchWrapper = applyMiddlewares(\n withWindowLogging(),\n withClientMetadataDiscovery(oauthProvider, clientMetadataUrl),\n withOAuth(oauthProvider, parsedUrl),\n )(fetch);\n\n transport = new StreamableHTTPClientTransport(\n parsedUrl,\n {\n fetch: fetchWrapper\n }\n );\n\n try {\n window.log('Connecting to server: ' + serverUrl, 'info');\n await client.connect(transport);\n window.log('Successfully connected to MCP server!', 'success');\n window.setStatus('connected');\n } catch (error: any) {\n if (error instanceof UnauthorizedError || error.message === 'Unauthorized') {\n window.log('OAuth required - waiting for authorization code...', 'auth');\n\n const authCode = await oauthProvider!.getAuthCode();\n await transport!.close();\n\n const result = await auth(oauthProvider, {\n serverUrl: parsedUrl,\n authorizationCode: authCode,\n // resourceMetadataUrl: this._resourceMetadataUrl,\n fetchFn: fetchWrapper,\n });\n if (result !== 'AUTHORIZED') {\n throw new UnauthorizedError('Failed to authorize');\n }\n\n transport = new StreamableHTTPClientTransport(\n parsedUrl,\n {\n fetch: fetchWrapper\n }\n );\n\n await client.connect(transport);\n window.log('Successfully connected with authentication!', 'success');\n window.setStatus('connected');\n } else {\n throw error;\n }\n }\n\n connectBtn.disabled = true;\n listToolsBtn.disabled = false;\n disconnectBtn.disabled = false;\n\n savePreferences();\n } catch (error: any) {\n window.log('Connection error: ' + error.message, 'error');\n window.setStatus('disconnected');\n connectBtn.disabled = false;\n }\n}\n\nwindow.listTools = async function(): Promise {\n if (!client) {\n window.log('Not connected to server', 'error');\n return;\n }\n\n try {\n window.log('Fetching available tools...', 'info');\n const result = await client.listTools();\n\n if (result.tools && result.tools.length > 0) {\n window.log(`Found ${result.tools.length} tools:`, 'success');\n result.tools.forEach((tool: any) => {\n window.log(` \" ${tool.name}: ${tool.description}`, 'info');\n });\n } else {\n window.log('No tools available', 'info');\n }\n } catch (error: any) {\n window.log('Error listing tools: ' + error.message, 'error');\n }\n}\n\nwindow.disconnect = async function(): Promise {\n if (transport) {\n try {\n window.log('Disconnecting...', 'info');\n await transport.close();\n window.log('Disconnected from server', 'success');\n } catch (error: any) {\n window.log('Error disconnecting: ' + error.message, 'error');\n }\n }\n\n client = null;\n transport = null;\n oauthProvider = null;\n\n window.setStatus('disconnected');\n const connectBtn = document.getElementById('connectBtn') as HTMLButtonElement;\n const listToolsBtn = document.getElementById('listToolsBtn') as HTMLButtonElement;\n const disconnectBtn = document.getElementById('disconnectBtn') as HTMLButtonElement;\n \n if (connectBtn) connectBtn.disabled = false;\n if (listToolsBtn) listToolsBtn.disabled = true;\n if (disconnectBtn) disconnectBtn.disabled = true;\n}\n\nwindow.clearLog = function(): void {\n const logDiv = document.getElementById('log');\n if (logDiv) {\n logDiv.innerHTML = '';\n window.log('Log cleared', 'info');\n }\n}\n\nwindow.addEventListener('DOMContentLoaded', function() {\n loadPreferences();\n window.log('MCP OAuth Workbench ready', 'info');\n\n const connectBtn = document.getElementById('connectBtn');\n const listToolsBtn = document.getElementById('listToolsBtn');\n const disconnectBtn = document.getElementById('disconnectBtn');\n const clearLogBtn = document.getElementById('clearLogBtn');\n\n if (connectBtn) connectBtn.addEventListener('click', window.connectToServer);\n if (listToolsBtn) listToolsBtn.addEventListener('click', window.listTools);\n if (disconnectBtn) disconnectBtn.addEventListener('click', window.disconnect);\n if (clearLogBtn) clearLogBtn.addEventListener('click', window.clearLog);\n});\n\n\nexport default true;","deleted","label",[99],"permalink","https://www.val.town/x/pcarleton/mcp-cimd-demo-client/code/frontend.ts","extension","actionData","errors"]