@mcp-ts/sdk 1.3.9 → 1.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-ts/sdk",
-  "version": "1.3.9",
+  "version": "1.3.10",
   "publishConfig": {
     "access": "public"
   },

package/src/client/react/index.ts

@@ -10,7 +10,11 @@ export { useMcp, type UseMcpOptions, type McpClient, type McpConnection } from '
 export { useAppHost } from './use-app-host.js';
 
 // Simplified MCP Apps Hook - the main API
-export { useMcpApps } from './use-mcp-apps.js';
+export {
+  useMcpApps,
+  type McpAppRendererProps,
+  type McpAppMetadata,
+} from './use-mcp-apps.js';
 
 // Re-export shared types and client from main entry
 export * from '../index.js';

package/src/client/react/use-app-host.ts

@@ -5,10 +5,11 @@ import { AppHost } from '../core/app-host';
 /**
  * Hook to host an MCP App in a React component
  *
- * Optimized for instant loading:
- * - Creates AppHost synchronously
- * - Starts bridge connection immediately
- * - Returns host before connection completes (ready to call launch)
+ * Initialization is async but optimized for instant availability:
+ * - Constructor runs synchronously (sandbox + bridge handler setup)
+ * - Host is set in state immediately so launch() can be called right away
+ * - start() is a lightweight no-op reserved for future async pre-init work
+ * - The real async work (iframe load, bridge connect) happens inside launch()
  *
  * @param client - Connected SSEClient instance
  * @param iframeRef - Reference to the iframe element

package/src/client/react/use-mcp-apps.tsx

@@ -4,7 +4,15 @@
  * Provides utilities for rendering interactive UI components from MCP servers.
  */
 
-import React, { useState, useEffect, useCallback, useRef, memo } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  memo,
+  useMemo,
+  type MutableRefObject,
+} from 'react';
 import { useAppHost } from './use-app-host.js';
 import type { SSEClient } from '../core/sse-client.js';
 
@@ -33,8 +41,8 @@ export interface McpAppMetadata {
   sessionId: string;
 }
 
