[{"_1":2,"_175":-5,"_176":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","e3ca0a77ab07ff2ce3097208ffd6aa0e378d3c47","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_150":151,"_172":173,"_174":-5},"handle","AIWB","name","Chat","path","frontend/utils/MCPClient.ts","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":20,"_107":108,"_109":-5,"_110":-5,"_12":111,"_112":-5,"_113":20,"_114":-5,"_115":32,"_14":116,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":118,"_23":126,"_129":130,"_132":133,"_149":20},"id","15aeb5e4-41a5-11f0-97a8-76b3cceeab13","createdAt",["D",1749083773738],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","910c5de7-d7ef-46a2-9233-a36b504c0356","pinnedFileId","pinPreview","screenshotVersion","likeCount","3d0667b8-98c5-4e4b-9dab-f0c5e3bd2418","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_127":128},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycU91M051U0JoMFZtclVEaFY2MDNCUmlFbTYifQ","org",{"_93":94,"_131":128},"avatar","branch",{"_134":135,"_95":43,"_101":136,"_137":102,"_138":139,"_140":141,"_142":108,"_143":144,"_145":146,"_147":96,"_148":94},"version",6,"15b10952-41a5-11f0-97a8-76b3cceeab13","projectId","forkedBranchId","7e246fe2-3cdc-11f0-aa89-9e149126039e","forkedBranchVersion",583,"forkedProjectPrivacy","forkedProjectId","7e24160a-3cdc-11f0-aa89-9e149126039e","forkedProjectOrgId","0630d977-f678-453e-926c-52043293f59f","projectName","userHandle","isOwned","file",{"_101":152,"_95":153,"_154":155,"_156":157,"_158":136,"_159":135,"_160":161,"_103":162,"_134":32,"_163":164,"_165":166,"_167":20,"_168":-5,"_97":169},"cda50fd8-45fe-11f0-bcbd-76b3cceeab13","MCPClient.ts","fileId","cda51046-45fe-11f0-bcbd-76b3cceeab13","parentId","f5847123-3790-4918-b8db-093079142016","branchId","branchVersion","latest",true,["D",1749562112245],"fileType","script","content","/**\n * Comprehensive MCP (Model Context Protocol) Client for Browser\n * Supports multiple transport mechanisms (HTTP, SSE, WebSocket)\n */\nimport type { MCPPrompt, MCPTool } from \"../shared/types.ts\";\n\n// Type definitions for MCP protocol\ninterface JsonRpcRequest {\n jsonrpc: \"2.0\";\n id: string | number;\n method: string;\n params?: any;\n}\n\ninterface JsonRpcResponse {\n jsonrpc: \"2.0\";\n id: string | number;\n result?: any;\n error?: JsonRpcError;\n}\n\ninterface JsonRpcError {\n code: number;\n message: string;\n data?: any;\n}\n\ninterface JsonRpcNotification {\n jsonrpc: \"2.0\";\n method: string;\n params?: any;\n}\n\ntype JsonRpcMessage = JsonRpcRequest | JsonRpcResponse | JsonRpcNotification;\n\n// MCP specific types\ninterface MCPCapabilities {\n tools?: boolean;\n prompts?: boolean;\n resources?: boolean;\n logging?: boolean;\n}\n\ninterface MCPInitializeParams {\n protocolVersion: string;\n capabilities: MCPCapabilities;\n clientInfo: {\n name: string;\n version: string;\n };\n}\n\ninterface MCPInitializeResult {\n protocolVersion: string;\n capabilities: MCPCapabilities;\n serverInfo: {\n name: string;\n version: string;\n };\n}\n\n// Transport types\ntype TransportType = \"http\" | \"sse\" | \"websocket\";\n\ninterface TransportConfig {\n type: TransportType;\n endpoint: string;\n headers?: Record;\n}\n\n// Abstract transport interface\ninterface Transport {\n connect(): Promise;\n disconnect(): void;\n sendRequest(request: JsonRpcRequest): Promise;\n onMessage(handler: (message: JsonRpcMessage) => void): void;\n onError(handler: (error: Error) => void): void;\n onClose(handler: () => void): void;\n}\n\n/**\n * HTTP Transport - Simple request/response\n */\nclass HttpTransport implements Transport {\n private messageHandler?: (message: JsonRpcMessage) => void;\n private errorHandler?: (error: Error) => void;\n private closeHandler?: () => void;\n\n constructor(\n private endpoint: string,\n private headers: Record = {},\n ) {}\n\n async connect(): Promise {\n // HTTP doesn't need persistent connection\n }\n\n disconnect(): void {\n // HTTP doesn't need explicit disconnect\n }\n\n async sendRequest(request: JsonRpcRequest): Promise {\n try {\n const response = await fetch(this.endpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...this.headers,\n },\n body: JSON.stringify(request),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n return data as JsonRpcResponse;\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n throw error;\n }\n }\n\n onMessage(handler: (message: JsonRpcMessage) => void): void {\n this.messageHandler = handler;\n }\n\n onError(handler: (error: Error) => void): void {\n this.errorHandler = handler;\n }\n\n onClose(handler: () => void): void {\n this.closeHandler = handler;\n }\n}\n\n/**\n * SSE + HTTP Transport - Server-sent events for notifications, HTTP for requests\n */\nclass SseHttpTransport implements Transport {\n private eventSource?: EventSource;\n private messageHandler?: (message: JsonRpcMessage) => void;\n private errorHandler?: (error: Error) => void;\n private closeHandler?: () => void;\n\n constructor(\n private httpEndpoint: string,\n private sseEndpoint: string,\n private headers: Record = {},\n ) {}\n\n async connect(): Promise {\n return new Promise((resolve, reject) => {\n this.eventSource = new EventSource(this.sseEndpoint);\n\n this.eventSource.onopen = () => {\n resolve();\n };\n\n this.eventSource.onmessage = (event) => {\n try {\n const message = JSON.parse(event.data) as JsonRpcMessage;\n if (this.messageHandler) {\n this.messageHandler(message);\n }\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n }\n };\n\n this.eventSource.onerror = (error) => {\n if (this.errorHandler) {\n this.errorHandler(new Error(\"SSE connection error\"));\n }\n if (this.eventSource?.readyState === EventSource.CLOSED) {\n if (this.closeHandler) {\n this.closeHandler();\n }\n reject(new Error(\"SSE connection failed\"));\n }\n };\n });\n }\n\n disconnect(): void {\n if (this.eventSource) {\n this.eventSource.close();\n if (this.closeHandler) {\n this.closeHandler();\n }\n }\n }\n\n async sendRequest(request: JsonRpcRequest): Promise {\n try {\n const response = await fetch(this.httpEndpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...this.headers,\n },\n body: JSON.stringify(request),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n return data as JsonRpcResponse;\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n throw error;\n }\n }\n\n onMessage(handler: (message: JsonRpcMessage) => void): void {\n this.messageHandler = handler;\n }\n\n onError(handler: (error: Error) => void): void {\n this.errorHandler = handler;\n }\n\n onClose(handler: () => void): void {\n this.closeHandler = handler;\n }\n}\n\n/**\n * WebSocket Transport - Full duplex communication\n */\nclass WebSocketTransport implements Transport {\n private ws?: WebSocket;\n private messageHandler?: (message: JsonRpcMessage) => void;\n private errorHandler?: (error: Error) => void;\n private closeHandler?: () => void;\n private pendingRequests = new Map void>();\n\n constructor(private endpoint: string) {}\n\n async connect(): Promise {\n return new Promise((resolve, reject) => {\n this.ws = new WebSocket(this.endpoint);\n\n this.ws.onopen = () => {\n resolve();\n };\n\n this.ws.onmessage = (event) => {\n try {\n const message = JSON.parse(event.data) as JsonRpcMessage;\n\n // Handle responses to our requests\n if (\"id\" in message && message.id !== undefined) {\n const handler = this.pendingRequests.get(message.id);\n if (handler) {\n this.pendingRequests.delete(message.id);\n handler(message as JsonRpcResponse);\n return;\n }\n }\n\n // Handle notifications or other messages\n if (this.messageHandler) {\n this.messageHandler(message);\n }\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n }\n };\n\n this.ws.onerror = (event) => {\n const error = new Error(\"WebSocket error\");\n if (this.errorHandler) {\n this.errorHandler(error);\n }\n reject(error);\n };\n\n this.ws.onclose = () => {\n if (this.closeHandler) {\n this.closeHandler();\n }\n };\n });\n }\n\n disconnect(): void {\n if (this.ws) {\n this.ws.close();\n }\n }\n\n async sendRequest(request: JsonRpcRequest): Promise {\n return new Promise((resolve, reject) => {\n if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {\n reject(new Error(\"WebSocket not connected\"));\n return;\n }\n\n this.pendingRequests.set(request.id, resolve);\n this.ws.send(JSON.stringify(request));\n\n // Timeout after 30 seconds\n setTimeout(() => {\n if (this.pendingRequests.has(request.id)) {\n this.pendingRequests.delete(request.id);\n reject(new Error(\"Request timeout\"));\n }\n }, 30000);\n });\n }\n\n onMessage(handler: (message: JsonRpcMessage) => void): void {\n this.messageHandler = handler;\n }\n\n onError(handler: (error: Error) => void): void {\n this.errorHandler = handler;\n }\n\n onClose(handler: () => void): void {\n this.closeHandler = handler;\n }\n}\n\n// Event types\ntype MCPEventType = \"connected\" | \"disconnected\" | \"error\" | \"notification\" | \"message\";\n\ninterface MCPEventHandlers {\n connected?: () => void;\n disconnected?: (reason?: string) => void;\n error?: (error: Error) => void;\n notification?: (method: string, params: any) => void;\n message?: (message: JsonRpcMessage) => void;\n}\n\n/**\n * MCP Client with pluggable transport support\n */\nexport class MCPClient {\n private transport: Transport;\n private eventHandlers: MCPEventHandlers = {};\n private requestId = 0;\n private initialized = false;\n private capabilities: MCPCapabilities = {};\n private serverInfo: { name: string; version: string } | null = null;\n private tools: MCPTool[] = [];\n private prompts: MCPPrompt[] = [];\n\n isInitialized(): boolean {\n return this.initialized;\n }\n\n getCapabilities(): MCPCapabilities {\n return this.capabilities;\n }\n constructor(\n config: TransportConfig,\n private clientInfo = { name: \"MCP Browser Client\", version: \"1.0.0\" },\n ) {\n // Create appropriate transport based on config\n switch (config.type) {\n case \"http\":\n this.transport = new HttpTransport(config.endpoint, config.headers);\n break;\n case \"sse\":\n // SSE config expects endpoint to have both HTTP and SSE URLs\n const [httpUrl, sseUrl] = config.endpoint.split(\",\");\n if (!httpUrl || !sseUrl) {\n throw new Error(\"SSE transport requires \\\"httpUrl,sseUrl\\\" format\");\n }\n this.transport = new SseHttpTransport(httpUrl, sseUrl, config.headers);\n break;\n case \"websocket\":\n this.transport = new WebSocketTransport(config.endpoint);\n break;\n default:\n throw new Error(`Unknown transport type: ${config.type}`);\n }\n\n // Set up transport event handlers\n this.transport.onMessage((message) => this.handleMessage(message));\n this.transport.onError((error) => this.emit(\"error\", error));\n this.transport.onClose(() => {\n this.emit(\"disconnected\");\n this.initialized = false;\n });\n }\n\n /**\n * Connect to the MCP server\n */\n async connect(): Promise {\n await this.transport.connect();\n this.emit(\"connected\");\n await this.initialize();\n }\n\n /**\n * Disconnect from the MCP server\n */\n disconnect(): void {\n this.transport.disconnect();\n this.initialized = false;\n }\n\n /**\n * Initialize the MCP session\n */\n private async initialize(): Promise {\n const params: MCPInitializeParams = {\n protocolVersion: \"2025-03-26\",\n capabilities: {\n tools: true,\n prompts: true,\n resources: true,\n logging: true,\n },\n clientInfo: this.clientInfo,\n };\n\n const result = await this.sendRequest(\"initialize\", params);\n this.capabilities = result.capabilities;\n this.serverInfo = result.serverInfo;\n this.initialized = true;\n\n // Send initialized notification\n // this.sendNotification(\"initialized\", {});\n }\n\n /**\n * Send a JSON-RPC request\n */\n async sendRequest(method: string, params?: any): Promise {\n const id = ++this.requestId;\n const request: JsonRpcRequest = {\n jsonrpc: \"2.0\",\n id,\n method,\n params,\n };\n\n const response = await this.transport.sendRequest(request);\n\n if (response.error) {\n throw new Error(response.error.message);\n }\n\n return response.result as T;\n }\n\n /**\n * Send a JSON-RPC notification (no response expected)\n */\n async sendNotification(method: string, params?: any): Promise {\n const notification: JsonRpcNotification = {\n jsonrpc: \"2.0\",\n method: `notifications/${method}`,\n params,\n };\n\n // For HTTP transport, notifications are just requests without expecting response\n // For streaming transports, they're sent without an ID\n if (this.transport instanceof HttpTransport) {\n await fetch((this.transport as any).endpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...(this.transport as any).headers,\n },\n body: JSON.stringify(notification),\n });\n } else {\n // For WebSocket/SSE, we can send without expecting response\n await this.transport.sendRequest(notification as any);\n }\n }\n\n /**\n * Register event handlers\n */\n on(event: MCPEventType, handler: Function): void {\n switch (event) {\n case \"connected\":\n this.eventHandlers.connected = handler as () => void;\n break;\n case \"disconnected\":\n this.eventHandlers.disconnected = handler as (reason?: string) => void;\n break;\n case \"error\":\n this.eventHandlers.error = handler as (error: Error) => void;\n break;\n case \"notification\":\n this.eventHandlers.notification = handler as (method: string, params: any) => void;\n break;\n case \"message\":\n this.eventHandlers.message = handler as (message: JsonRpcMessage) => void;\n break;\n }\n }\n\n /**\n * Handle incoming messages\n */\n private handleMessage(message: JsonRpcMessage): void {\n this.emit(\"message\", message);\n\n // Handle notifications\n if (\"method\" in message && !(\"id\" in message)) {\n this.emit(\"notification\", message.method, message.params);\n }\n }\n\n /**\n * Emit events\n */\n private emit(event: \"connected\"): void;\n private emit(event: \"disconnected\", reason?: string): void;\n private emit(event: \"error\", error: Error): void;\n private emit(event: \"notification\", method: string, params: any): void;\n private emit(event: \"message\", message: JsonRpcMessage): void;\n private emit(event: MCPEventType, ...args: any[]): void {\n const handler = this.eventHandlers[event];\n if (handler) {\n handler(...args);\n }\n }\n\n // ... (All the MCP methods remain the same: listTools, callTool, etc.)\n\n /**\n * List available tools\n */\n async listTools(): Promise {\n if (!this.capabilities.tools) {\n throw new Error(\"Server does not support tools capability\");\n }\n if (this.tools && this.tools.length > 0) {\n return this.tools;\n }\n const result = await this.sendRequest<{ tools: any[] }>(\"tools/list\");\n this.tools = result.tools;\n return result.tools;\n }\n\n /**\n * Call a tool\n */\n async callTool(name: string, args: any): Promise {\n if (!this.capabilities.tools) {\n throw new Error(\"Server does not support tools capability\");\n }\n return this.sendRequest(\"tools/call\", { name, arguments: args });\n }\n\n /**\n * List available prompts\n */\n async listPrompts(): Promise {\n if (!this.capabilities.prompts) {\n throw new Error(\"Server does not support prompts capability\");\n }\n\n if (this.propmts) {\n return this.propmts;\n }\n const result = await this.sendRequest<{ prompts: any[] }>(\"prompts/list\");\n this.prompts = result.prompts;\n return result.prompts;\n }\n\n /**\n * Get a prompt\n */\n async getPrompt(name: string, args?: Record): Promise {\n if (!this.capabilities.prompts) {\n throw new Error(\"Server does not support prompts capability\");\n }\n const result = await this.sendRequest<{ prompt: string }>(\"prompts/get\", {\n name,\n arguments: args,\n });\n return result.prompt;\n }\n\n /**\n * List available resources\n */\n async listResources(): Promise {\n if (!this.capabilities.resources) {\n throw new Error(\"Server does not support resources capability\");\n }\n const result = await this.sendRequest<{ resources: any[] }>(\"resources/list\");\n return result.resources;\n }\n\n /**\n * Read a resource\n */\n async readResource(uri: string): Promise {\n if (!this.capabilities.resources) {\n throw new Error(\"Server does not support resources capability\");\n }\n const result = await this.sendRequest<{ contents: string }>(\"resources/read\", { uri });\n return result.contents;\n }\n\n /**\n * Send a log message\n */\n async log(level: \"debug\" | \"info\" | \"warning\" | \"error\", message: string, data?: any): Promise {\n if (!this.capabilities.logging) {\n throw new Error(\"Server does not support logging capability\");\n }\n await this.sendNotification(\"logging/log\", { level, message, data });\n }\n}\n\n// Example usage with different transports:\n/*\n// 1. Simple HTTP transport (request/response only)\nconst httpClient = new MCPClient({\n type: 'http',\n endpoint: 'https://api.example.com/mcp',\n headers: { 'Authorization': 'Bearer token' }\n});\n\n// 2. SSE + HTTP transport (server can push notifications)\nconst sseClient = new MCPClient({\n type: 'sse',\n endpoint: 'https://api.example.com/mcp,https://api.example.com/mcp/stream',\n headers: { 'Authorization': 'Bearer token' }\n});\n\n// 3. WebSocket transport (full duplex)\nconst wsClient = new MCPClient({\n type: 'websocket',\n endpoint: 'wss://api.example.com/mcp'\n});\n\n// Usage is the same regardless of transport\nawait httpClient.connect();\nconst tools = await httpClient.listTools();\nconst result = await httpClient.callTool('calculator', { op: 'add', a: 5, b: 3 });\n*/","deleted","label",[170,171,153],"frontend","utils","permalink","https://www.val.town/x/AIWB/Chat/code/frontend/utils/MCPClient.ts","extension","actionData","errors"]