@mcp-ts/sdk 1.2.0 → 1.3.1

package/src/adapters/agui-middleware.ts

@@ -20,32 +20,11 @@ import {
 } from '@ag-ui/client';
 import { type AguiTool, cleanSchema } from './agui-adapter.js';
 
-/** New event type for MCP UI triggers */
-export const MCP_APP_UI_EVENT = 'mcp-apps-ui';
-/**
- * MCP Apps UI trigger event.
- *
- * IMPORTANT: This must be emitted as an AG-UI CustomEvent so subscribers
- * (e.g. CopilotKit `onCustomEvent`) can receive it.
- */
-export interface McpAppUiEventPayload {
-    toolCallId: string;
-    resourceUri: string;
-    sessionId?: string;
-    toolName: string;
-    result?: any;
-}
-
 /** Tool execution result for continuation */
 interface ToolResult {
     toolCallId: string;
     toolName: string;
     result: string;
-    /**
-     * Raw result object (if available).
-     * Used to preserve metadata (e.g. `_meta`) that is lost in the stringified `result`.
-     */
-    rawResult?: any;
     messageId: string;
 }
 
@@ -58,43 +37,32 @@ interface RunState {
     error: boolean;
 }
 
-/**
- * Configuration for McpMiddleware
- */
-export interface McpMiddlewareConfig {
-    /** Pre-loaded tools with handlers (required) */
-    tools: AguiTool[];
-}
+/**
+ * Configuration for McpMiddleware
+ */
+export interface McpMiddlewareConfig {
+    /** Pre-loaded tools with handlers (required) */
+    tools: AguiTool[];
+}
 
 /**
  * AG-UI Middleware that executes MCP tools server-side.
  */