-interface McpAppRendererProps {
-  mcpClient: McpClient | null;
+/** Props for {@link useMcpApps}'s `McpAppRenderer` (client is supplied via the hook). */
+export interface McpAppRendererProps {
   name: string;
   input?: Record<string, unknown>;
   result?: unknown;
@@ -43,90 +51,68 @@ interface McpAppRendererProps {
   className?: string;
 }
 
-/**
- * Simplified MCP App renderer - users just pass tool name and data
- * Internal hook handles metadata lookup and SSE client retrieval
- */
-const McpAppRenderer = memo(function McpAppRenderer({
-  mcpClient,
+type McpAppViewProps = McpAppRendererProps & {
+  /**
+   * Ref avoids tying `McpAppRenderer` identity to `mcpClient`: when `connections` updates, `useMcp()` still
+   * returns a new object (correct for `useEffect` deps), but the iframe must not remount.
+   */
+  clientRef: MutableRefObject<McpClient | null>;
+};
+
+/** Renders one MCP App in a sandboxed iframe; reads the latest client from `clientRef` each render. */
+const McpAppView = memo(function McpAppView({
+  clientRef,
   name,
   input,
   result,
   status,
   className,
-}: McpAppRendererProps) {
-  const getAppMetadata = useCallback((): McpAppMetadata | undefined => {
-    if (!mcpClient) return undefined;
-
-    const extractedName = extractToolName(name);
-
-    for (const conn of mcpClient.connections) {
-      for (const tool of conn.tools) {
-        const candidateName = extractToolName(tool.name);
-        const resourceUri =
-          tool.mcpApp?.resourceUri ??
-          tool._meta?.ui?.resourceUri ??
-          tool._meta?.['ui/resourceUri'];
-
-        if (resourceUri && candidateName === extractedName) {
-          return {
-            toolName: candidateName,
-            resourceUri,
-            sessionId: conn.sessionId,
-          };
-        }
-      }
-    }
-
-    return undefined;
-  }, [mcpClient, name]);
-
-  const metadata = getAppMetadata();
+}: McpAppViewProps) {
+  const mcpClient = clientRef.current;
+  const metadata = getMcpAppMetadata(mcpClient, name);
   const sseClient = mcpClient?.sseClient ?? null;
+  const resourceUri = metadata?.resourceUri;
+  const appSessionId = metadata?.sessionId;
 
-  if (!metadata || !sseClient) {
-    return null;
-  }
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const { host, error: hostError } = useAppHost(sseClient as SSEClient, iframeRef);
   const [isLaunched, setIsLaunched] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
-  // Track which data has been sent to prevent duplicates
   const sentInputRef = useRef(false);
   const sentResultRef = useRef(false);
   const lastInputRef = useRef(input);
   const lastResultRef = useRef(result);
   const lastStatusRef = useRef(status);
 
-  // Launch the app when host is ready
   useEffect(() => {
-    if (!host || !metadata.resourceUri || !metadata.sessionId) return;
+    setIsLaunched(false);
+    setError(null);
+  }, [resourceUri, appSessionId]);
+
+  useEffect(() => {
+    if (!host || !resourceUri || !appSessionId) return;
 
     host
-      .launch(metadata.resourceUri, metadata.sessionId)
+      .launch(resourceUri, appSessionId)
       .then(() => setIsLaunched(true))
       .catch((err) => setError(err instanceof Error ? err : new Error(String(err))));
-  }, [host, metadata.resourceUri, metadata.sessionId]);
+  }, [host, resourceUri, appSessionId]);
 
-  // Send tool input when available or when it changes
   useEffect(() => {
-    if (!host || !isLaunched || !input) return;
-    
-    // Send if never sent, or if input changed
+    if (!host || !isLaunched || !resourceUri || !appSessionId || !input) return;
+
     if (!sentInputRef.current || JSON.stringify(input) !== JSON.stringify(lastInputRef.current)) {
       sentInputRef.current = true;
       lastInputRef.current = input;
       host.sendToolInput(input);
     }
-  }, [host, isLaunched, input]);
+  }, [host, isLaunched, input, resourceUri, appSessionId, name]);
 
-  // Send tool result when complete or when it changes
   useEffect(() => {
-    if (!host || !isLaunched || result === undefined) return;
+    if (!host || !isLaunched || !resourceUri || !appSessionId || result === undefined) return;
     if (status !== 'complete') return;
 
-    // Send if never sent, or if result changed
     if (!sentResultRef.current || JSON.stringify(result) !== JSON.stringify(lastResultRef.current)) {
       sentResultRef.current = true;
       lastResultRef.current = result;
@@ -136,9 +122,8 @@ const McpAppRenderer = memo(function McpAppRenderer({
           : result;
       host.sendToolResult(formattedResult);
     }
-  }, [host, isLaunched, result, status]);
+  }, [host, isLaunched, result, status, resourceUri, appSessionId, name]);
 
-  // Reset sent flags when tool status resets to executing (new tool call)
   useEffect(() => {
     if (status === 'executing' && lastStatusRef.current !== 'executing') {
       sentInputRef.current = false;
@@ -147,7 +132,10 @@ const McpAppRenderer = memo(function McpAppRenderer({
     lastStatusRef.current = status;
   }, [status]);
 
-  // Display errors
+  if (!metadata || !sseClient) {
+    return null;
+  }
+
   const displayError = error || hostError;
   if (displayError) {
     return (
@@ -176,72 +164,61 @@ const McpAppRenderer = memo(function McpAppRenderer({
 });
 
 /**
- * Simple hook to get MCP app metadata
- *
- * @param mcpClient - The MCP client from useMcp() or context
- * @returns Object with getAppMetadata function and McpAppRenderer component
- *
- * @example
- * ```tsx
- * function ToolRenderer(props) {
- *   const { getAppMetadata, McpAppRenderer } = useMcpApps(mcpClient);
- *   const metadata = getAppMetadata(props.name);
+ * Helpers scoped to one `mcpClient`. Pass the client here once; `McpAppRenderer` only needs per-tool props (`name`, `input`, `result`, `status`).
  *
- *   if (!metadata) return null;
- *   return (
- *     <McpAppRenderer
- *       metadata={metadata}
- *       input={props.args}
- *       result={props.result}
- *       status={props.status}
- *     />
- *   );
- * }
- * ```
+ * @param mcpClient - From `useMcp()` or context (for example `useMcpContext()`).
  */
 export function useMcpApps(mcpClient: McpClient | null) {
-  /**
-   * Get MCP app metadata for a tool name
-   * This is fast and can be called on every render
-   */
-  const getAppMetadata = useCallback(
-    (toolName: string): McpAppMetadata | undefined => {
-      if (!mcpClient) return undefined;
-
-      const extractedName = extractToolName(toolName);
-
-      for (const conn of mcpClient.connections) {
-        for (const tool of conn.tools) {
-          const candidateName = extractToolName(tool.name);
-          // Check both locations: direct mcpApp or _meta.ui
-          const resourceUri =
-            tool.mcpApp?.resourceUri ??
-            tool._meta?.ui?.resourceUri ??
-            tool._meta?.['ui/resourceUri'];
-
-          if (resourceUri && candidateName === extractedName) {
-            return {
-              toolName: candidateName,
-              resourceUri,
-              sessionId: conn.sessionId,
-            };
-          }
-        }
-      }
+  // Stable `McpAppRenderer` type: parent re-renders and `connections` updates must not remount the iframe.
+  const clientRef = useRef(mcpClient);
+  clientRef.current = mcpClient;
 
-      return undefined;
-    },
-    [mcpClient]
+  const getAppMetadata = useCallback(
+    (toolName: string) => getMcpAppMetadata(clientRef.current, toolName),
+    []
   );
 
+  const McpAppRenderer = useMemo(() => {
+    const Renderer = memo(function McpAppRenderer(props: McpAppRendererProps) {
+      return <McpAppView clientRef={clientRef} {...props} />;
+    });
+    Renderer.displayName = 'McpAppRenderer';
+    return Renderer;
+  }, []);
+
   return { getAppMetadata, McpAppRenderer };
 }
 
-/**
- * Extract the base tool name, removing any prefixes
- */
 function extractToolName(fullName: string): string {
-  // Handle patterns like "tool_abc123_get-time" -> "get-time"
   const match = fullName.match(/(?:tool_[^_]+_)?(.+)$/);
   return match?.[1] || fullName;
 }
+
+function getMcpAppMetadata(
+  mcpClient: McpClient | null,
+  toolName: string
+): McpAppMetadata | undefined {
+  if (!mcpClient) return undefined;
+
+  const extractedName = extractToolName(toolName);
+
+  for (const conn of mcpClient.connections) {
+    for (const tool of conn.tools) {
+      const candidateName = extractToolName(tool.name);
+      const resourceUri =
+        tool.mcpApp?.resourceUri ??
+        tool._meta?.ui?.resourceUri ??
+        tool._meta?.['ui/resourceUri'];
+
+      if (resourceUri && candidateName === extractedName) {
+        return {
+          toolName: candidateName,
+          resourceUri,
+          sessionId: conn.sessionId,
+        };
+      }
+    }
+  }
+
+  return undefined;
+}

package/src/client/react/use-mcp.ts

@@ -4,7 +4,7 @@
  * Based on Cloudflare's agents pattern
  */
 
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import { SSEClient, type SSEClientOptions } from '../core/sse-client';
 import type { McpConnectionEvent, McpConnectionState } from '../../shared/events';
 import type {
@@ -227,6 +227,8 @@ export function useMcp(options: UseMcpOptions): McpClient {
     'disconnected'
   );
   const [isInitializing, setIsInitializing] = useState(false);
+  /** Mirrored from `clientRef` so the public `McpClient` object can be memoized when the instance is ready. */
+  const [sseClient, setSseClient] = useState<SSEClient | null>(null);
 
   /**
    * Initialize SSE client
@@ -258,6 +260,7 @@ export function useMcp(options: UseMcpOptions): McpClient {
 
     const client = new SSEClient(clientOptions);
     clientRef.current = client;
+    setSseClient(client);
 
     if (autoConnect) {
       client.connect();
@@ -615,27 +618,52 @@ export function useMcp(options: UseMcpOptions): McpClient {
     [getConnection]
   );
 
-  return {
-    connections,
-    status,
-    isInitializing,
-    connect,
-    disconnect,
-    getConnection,
-    getConnectionByServerId,
-    isServerConnected,
-    getTools,
-    refresh,
-    connectSSE,
-    disconnectSSE,
-    finishAuth,
-    resumeAuth,
-    callTool,
-    listTools,
-    listPrompts,
-    getPrompt,
-    listResources,
-    readResource,
-    sseClient: clientRef.current,
-  };
+  return useMemo(
+    () => ({
+      connections,
+      status,
+      isInitializing,
+      connect,
+      disconnect,
+      getConnection,
+      getConnectionByServerId,
+      isServerConnected,
+      getTools,
+      refresh,
+      connectSSE,
+      disconnectSSE,
+      finishAuth,
+      resumeAuth,
+      callTool,
+      listTools,
+      listPrompts,
+      getPrompt,
+      listResources,
+      readResource,
+      sseClient,
+    }),
+    [
+      connections,
+      status,
+      isInitializing,
+      connect,
+      disconnect,
+      getConnection,
+      getConnectionByServerId,
+      isServerConnected,
+      getTools,
+      refresh,
+      connectSSE,
+      disconnectSSE,
+      finishAuth,
+      resumeAuth,
+      callTool,
+      listTools,
+      listPrompts,
+      getPrompt,
+      listResources,
+      readResource,
+      sseClient,
+    ]
+  );
 }

package/src/server/storage/crypto.ts

@@ -0,0 +1,92 @@
+import { randomBytes, createCipheriv, createDecipheriv } from 'node:crypto';
+
+const ALGORITHM = 'aes-256-gcm';
+const IV_LENGTH = 12;
+const ENCRYPTION_PREFIX = 'enc:1:';
+
+let warningLogged = false;
+
+function getKey(): Buffer | null {
+    const keyString = process.env.STORAGE_ENCRYPTION_KEY;
+    if (!keyString) return null;
+    
+    // Ensure key is 32 bytes (256 bits)
+    if (keyString.length === 64) {
+        return Buffer.from(keyString, 'hex');
+    } else {
+        const keyBuffer = Buffer.alloc(32);
+        keyBuffer.write(keyString, 0, 32, 'utf-8');
+        return keyBuffer;
+    }
+}
+
+/**
+ * Encrypts an object into a secure string.
+ * Falls back to returning the original object if the encryption key is missing or encryption fails.
+ */
+export function encryptObject(data: any): any {
+    if (data === undefined || data === null) return data;
+    
+    const key = getKey();
+    if (!key) {
+        if (!warningLogged) {
+            console.warn('[mcp-ts][Storage] WARNING: STORAGE_ENCRYPTION_KEY is not set. Saving sensitive data in plain-text.');
+            warningLogged = true;
+        }
+        return data; // Fallback to plain-text
+    }
+
+    try {
+        const text = JSON.stringify(data);
+        const iv = randomBytes(IV_LENGTH);
+        const cipher = createCipheriv(ALGORITHM, key, iv);
+        
+        let encrypted = cipher.update(text, 'utf-8', 'hex');
+        encrypted += cipher.final('hex');
+        const authTag = cipher.getAuthTag().toString('hex');
+        
+        return `${ENCRYPTION_PREFIX}${iv.toString('hex')}:${authTag}:${encrypted}`;
+    } catch (e) {
+        console.error('[mcp-ts][Storage] Encryption failed, falling back to plain-text.', e);
+        return data;
+    }
+}
+
+/**
+ * Decrypts a secure string back into an object.
+ * Returns the original data if it is unencrypted or if decryption fails.
+ */
+export function decryptObject(data: any): any {
+    if (data === undefined || data === null) return data;
+    if (typeof data !== 'string' || !data.startsWith(ENCRYPTION_PREFIX)) {
+        return data; // Already unencrypted or old plain-text data
+    }
+
+    const key = getKey();
+    if (!key) {
+        console.warn('[mcp-ts][Storage] WARNING: Found encrypted data but STORAGE_ENCRYPTION_KEY is missing. Returning raw encrypted string.');
+        return data;
+    }
+
+    try {
+        const parts = data.split(':');
+        if (parts.length !== 5) {
+            return data;
+        }
+
+        const iv = Buffer.from(parts[2], 'hex');
+        const authTag = Buffer.from(parts[3], 'hex');
+        const encryptedText = parts[4];
+
+        const decipher = createDecipheriv(ALGORITHM, key, iv);
+        decipher.setAuthTag(authTag);
+
+        let decrypted = decipher.update(encryptedText, 'hex', 'utf-8');
+        decrypted += decipher.final('utf-8');
+
+        return JSON.parse(decrypted);
+    } catch (e) {
+        console.error('[mcp-ts][Storage] Decryption failed.', e);
+        return data;
+    }
+}

package/src/server/storage/supabase-backend.ts

@@ -2,6 +2,7 @@ import type { SupabaseClient } from '@supabase/supabase-js';
 import { StorageBackend, SessionData } from './types.js';
 import { SESSION_TTL_SECONDS } from '../../shared/constants.js';
 import { generateSessionId } from '../../shared/utils.js';
+import { encryptObject, decryptObject } from './crypto.js';
 
 export class SupabaseStorageBackend implements StorageBackend {
     private readonly DEFAULT_TTL = SESSION_TTL_SECONDS;
@@ -43,10 +44,10 @@ export class SupabaseStorageBackend implements StorageBackend {
             callbackUrl: row.callback_url,
             createdAt: new Date(row.created_at).getTime(),
             identity: row.identity,
-            headers: row.headers,
+            headers: decryptObject(row.headers),
             active: row.active,
             clientInformation: row.client_information,
-            tokens: row.tokens,
+            tokens: decryptObject(row.tokens),
             codeVerifier: row.code_verifier,
             clientId: row.client_id,
         };
@@ -71,10 +72,10 @@ export class SupabaseStorageBackend implements StorageBackend {
                 callback_url: session.callbackUrl,
                 created_at: new Date(session.createdAt || Date.now()).toISOString(),
                 identity: identity,
-                headers: session.headers,
+                headers: encryptObject(session.headers),
                 active: session.active ?? false,
                 client_information: session.clientInformation,
-                tokens: session.tokens,
+                tokens: encryptObject(session.tokens),
                 code_verifier: session.codeVerifier,
                 client_id: session.clientId,
                 expires_at: expiresAt
@@ -105,9 +106,9 @@ export class SupabaseStorageBackend implements StorageBackend {
         if ('transportType' in data) updateData.transport_type = data.transportType;
         if ('callbackUrl' in data) updateData.callback_url = data.callbackUrl;
         if ('active' in data) updateData.active = data.active;
-        if ('headers' in data) updateData.headers = data.headers;
+        if ('headers' in data) updateData.headers = encryptObject(data.headers);
         if ('clientInformation' in data) updateData.client_information = data.clientInformation;
-        if ('tokens' in data) updateData.tokens = data.tokens;
+        if ('tokens' in data) updateData.tokens = encryptObject(data.tokens);
         if ('codeVerifier' in data) updateData.code_verifier = data.codeVerifier;
         if ('clientId' in data) updateData.client_id = data.clientId;