mcpgraph-ux 0.1.2 → 0.1.4

package/README.md

@@ -6,6 +6,8 @@ A Next.js application that provides a visual interface for the [mcpGraph](https:
 - **List tools**: See all available MCP tools defined in your graph configuration
 - **Test tools**: Execute tools with custom parameters and view results from the exit node
 
+![mcpGraph UX Screenshot](screenshot.png)
+
 ## Features
 
 - 🎨 **Graph Visualization**: Interactive graph visualization using React Flow, showing all nodes and their connections
@@ -104,3 +106,7 @@ This application follows the design recommendations from the mcpGraph project:
 ## License
 
 MIT
+
+## TODO
+
+Would be nice to be able to inspect nodes in graph

package/app/api/execution/breakpoints/route.ts

@@ -0,0 +1,106 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getController } from '@/lib/executionController';
+
+// Force dynamic rendering
+export const dynamic = 'force-dynamic';
+
+// Store breakpoints by executionId (fallback if controller not available)
+const breakpointsStore = new Map<string, string[]>();
+
+export async function GET(request: NextRequest) {
+  try {
+    const executionId = request.nextUrl.searchParams.get('executionId');
+    
+    if (!executionId) {
+      return NextResponse.json(
+        { error: 'Missing executionId parameter' },
+        { status: 400 }
+      );
+    }
+
+    const controller = getController(executionId);
+    if (controller) {
+      // Get breakpoints from controller if available
+      const state = controller.getState();
+      // Note: mcpGraph doesn't expose breakpoints directly, so we use our store
+      const breakpoints = breakpointsStore.get(executionId) || [];
+      return NextResponse.json({ breakpoints });
+    }
+
+    // Fallback to store
+    const breakpoints = breakpointsStore.get(executionId) || [];
+    return NextResponse.json({ breakpoints });
+  } catch (error) {
+    console.error('Error getting breakpoints:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { executionId, breakpoints } = body;
+
+    if (!executionId) {
+      return NextResponse.json(
+        { error: 'Missing executionId' },
+        { status: 400 }
+      );
+    }
+
+    if (!Array.isArray(breakpoints)) {
+      return NextResponse.json(
+        { error: 'breakpoints must be an array' },
+        { status: 400 }
+      );
+    }
+
+    const controller = getController(executionId);
+    if (controller) {
+      controller.setBreakpoints(breakpoints);
+    }
+
+    // Store breakpoints
+    breakpointsStore.set(executionId, breakpoints);
+
+    return NextResponse.json({ success: true, breakpoints });
+  } catch (error) {
+    console.error('Error setting breakpoints:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(request: NextRequest) {
+  try {
+    const executionId = request.nextUrl.searchParams.get('executionId');
+    
+    if (!executionId) {
+      return NextResponse.json(
+        { error: 'Missing executionId parameter' },
+        { status: 400 }
+      );
+    }
+
+    const controller = getController(executionId);
+    if (controller) {
+      controller.clearBreakpoints();
+    }
+
+    breakpointsStore.delete(executionId);
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Error clearing breakpoints:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
+

package/app/api/execution/context/route.ts

@@ -0,0 +1,69 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getController } from '@/lib/executionController';
+import { getApi } from '@/lib/mcpGraphApi';
+
+// Force dynamic rendering
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest) {
+  try {
+    const executionId = request.nextUrl.searchParams.get('executionId');
+    const nodeId = request.nextUrl.searchParams.get('nodeId');
+    const sequenceIdParam = request.nextUrl.searchParams.get('sequenceId');
+    
+    if (!executionId) {
+      return NextResponse.json(
+        { error: 'Missing executionId parameter' },
+        { status: 400 }
+      );
+    }
+    
+    if (!nodeId || !sequenceIdParam) {
+      return NextResponse.json(
+        { error: 'Missing nodeId or sequenceId parameter' },
+        { status: 400 }
+      );
+    }
+
+    const sequenceId = parseInt(sequenceIdParam, 10);
+    if (isNaN(sequenceId)) {
+      return NextResponse.json(
+        { error: 'Invalid sequenceId parameter' },
+        { status: 400 }
+      );
+    }
+
+    // Try to get controller first (for active executions)
+    const controller = getController(executionId);
+    let context: Record<string, unknown> | null = null;
+    
+    if (controller) {
+      // Use controller's context directly (works for active executions)
+      try {
+        const state = controller.getState();
+        context = state.context.getContextForExecution(sequenceId);
+        console.log(`[API] Got context from controller for executionIndex=${sequenceId}, nodeId=${nodeId}:`, context ? 'present' : 'null');
+      } catch (error) {
+        console.error(`[API] Error getting context from controller:`, error);
+      }
+    } else {
+      // Fallback to API method (may not work after execution completes)
+      const api = getApi();
+      if (api) {
+        context = api.getContextForExecution(sequenceId);
+        console.log(`[API] Got context from API for executionIndex=${sequenceId}, nodeId=${nodeId}:`, context ? 'present' : 'null');
+      } else {
+        console.error(`[API] No controller or API available`);
+      }
+    }
+    
+    return NextResponse.json({ context: context || null });
+  } catch (error) {
+    console.error('Error getting node input context:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
+

package/app/api/execution/controller/route.ts

@@ -0,0 +1,121 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getController, unregisterController, getAllExecutionIds } from '@/lib/executionController';
+import { sendExecutionEvent, closeExecutionStream } from '@/lib/executionStreamServer';
+import { getApi } from '@/lib/mcpGraphApi';
+
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { executionId, action } = body;
+
+    if (!executionId) {
+      return NextResponse.json(
+        { error: 'Missing executionId' },
+        { status: 400 }
+      );
+    }
+
+    if (!action || !['pause', 'resume', 'step', 'stop'].includes(action)) {
+      return NextResponse.json(
+        { error: 'Invalid action. Must be one of: pause, resume, step, stop' },
+        { status: 400 }
+      );
+    }
+
+    console.log(`[Controller API] Looking for controller with executionId: ${executionId}`);
+    // Force getApi to be called to ensure module is loaded
+    const api = getApi();
+    console.log(`[Controller API] API instance: ${api ? 'present' : 'null'}`);
+    const controller = getController(executionId);
+    if (!controller) {
+      console.log(`[Controller API] Controller not found for executionId: ${executionId}`);
+      // Log all registered executionIds for debugging
+      const allIds = getAllExecutionIds();
+      console.log(`[Controller API] Currently registered executionIds: ${allIds.length > 0 ? allIds.join(', ') : 'none'}`);
+      return NextResponse.json(
+        { error: 'Execution not found or not active' },
+        { status: 404 }
+      );
+    }
+    console.log(`[Controller API] Found controller for executionId: ${executionId}, status: ${controller.getState().status}`);
+
+    const state = controller.getState();
+    
+    switch (action) {
+      case 'pause':
+        if (state.status !== 'running') {
+          return NextResponse.json(
+            { error: `Cannot pause: execution status is ${state.status}` },
+            { status: 400 }
+          );
+        }
+        controller.pause();
+        // Don't send stateUpdate here - onPause hook will send it
+        return NextResponse.json({ success: true, status: 'paused' });
+
+      case 'resume':
+        if (state.status !== 'paused') {
+          return NextResponse.json(
+            { error: `Cannot resume: execution status is ${state.status}` },
+            { status: 400 }
+          );
+        }
+        controller.resume();
+        // Don't send stateUpdate here - the onResume hook already sends it
+        return NextResponse.json({ success: true, status: 'running' });
+
+      case 'step':
+        if (state.status !== 'paused') {
+          return NextResponse.json(
+            { error: `Cannot step: execution status is ${state.status}` },
+            { status: 400 }
+          );
+        }
+        await controller.step();
+        const newState = controller.getState();
+        // Don't send stateUpdate here - the onPause hook already sends the correct stateUpdate
+        // when step completes and pauses at the next node
+        return NextResponse.json({ 
+          success: true, 
+          status: newState.status,
+          currentNodeId: newState.currentNodeId,
+        });
+
+      case 'stop':
+        if (state.status !== 'running' && state.status !== 'paused') {
+          return NextResponse.json(
+            { error: `Cannot stop: execution status is ${state.status}` },
+            { status: 400 }
+          );
+        }
+        
+        // Call stop() - this sets status to "stopped" and will cause execution to throw "Execution was stopped"
+        controller.stop();
+        
+        // Send stopped event
+        sendExecutionEvent(executionId, 'executionStopped', {
+          timestamp: Date.now(),
+        });
+        
+        // Clean up controller and stream
+        unregisterController(executionId);
+        closeExecutionStream(executionId);
+        
+        return NextResponse.json({ success: true, status: 'stopped' });
+
+      default:
+        return NextResponse.json(
+          { error: 'Invalid action' },
+          { status: 400 }
+        );
+    }
+  } catch (error) {
+    console.error('Error in controller action:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
+

package/app/api/execution/history/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getController } from '@/lib/executionController';
+import { getApi } from '@/lib/mcpGraphApi';
+
+// Force dynamic rendering
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest) {
+  try {
+    const executionId = request.nextUrl.searchParams.get('executionId');
+    
+    if (!executionId) {
+      return NextResponse.json(
+        { error: 'Missing executionId parameter' },
+        { status: 400 }
+      );
+    }
+
+    const controller = getController(executionId);
+    if (!controller) {
+      return NextResponse.json(
+        { error: 'Execution not found or not active' },
+        { status: 404 }
+      );
+    }
+
+    // Get execution history from the controller's state
+    const state = controller.getState();
+    const history = state.executionHistory || [];
+    
+    return NextResponse.json({ history });
+  } catch (error) {
+    console.error('Error getting execution history:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
+

package/app/api/execution/history-with-indices/route.ts

@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getController } from '@/lib/executionController';
+import { getApi } from '@/lib/mcpGraphApi';
+import type { NodeExecutionRecord } from 'mcpgraph';
+
+// Force dynamic rendering
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest) {
+  try {
+    const executionId = request.nextUrl.searchParams.get('executionId');
+    
+    if (!executionId) {
+      return NextResponse.json(
+        { error: 'Missing executionId parameter' },
+        { status: 400 }
+      );
+    }
+
+    const controller = getController(executionId);
+    if (!controller) {
+      return NextResponse.json(
+        { error: 'Execution not found or not active' },
+        { status: 404 }
+      );
+    }
+
+    const api = getApi();
+    if (!api) {
+      return NextResponse.json(
+        { error: 'API instance not available' },
+        { status: 500 }
+      );
+    }
+    
+    // Get execution history by iterating through execution records
+    // We'll get records until we hit null
+    const history: NodeExecutionRecord[] = [];
+    let index = 0;
+    
+    while (true) {
+      const record = api.getExecutionByIndex(index);
+      if (!record) break;
+      history.push(record);
+      index++;
+    }
+    
+    return NextResponse.json({ history });
+  } catch (error) {
+    console.error('Error getting execution history with indices:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
+

package/app/api/execution/stream/route.ts

@@ -0,0 +1,34 @@
+import { NextRequest } from 'next/server';
+import { registerExecutionStream, unregisterExecutionStream } from '@/lib/executionStreamServer';
+
+
+export async function GET(request: NextRequest) {
+  const executionId = request.nextUrl.searchParams.get('executionId');
+  
+  if (!executionId) {
+    return new Response('Missing executionId parameter', { status: 400 });
+  }
+
+  const stream = new ReadableStream({
+    start(controller) {
+      // Register stream for this execution
+      registerExecutionStream(executionId, controller);
+      
+      // Note: The actual execution will be started via POST /api/tools/[toolName]
+      // This stream will receive events from those hooks
+    },
+    cancel() {
+      // Clean up when client disconnects
+      unregisterExecutionStream(executionId);
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive',
+    },
+  });
+}
+

package/app/api/graph/route.ts

@@ -1,31 +1,51 @@
 import { NextResponse } from 'next/server';
-import { McpGraphApi, type NodeDefinition } from 'mcpgraph';
+import { type NodeDefinition } from 'mcpgraph';
+import { getApi } from '@/lib/mcpGraphApi';
 
 // Force dynamic rendering - this route requires runtime config
 export const dynamic = 'force-dynamic';
 
-let apiInstance: McpGraphApi | null = null;
-
-function getApi(): McpGraphApi {
-  const configPath = process.env.MCPGRAPH_CONFIG_PATH;
-  if (!configPath) {
-    throw new Error('MCPGRAPH_CONFIG_PATH environment variable is not set');
-  }
-
-  if (!apiInstance) {
-    apiInstance = new McpGraphApi(configPath);
-  }
-
-  return apiInstance;
-}
-
-export async function GET() {
+export async function GET(request: Request) {
   try {
     const api = getApi();
     const config = api.getConfig();
     
+    // Get toolName from query parameter
+    const url = new URL(request.url);
+    const toolName = url.searchParams.get('toolName');
+    
+    if (!toolName) {
+      return NextResponse.json(
+        { error: 'toolName query parameter is required' },
+        { status: 400 }
+      );
+    }
+    
+    // Get tool definition from config.tools (which is ToolDefinition[], not ToolInfo)
+    // getTool() returns ToolInfo which doesn't have nodes - we need ToolDefinition from config
+    const tool = config.tools.find(t => t.name === toolName);
+    
+    if (!tool) {
+      const toolNames = config.tools.map(t => t.name);
+      return NextResponse.json(
+        { error: `Tool '${toolName}' not found. Available tools: ${toolNames.join(', ')}` },
+        { status: 404 }
+      );
+    }
+    
+    if (!tool.nodes || tool.nodes.length === 0) {
+      return NextResponse.json(
+        { error: `Tool '${toolName}' has no nodes defined` },
+        { status: 404 }
+      );
+    }
+    
+    const allNodes: NodeDefinition[] = tool.nodes;
+    console.log(`[graph/route] Found ${allNodes.length} nodes for tool '${toolName}'`);
+    console.log(`[graph/route] Node IDs:`, allNodes.map(n => n.id));
+    
     // Transform nodes into React Flow format
-    const nodes = config.nodes.map((node: NodeDefinition) => {
+    const nodes = allNodes.map((node: NodeDefinition) => {
       const baseNode = {
         id: node.id,
         type: node.type,
@@ -37,39 +57,47 @@ export async function GET() {
         position: { x: 0, y: 0 }, // Will be calculated by layout algorithm
       };
 
-      // Add specific data based on node type
-      if (node.type === 'entry' || node.type === 'exit') {
+      // Add specific data based on node type using type guards
+      if (node.type === 'entry' && 'tool' in node) {
+        return {
+          ...baseNode,
+          data: {
+            ...baseNode.data,
+            tool: node.tool,
+          },
+        };
+      } else if (node.type === 'exit' && 'tool' in node) {
         return {
           ...baseNode,
           data: {
             ...baseNode.data,
-            tool: (node as any).tool,
+            tool: node.tool,
           },
         };
-      } else if (node.type === 'mcp') {
+      } else if (node.type === 'mcp' && 'server' in node && 'tool' in node && 'args' in node) {
         return {
           ...baseNode,
           data: {
             ...baseNode.data,
-            server: (node as any).server,
-            tool: (node as any).tool,
-            args: (node as any).args,
+            server: node.server,
+            tool: node.tool,
+            args: node.args,
           },
         };
-      } else if (node.type === 'transform') {
+      } else if (node.type === 'transform' && 'transform' in node) {
         return {
           ...baseNode,
           data: {
             ...baseNode.data,
-            transform: (node as any).transform,
+            transform: node.transform,
           },
         };
-      } else if (node.type === 'switch') {
+      } else if (node.type === 'switch' && 'conditions' in node) {
         return {
           ...baseNode,
           data: {
             ...baseNode.data,
-            conditions: (node as any).conditions,
+            conditions: node.conditions,
           },
         };
       }
@@ -80,7 +108,7 @@ export async function GET() {
     // Create edges from node.next and switch conditions
     const edges: Array<{ id: string; source: string; target: string; label?: string }> = [];
     
-    config.nodes.forEach((node: NodeDefinition) => {
+    allNodes.forEach((node: NodeDefinition) => {
       if ('next' in node && node.next) {
         edges.push({
           id: `${node.id}-${node.next}`,
@@ -90,8 +118,7 @@ export async function GET() {
       }
       
       if (node.type === 'switch' && 'conditions' in node) {
-        const switchNode = node as any;
-        switchNode.conditions.forEach((condition: any, index: number) => {
+        node.conditions.forEach((condition, index: number) => {
           edges.push({
             id: `${node.id}-${condition.target}-${index}`,
             source: node.id,
@@ -102,7 +129,46 @@ export async function GET() {
       }
     });
 
-    return NextResponse.json({ nodes, edges, tools: config.tools });
+    console.log(`[graph/route] Returning ${nodes.length} nodes and ${edges.length} edges`);
+    
+    return NextResponse.json({ 
+      nodes, 
+      edges, 
+      tools: config.tools,
+      config: {
+        name: config.server.name,
+        version: config.server.version,
+        servers: Object.entries(config.mcpServers || {}).map(([name, server]) => {
+          const details: {
+            name: string;
+            type: string;
+            command?: string;
+            args?: string[];
+            cwd?: string;
+            url?: string;
+            headers?: Record<string, string>;
+          } = {
+            name,
+            type: server.type || 'stdio',
+          };
+          
+          if (server.type === 'stdio' || !server.type) {
+            details.command = server.command;
+            details.args = server.args || [];
+            if (server.cwd) {
+              details.cwd = server.cwd;
+            }
+          } else if (server.type === 'sse' || server.type === 'streamableHttp') {
+            details.url = server.url;
+            if (server.headers) {
+              details.headers = server.headers;
+            }
+          }
+          
+          return details;
+        }),
+      },
+    });
   } catch (error) {
     console.error('Error getting graph:', error);
     return NextResponse.json(