-export class McpMiddleware extends Middleware {
-    private tools: AguiTool[];
-    private toolSchemas: Tool[];
-
-    constructor(config: McpMiddlewareConfig) {
-        super();
-        this.tools = config.tools;
-        this.toolSchemas = this.tools.map((t: AguiTool) => ({
-            name: t.name,
-            description: t.description,
-            parameters: cleanSchema(t.parameters),
-            _meta: t._meta, // Include _meta in the tool definition passed to the agent
-        }));
-    }
-
-    /**
-     * Extract base tool name from prefixed format for event emission
-     * e.g., "tool_abc123_get-time" -> "get-time"
-     */
-    private getBaseToolName(toolName: string): string {
-        const match = toolName.match(/^tool_[^_]+_(.+)$/);
-        return match ? match[1] : toolName;
-    }
+export class McpMiddleware extends Middleware {
+    private tools: AguiTool[];
+    private toolSchemas: Tool[];
+
+    constructor(config: McpMiddlewareConfig) {
+        super();
+        this.tools = config.tools;
+        this.toolSchemas = this.tools.map((t: AguiTool) => ({
+            name: t.name,
+            description: t.description,
+            parameters: cleanSchema(t.parameters),
+        }));
+    }
 
     private isMcpTool(toolName: string): boolean {
-        // Direct comparison - tool names should match as-is
         return this.tools.some(t => t.name === toolName);
     }
 
@@ -119,31 +87,22 @@ export class McpMiddleware extends Middleware {
         }
     }
 
-    private async executeTool(toolName: string, args: Record<string, any>): Promise<{ resultStr: string, rawResult?: any }> {
+    private async executeTool(toolName: string, args: Record<string, any>): Promise<string> {
         const tool = this.tools.find(t => t.name === toolName);
         if (!tool?.handler) {
-            return { resultStr: `Error: Tool ${tool ? 'has no handler' : 'not found'}: ${toolName}` };
+            return `Error: Tool ${tool ? 'has no handler' : 'not found'}: ${toolName}`;
         }
 
-        try {
-            // Result can be a string (legacy) or an object (MCP Result with content array)
-            const result = await tool.handler(args);
-
-            let resultStr: string;
-
-            if (typeof result === 'string') {
-                resultStr = result;
-            } else if (result && typeof result === 'object') {
-                // Determine if we should preserve the object structure (e.g. for MCP Tool Results)
-                resultStr = JSON.stringify(result);
-            } else {
-                resultStr = String(result);
-            }
-
-            return { resultStr, rawResult: result };
+        try {
+            console.log(`[McpMiddleware] Executing tool: ${toolName}`, args);
+            const result = await tool.handler(args);
+            const resultStr = typeof result === 'string' ? result : JSON.stringify(result);
+
+            console.log(`[McpMiddleware] Tool result:`, resultStr.slice(0, 200));
+            return resultStr;
         } catch (error: any) {
             console.error(`[McpMiddleware] Error executing tool:`, error);
-            return { resultStr: `Error: ${error.message || String(error)}` };
+            return `Error: ${error.message || String(error)}`;
         }
     }
 
@@ -176,6 +135,7 @@ export class McpMiddleware extends Middleware {
                 if (this.isMcpTool(e.toolCallName)) {
                     pendingMcpCalls.add(e.toolCallId);
                 }
+                console.log(`[McpMiddleware] TOOL_CALL_START: ${e.toolCallName} (id: ${e.toolCallId}, isMCP: ${this.isMcpTool(e.toolCallName)})`);
             }
         }
 
@@ -188,7 +148,8 @@ export class McpMiddleware extends Middleware {
         }
 
         if (event.type === EventType.TOOL_CALL_END) {
-            // Track tool call end event
+            const e = event as ToolCallEndEvent;
+            console.log(`[McpMiddleware] TOOL_CALL_END: ${toolCallNames.get(e.toolCallId) ?? 'unknown'} (id: ${e.toolCallId})`);
         }
 
         // Workaround: Extract parallel tool calls from MESSAGES_SNAPSHOT
@@ -214,6 +175,7 @@ export class McpMiddleware extends Middleware {
                                 toolCallArgsBuffer.set(tc.id, tc.function.arguments || '{}');
                                 if (this.isMcpTool(tc.function.name)) {
                                     pendingMcpCalls.add(tc.id);
+                                    console.log(`[McpMiddleware] MESSAGES_SNAPSHOT: Discovered ${tc.function.name} (id: ${tc.id})`);
                                 }
                             }
                         }
@@ -234,12 +196,13 @@ export class McpMiddleware extends Middleware {
             if (!toolName) return;
 
             const args = this.parseArgs(toolCallArgsBuffer.get(toolCallId) || '{}');
-            const { resultStr, rawResult } = await this.executeTool(toolName, args);
+            console.log(`[McpMiddleware] Executing pending tool: ${toolName}`);
+
+            const result = await this.executeTool(toolName, args);
             results.push({
                 toolCallId,
                 toolName,
-                result: resultStr,
-                rawResult,
+                result,
                 messageId: this.generateId('mcp_result'),
             });
             pendingMcpCalls.delete(toolCallId);
@@ -249,39 +212,9 @@ export class McpMiddleware extends Middleware {
         return results;
     }
 
+    /** Emit tool results (without RUN_FINISHED - that's emitted when truly done) */
     private emitToolResults(observer: Subscriber<BaseEvent>, results: ToolResult[]): void {
-        for (const { toolCallId, toolName, result, rawResult, messageId } of results) {
-            // UI metadata may appear either on the tool CALL result (rawResult._meta)
-            // or only on the tool DEFINITION (listTools result). We support both.
-            const toolDef = this.tools.find(t => t.name === toolName);
-            const sessionId = toolDef?._meta?.sessionId;
-            const resourceUri =
-                rawResult?._meta?.ui?.resourceUri ??
-                rawResult?._meta?.['ui/resourceUri'] ??
-                toolDef?._meta?.ui?.resourceUri ??
-                toolDef?._meta?.['ui/resourceUri'];
-
-            if (resourceUri) {
-                // Extract base name for event emission to match metadata
-                const baseToolName = this.getBaseToolName(toolName);
-
-                const payload: McpAppUiEventPayload = {
-                    toolCallId,
-                    resourceUri,
-                    sessionId,
-                    toolName: baseToolName, // Use base name to match metadata
-                    result: rawResult ?? result,
-                };
-
-                observer.next({
-                    type: EventType.CUSTOM,
-                    name: MCP_APP_UI_EVENT,
-                    value: payload,
-                    timestamp: Date.now(),
-                    role: 'tool',
-                } as any);
-            }
-
+        for (const { toolCallId, toolName, result, messageId } of results) {
             observer.next({
                 type: EventType.TOOL_CALL_RESULT,
                 toolCallId,
@@ -290,6 +223,7 @@ export class McpMiddleware extends Middleware {
                 role: 'tool',
                 timestamp: Date.now(),
             } as any);
+            console.log(`[McpMiddleware] Emitting TOOL_CALL_RESULT for: ${toolName}`);
         }
     }
 
@@ -306,9 +240,14 @@ export class McpMiddleware extends Middleware {
             this.ensureIds(input);
             const anyInput = input as any;
 
+            console.log(`[McpMiddleware] === NEW RUN ===`);
+            console.log(`[McpMiddleware] threadId: ${anyInput.threadId}, runId: ${anyInput.runId}`);
+            console.log(`[McpMiddleware] messages: ${input.messages?.length ?? 0}, tools: ${this.tools?.length ?? 0}`);
+
             // Inject MCP tools
             if (this.toolSchemas?.length) {
                 input.tools = [...(input.tools || []), ...this.toolSchemas];
+                console.log(`[McpMiddleware] Injected ${this.toolSchemas.length} tools:`, this.toolSchemas.map((t: Tool) => t.name));
             }
 
             const handleRunFinished = async () => {
@@ -325,6 +264,8 @@ export class McpMiddleware extends Middleware {
                     return;
                 }
 
+                console.log(`[McpMiddleware] RUN_FINISHED with ${state.pendingMcpCalls.size} pending calls`);
+
                 // Reconstruct the Assistant Message that triggered these tools
                 const toolCalls = [];
                 for (const toolCallId of state.pendingMcpCalls) {
@@ -348,12 +289,16 @@ export class McpMiddleware extends Middleware {
                         tool_calls: toolCalls.length > 0 ? toolCalls : undefined
                     };
                     input.messages.push(assistantMsg as any);
+                    console.log(`[McpMiddleware] Added assistant message to history before tools: ${state.textContent?.slice(0, 50)}... [${toolCalls.length} tools]`);
                 }
 
                 // Execute tools and emit results (no RUN_FINISHED yet - continuation follows)
                 const results = await this.executeTools(state);
                 this.emitToolResults(observer, results);
 
+                // Prepare continuation
+                console.log(`[McpMiddleware] Triggering continuation with ${results.length} results`);
+
                 // Add tool result messages to history
                 for (const { toolCallId, result, messageId } of results) {
                     input.messages.push({
@@ -370,6 +315,7 @@ export class McpMiddleware extends Middleware {
                 state.textContent = ''; // Clear text content for next turn
 
                 anyInput.runId = this.generateId('mcp_run');
+                console.log(`[McpMiddleware] === CONTINUATION RUN === messages: ${input.messages.length}`);
 
                 // Subscribe to continuation
                 next.run(input).subscribe({
@@ -379,6 +325,7 @@ export class McpMiddleware extends Middleware {
                         this.handleToolCallEvent(event, state);
 
                         if (event.type === EventType.RUN_ERROR) {
+                            console.log(`[McpMiddleware] RUN_ERROR received in continuation`);
                             state.error = true;
                             observer.next(event);
                             observer.complete();
@@ -386,6 +333,7 @@ export class McpMiddleware extends Middleware {
                         }
 
                         if (event.type === EventType.RUN_STARTED) {
+                            console.log(`[McpMiddleware] Filtering RUN_STARTED from continuation`);
                             return;
                         }
 
@@ -417,6 +365,7 @@ export class McpMiddleware extends Middleware {
                     this.handleToolCallEvent(event, state);
 
                     if (event.type === EventType.RUN_ERROR) {
+                        console.log(`[McpMiddleware] RUN_ERROR received`);
                         state.error = true;
                         observer.next(event);
                         observer.complete();
@@ -446,7 +395,9 @@ export class McpMiddleware extends Middleware {
 /**
  * Factory function to create MCP middleware.
  */
-export function createMcpMiddleware(options: { tools: AguiTool[] }) {
+export function createMcpMiddleware(
+    options: { tools: AguiTool[] }
+) {
     const middleware = new McpMiddleware(options);
     return (input: RunAgentInput, next: AbstractAgent): Observable<BaseEvent> => {
         return middleware.run(input, next);
@@ -459,4 +410,4 @@ export { createMcpMiddleware as createMcpToolMiddleware };
 
 // Re-exports
 export { Middleware, EventType };
-export type { RunAgentInput, BaseEvent, AbstractAgent, ToolCallEndEvent, Tool };
+export type { RunAgentInput, BaseEvent, AbstractAgent, ToolCallEndEvent, Tool };

package/src/client/react/index.ts

@@ -1,30 +1,16 @@
-/**
- * MCP Redis Client Package - React
- * React client-side exports for MCP connection management
- */
-
-// React Hooks
-export { useMcp, type UseMcpOptions, type McpClient, type McpConnection } from './use-mcp.js';
-export { useAppHost } from './use-app-host.js';
-export { useMcpAppIframe, type McpAppIframeProps } from './use-mcp-app-iframe.js';
-
-// AG-UI Subscriber Pattern (Framework-agnostic)
-export {
-  useAguiSubscriber,
-  useMcpApps,
-  useToolCallEvents,
-} from './use-agui-subscriber.js';
-
-export {
-  createMcpAppSubscriber,
-  subscribeMcpAppEvents,
-  McpAppEventManager,
-  type McpAppEvent,
-  type McpAppEventHandler,
-  type ToolCallEventData,
-  type ToolCallEventHandler,
-  type McpAppSubscriberConfig,
-} from './agui-subscriber.js';
-
-// Re-export shared types and client from main entry
-export * from '../index.js';
+/**
+ * MCP SDK - React Client
+ * Simple React hooks for MCP app rendering
+ */
+
+// Core MCP Hook
+export { useMcp, type UseMcpOptions, type McpClient, type McpConnection } from './use-mcp.js';
+
+// App Host (internal use)
+export { useAppHost } from './use-app-host.js';
+
+// Simplified MCP Apps Hook - the main API
+export { useMcpApps } from './use-mcp-apps.js';
+
+// Re-export shared types and client from main entry
+export * from '../index.js';

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

@@ -0,0 +1,214 @@
+/**
+ * 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;
+}