@mcp-ts/sdk 1.3.0 → 1.3.2

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

@@ -1,213 +1,214 @@
-/**
- * Simplified MCP Apps Hook - Fixed for no flickering
- *
- * The key insight: React component identity must be stable.
- * We return a stable McpAppRenderer component and separate metadata lookup.
- */
-
-import React, { useState, useEffect, useCallback, useRef, memo } from 'react';
-import { useAppHost } from './use-app-host.js';
-import type { SSEClient } from '../core/sse-client.js';
-
-export interface McpClient {
-  connections: Array<{
-    sessionId: string;
-    tools: Array<{
-      name: string;
-      mcpApp?: {
-        resourceUri: string;
-      };
-      _meta?: {
-        ui?: {
-          resourceUri?: string;
-        };
-        'ui/resourceUri'?: string;
-      };
-    }>;
-  }>;
-  sseClient?: SSEClient | null;
-}
-
-export interface McpAppMetadata {
-  toolName: string;
-  resourceUri: string;
-  sessionId: string;
-}
-
-interface McpAppRendererProps {
-  metadata: McpAppMetadata;
-  input?: Record<string, unknown>;
-  result?: unknown;
-  status: 'executing' | 'inProgress' | 'complete' | 'idle';
-  sseClient?: SSEClient | null;
-}
-
-/**
- * Stable renderer component - memoized to prevent flickering
- * Uses refs to track data changes and send updates to the iframe
- */
-const McpAppRenderer = memo(function McpAppRenderer({
-  metadata,
-  input,
-  result,
-  status,
-  sseClient,
-}: McpAppRendererProps) {
-  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;
-
-    host
-      .launch(metadata.resourceUri, metadata.sessionId)
-      .then(() => setIsLaunched(true))
-      .catch((err) => setError(err instanceof Error ? err : new Error(String(err))));
-  }, [host, metadata.resourceUri, metadata.sessionId]);
-
-  // Send tool input when available or when it changes
-  useEffect(() => {
-    if (!host || !isLaunched || !input) return;
-    
-    // Send if never sent, or if input changed
-    if (!sentInputRef.current || JSON.stringify(input) !== JSON.stringify(lastInputRef.current)) {
-      sentInputRef.current = true;
-      lastInputRef.current = input;
-      host.sendToolInput(input);
-    }
-  }, [host, isLaunched, input]);
-
-  // Send tool result when complete or when it changes
-  useEffect(() => {
-    if (!host || !isLaunched || 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;
-      const formattedResult =
-        typeof result === 'string'
-          ? { content: [{ type: 'text', text: result }] }
-          : result;
-      host.sendToolResult(formattedResult);
-    }
-  }, [host, isLaunched, result, status]);
-
-  // Reset sent flags when tool status resets to executing (new tool call)
-  useEffect(() => {
-    if (status === 'executing' && lastStatusRef.current !== 'executing') {
-      sentInputRef.current = false;
-      sentResultRef.current = false;
-    }
-    lastStatusRef.current = status;
-  }, [status]);
-
-  // Display errors
-  const displayError = error || hostError;
-  if (displayError) {
-    return (
-      <div className="p-4 bg-red-900/20 border border-red-700 rounded text-red-200">
-        Error: {displayError.message || String(displayError)}
-      </div>
-    );
-  }
-
-  return (
-    <div className="w-full border border-gray-700 rounded overflow-hidden bg-white min-h-96 my-2 relative">
-      <iframe
-        ref={iframeRef}
-        sandbox="allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-downloads"
-        className="w-full h-full min-h-96"
-        style={{ height: 'auto' }}
-        title="MCP App"
-      />
-      {!isLaunched && (
-        <div className="absolute inset-0 bg-gray-900/50 flex items-center justify-center pointer-events-none">
-          <div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
-        </div>
-      )}
-    </div>
-  );
-});
-
-/**
- * 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);
- *
- *   if (!metadata) return null;
- *   return (
- *     <McpAppRenderer
- *       metadata={metadata}
- *       input={props.args}
- *       result={props.result}
- *       status={props.status}
- *     />
- *   );
- * }
- * ```
- */
-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,
-            };
-          }
-        }
-      }
-
-      return undefined;
-    },
-    [mcpClient]
-  );
-
-  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;
-}
+/**
+ * MCP Apps Hook
+ *
+ * Provides utilities for rendering interactive UI components from MCP servers.
+ */
+
+import React, { useState, useEffect, useCallback, useRef, memo } from 'react';
+import { useAppHost } from './use-app-host.js';
+import type { SSEClient } from '../core/sse-client.js';
+
+export interface McpClient {
+  connections: Array<{
+    sessionId: string;
+    tools: Array<{
+      name: string;
+      mcpApp?: {
+        resourceUri: string;
+      };
+      _meta?: {
+        ui?: {
+          resourceUri?: string;
+        };
+        'ui/resourceUri'?: string;
+      };
+    }>;
+  }>;
+  sseClient?: SSEClient | null;
+}
+
+export interface McpAppMetadata {
+  toolName: string;
+  resourceUri: string;
+  sessionId: string;
+}
+
+interface McpAppRendererProps {
+  metadata: McpAppMetadata;
+  input?: Record<string, unknown>;
+  result?: unknown;
+  status: 'executing' | 'inProgress' | 'complete' | 'idle';
+  sseClient?: SSEClient | null;
+  /** Custom CSS class for the container */
+  className?: string;
+}
+
+/**
+ * Internal component that renders the MCP app in a sandboxed iframe
+ */
+const McpAppRenderer = memo(function McpAppRenderer({
+  metadata,
+  input,
+  result,
+  status,
+  sseClient,
+  className,
+}: McpAppRendererProps) {
+  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;
+
+    host
+      .launch(metadata.resourceUri, metadata.sessionId)
+      .then(() => setIsLaunched(true))
+      .catch((err) => setError(err instanceof Error ? err : new Error(String(err))));
+  }, [host, metadata.resourceUri, metadata.sessionId]);
+
+  // Send tool input when available or when it changes
+  useEffect(() => {
+    if (!host || !isLaunched || !input) return;
+    
+    // Send if never sent, or if input changed
+    if (!sentInputRef.current || JSON.stringify(input) !== JSON.stringify(lastInputRef.current)) {
+      sentInputRef.current = true;
+      lastInputRef.current = input;
+      host.sendToolInput(input);
+    }
+  }, [host, isLaunched, input]);
+
+  // Send tool result when complete or when it changes
+  useEffect(() => {
+    if (!host || !isLaunched || 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;
+      const formattedResult =
+        typeof result === 'string'
+          ? { content: [{ type: 'text', text: result }] }
+          : result;
+      host.sendToolResult(formattedResult);
+    }
+  }, [host, isLaunched, result, status]);
+
+  // Reset sent flags when tool status resets to executing (new tool call)
+  useEffect(() => {
+    if (status === 'executing' && lastStatusRef.current !== 'executing') {
+      sentInputRef.current = false;
+      sentResultRef.current = false;
+    }
+    lastStatusRef.current = status;
+  }, [status]);
+
+  // Display errors
+  const displayError = error || hostError;
+  if (displayError) {
+    return (
+      <div className={`p-4 bg-red-900/20 border border-red-700 rounded text-red-200 ${className || ''}`}>
+        Error: {displayError.message || String(displayError)}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`w-full border border-gray-700 rounded overflow-hidden bg-white min-h-96 my-2 relative ${className || ''}`}>
+      <iframe
+        ref={iframeRef}
+        sandbox="allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-downloads"
+        className="w-full h-full min-h-96"
+        style={{ height: 'auto' }}
+        title="MCP App"
+      />
+      {!isLaunched && (
+        <div className="absolute inset-0 bg-gray-900/50 flex items-center justify-center pointer-events-none">
+          <div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+        </div>
+      )}
+    </div>
+  );
+});
+
+/**
+ * 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);
+ *
+ *   if (!metadata) return null;
+ *   return (
+ *     <McpAppRenderer
+ *       metadata={metadata}
+ *       input={props.args}
+ *       result={props.result}
+ *       status={props.status}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+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,
+            };
+          }
+        }
+      }
+
+      return undefined;
+    },
+    [mcpClient]
+  );
+
+  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;
+}

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

@@ -75,7 +75,7 @@ export interface McpConnection {
   state: McpConnectionState;
   tools: ToolInfo[];
   error?: string;
-  connectedAt?: Date;
+  createdAt?: Date;
 }
 
 export interface McpClient {
@@ -271,16 +271,28 @@ export function useMcp(options: UseMcpOptions): McpClient {
           const existing = prev.find((c: McpConnection) => c.sessionId === event.sessionId);
           if (existing) {
             return prev.map((c: McpConnection) =>
-              c.sessionId === event.sessionId ? { ...c, state: event.state } : c
+              c.sessionId === event.sessionId ? {
+                ...c,
+                state: event.state,
+                // update createdAt if present in event, otherwise keep existing
+                createdAt: event.createdAt ? new Date(event.createdAt) : c.createdAt
+              } : c
             );
           } else {
+            // Fix: Don't add back disconnected sessions that were just removed
+            if (event.state === 'DISCONNECTED') {
+              return prev;
+            }
+
             return [
               ...prev,
               {
                 sessionId: event.sessionId,
                 serverId: event.serverId,
                 serverName: event.serverName,
+                serverUrl: event.serverUrl,
                 state: event.state,
+                createdAt: event.createdAt ? new Date(event.createdAt) : undefined,
                 tools: [],
               },
             ];
@@ -352,6 +364,7 @@ export function useMcp(options: UseMcpOptions): McpClient {
             serverUrl: s.serverUrl,
             transport: s.transport,
             state: 'VALIDATING' as McpConnectionState,
+            createdAt: new Date(s.createdAt),
             tools: [],
           }))
         );

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

@@ -69,7 +69,7 @@ export interface McpConnection {
     state: McpConnectionState;
     tools: ToolInfo[];
     error?: string;
-    connectedAt?: Date;
+    createdAt?: Date;
 }
 
 export interface McpClient {
@@ -213,13 +213,24 @@ export function useMcp(options: UseMcpOptions): McpClient {
                 const existing = connections.value.find((c) => c.sessionId === event.sessionId);
                 if (existing) {
                     const index = connections.value.indexOf(existing);
-                    connections.value[index] = { ...existing, state: event.state };
+                    connections.value[index] = {
+                        ...existing,
+                        state: event.state,
+                        // update createdAt if present in event, otherwise keep existing
+                        createdAt: event.createdAt ? new Date(event.createdAt) : existing.createdAt
+                    };
                 } else {
+                    // Fix: Don't add back disconnected sessions that were just removed
+                    if (event.state === 'DISCONNECTED') {
+                        break;
+                    }
+
                     connections.value = [...connections.value, {
                         sessionId: event.sessionId,
                         serverId: event.serverId,
                         serverName: event.serverName,
                         state: event.state,
+                        createdAt: event.createdAt ? new Date(event.createdAt) : undefined,
                         tools: [],
                     }];
                 }
@@ -288,6 +299,7 @@ export function useMcp(options: UseMcpOptions): McpClient {
                     serverUrl: s.serverUrl,
                     transport: s.transport,
                     state: 'VALIDATING' as McpConnectionState,
+                    createdAt: new Date(s.createdAt),
                     tools: [],
                 }));
             }

package/src/server/handlers/sse-handler.ts

@@ -225,6 +225,7 @@ export class SSEConnectionManager {
         serverName: s.serverName,
         serverUrl: s.serverUrl,
         transport: s.transportType,
+        createdAt: s.createdAt,
       })),
     };
   }
@@ -260,6 +261,7 @@ export class SSEConnectionManager {
       sessionId,
       serverId,
       serverName,
+      serverUrl,
       state: 'CONNECTING',
       previousState: 'DISCONNECTED',
       timestamp: Date.now(),
@@ -433,6 +435,7 @@ export class SSEConnectionManager {
       sessionId,
       serverId: session.serverId ?? 'unknown',
       serverName: session.serverName ?? 'Unknown',
+      serverUrl: session.serverUrl,
       state: 'VALIDATING',
       previousState: 'DISCONNECTED',
       timestamp: Date.now(),
@@ -495,6 +498,7 @@ export class SSEConnectionManager {
       sessionId,
       serverId: session.serverId ?? 'unknown',
       serverName: session.serverName ?? 'Unknown',
+      serverUrl: session.serverUrl,
       state: 'AUTHENTICATING',
       previousState: 'DISCONNECTED',
       timestamp: Date.now(),