use-update-mcp.ts

Overview

The use-update-mcp.ts file provides React hooks designed to manage the MCP (Managed Control Points) data associated with an agent node within a graph-based UI application. It allows reading, updating, and deleting MCP information tied to an agent form context. The hooks interact with a global graph store and leverage server data to maintain consistency between UI state and backend MCP configurations.

This file is primarily used within a React functional component hierarchy where agent nodes and their MCP configurations are part of a form-driven interface. The hooks abstract MCP-related logic, facilitating cleaner component code and centralized state management.

Exports and Their Functionalities

1. useGetNodeMCP()

Purpose

Retrieves the MCP array from the current agent node's form context.

Details

• Uses React's useContext to access the AgentFormContext.

• Utilizes lodash.get to safely extract the nested MCP data (node.data.form.mcp).

• Returns the MCP data memoized with useMemo for performance optimization.

Returns

• IAgentForm['mcp'] — An array representing MCP entries for the current agent node, or undefined if not present.

Usage Example

const mcpList = useGetNodeMCP();
console.log(mcpList); // Logs the MCP array attached to the current node form

2. useUpdateAgentNodeMCP()

Purpose

Provides a function to update the MCP list for the current agent node in the global graph store.

Details

• Accesses the graph store's updateNodeForm method to update node data.

• Gets the current agent node from context and the existing MCP list using useGetNodeMCP().

• Fetches MCP server data via useListMcpServer hook (presumably from backend).

• Defines a helper findMcpTools to retrieve tools variables associated with a given MCP ID.

• The updateNodeMCP function accepts an array of MCP IDs (string[]) and:

  • Iterates over these IDs.

  • For each ID, tries to find the existing MCP in the current list.

  • If found, pushes the MCP entry as is.

  • If not found but tools are available from server data, creates a new MCP object with empty tools.

  • Calls updateNodeForm with the updated MCP array.

Parameters

• value: string[] — Array of MCP IDs to set/update for the current node.

Returns

• An object containing:

  • updateNodeMCP: (value: string[]) => void — Function to update the MCP list.

Usage Example

const { updateNodeMCP } = useUpdateAgentNodeMCP();
updateNodeMCP(['mcp-123', 'mcp-456']); // Updates node MCPs to these two IDs

3. useDeleteAgentNodeMCP()

Purpose

Provides a function to delete a specific MCP entry from the current agent node's MCP list.

Details

• Accesses updateNodeForm from the graph store.

• Uses useGetNodeMCP to retrieve the current MCP list.

• Defines deleteNodeMCP which:

  • Accepts an MCP ID string.

  • Returns a function that when called:

    • Filters out the MCP with the matching ID.

    • Calls updateNodeForm to update the node's MCP list.

Parameters

• value: string — The MCP ID to be deleted.

Returns

• An object containing:

  • deleteNodeMCP: () => void — Function that deletes the specified MCP when invoked.

Usage Example

const { deleteNodeMCP } = useDeleteAgentNodeMCP();
const handleDelete = deleteNodeMCP('mcp-123');
handleDelete(); // Deletes MCP with id 'mcp-123' from node

Important Implementation Details

• Context Usage: All hooks depend on AgentFormContext, indicating that they must be used within a component tree wrapped by this context provider.

• State Management: Updates are performed through a global store (useGraphStore), which is likely a Zustand or similar state management solution.

• Immutability: When updating MCP arrays, new arrays are created rather than mutated, preserving React's state management best practices.

• Data Fetching: MCP server details (mcp_servers) come from useListMcpServer hook, suggesting asynchronous data fetching is handled outside or within this hook.

• Tools Handling: When updating MCPs, if the MCP is not found locally but the server data contains tools, a new MCP object is created with empty tools to maintain consistency.

• Performance: Memoization (useMemo) and callbacks (useCallback) are used to prevent unnecessary recalculations and re-renders.

Interactions with Other Parts of the System

• AgentFormContext: Provides the current node and its form data, essential for MCP manipulations.

• useGraphStore: Centralized state management for graph nodes, enabling updates to node forms.

• useListMcpServer: Fetches MCP server data needed for identifying valid MCPs and related tools.

• IAgentForm Interface: Defines the shape of the agent form data, specifically the MCP property.

• Parent Components: These hooks are intended for use in React components managing agent nodes, likely within an agent editor or graph interface.

Visual Diagram

classDiagram
    class useGetNodeMCP {
        +() : IAgentForm['mcp']
    }

    class useUpdateAgentNodeMCP {
        +updateNodeMCP(value: string[]) : void
    }

    class useDeleteAgentNodeMCP {
        +deleteNodeMCP(value: string) : () => void
    }

    useUpdateAgentNodeMCP --> useGetNodeMCP : uses
    useDeleteAgentNodeMCP --> useGetNodeMCP : uses
    useUpdateAgentNodeMCP ..> useListMcpServer : uses server data
    useUpdateAgentNodeMCP ..> useGraphStore : updates node form
    useDeleteAgentNodeMCP ..> useGraphStore : updates node form
    useGetNodeMCP ..> AgentFormContext : reads node context
    useUpdateAgentNodeMCP ..> AgentFormContext : reads node context
    useDeleteAgentNodeMCP ..> AgentFormContext : reads node context

Summary

The use-update-mcp.ts file is a utility module of React hooks focused on manipulating MCP data attached to agent nodes within a graph/UI context. It encapsulates fetching MCP data, updating MCP lists, and deleting MCP entries while maintaining synchronization with backend data and global state. The hooks rely on React context, state management stores, and server data fetching hooks to provide a cohesive MCP management API for components in the system.