use-update-mcp.ts

Overview

The use-update-mcp.ts file provides React hooks designed to manage the MCP (presumably "Managed Control Points" or a similar domain-specific entity) data associated with an Agent node within a graph-based UI or application state. These hooks enable:

• Retrieving the current MCP list from the Agent node context.

• Updating the MCP list by adding or modifying MCP entries.

• Deleting MCP entries from the node.

This file is tightly integrated with React's context and state management, leveraging custom hooks and external data fetching hooks (useListMcpServer) to sync MCP data with the UI and backend.

Detailed Explanations

Imports

• useListMcpServer: Custom hook to fetch the list of MCP servers from the backend.

• IAgentForm: Interface describing the Agent form's type structure, particularly the MCP data.

• AgentFormContext: React context providing the current Agent node form data.

• useGraphStore: Zustand store hook for managing graph state, including updating node forms.

• get from lodash: Utility for safely accessing nested object properties.

• React hooks: useCallback, useContext, useMemo.

Exported Hooks

1. useGetNodeMCP

Retrieves the MCP data from the current Agent node context.

Signature

function useGetNodeMCP(): IAgentForm['mcp'] | undefined

Parameters

• None

Returns

• The MCP list (IAgentForm['mcp']) from the current node's form data, or undefined if not present.

Description

• Uses React's useContext to get the current node from AgentFormContext.

• Uses lodash.get to safely extract node.data.form.mcp.

• Memoizes the MCP data so it only recalculates when node changes.

Usage Example

const mcpList = useGetNodeMCP();
console.log(mcpList);

2. useUpdateAgentNodeMCP

Provides a method to update the MCP list on the current Agent node.

Signature

function useUpdateAgentNodeMCP(): { updateNodeMCP: (value: string[]) => void }

Parameters

• None

Returns

• An object containing the method updateNodeMCP.

updateNodeMCP(value: string[])

• Parameters

  • value: An array of MCP IDs (strings) to update the node's MCP list with.

• Returns

  • void

• Description

  • For each MCP ID in value, it tries to find the corresponding MCP object from the current MCP list or from the server's MCP data.

  • If found in current list, it reuses that MCP; if not, but the MCP server data contains "tools" for that ID, it creates a minimal MCP object with empty tools.

  • Accumulates the MCPs into a new list and updates the node's form MCP field via updateNodeForm in the graph store.

  • Uses useCallback to memoize the function and avoid unnecessary re-renders.

Implementation Details

• Uses useListMcpServer to get the latest MCP server data.

• Uses useGraphStore to call updateNodeForm for updating the node.

• Uses useGetNodeMCP to get the current MCP list.

• Uses useContext to get the current Agent node.

Usage Example

const { updateNodeMCP } = useUpdateAgentNodeMCP();
updateNodeMCP(['mcp1', 'mcp2']);

3. useDeleteAgentNodeMCP

Provides a method to delete a specific MCP from the current Agent node.

Signature

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

Parameters

• None

Returns

• An object containing the method deleteNodeMCP.

deleteNodeMCP(value: string)

• Parameters

  • value: The MCP ID (string) to delete from the node's MCP list.

• Returns

  • A callback function with no parameters that performs the deletion when invoked.

• Description

  • Filters out the MCP with the matching mcp_id from the current MCP list.

  • Updates the node's MCP list with the filtered list using updateNodeForm.

  • Wrapped in useCallback for memoization.

Usage Example

const { deleteNodeMCP } = useDeleteAgentNodeMCP();
<button onClick={deleteNodeMCP('mcp1')}>Delete MCP1</button>

Important Implementation Details

• State Management:
  The file uses a combination of React Context (AgentFormContext) to access the current node, and Zustand store (useGraphStore) to update the global graph state with new MCP data.

• Data Synchronization:
  The MCP server data is fetched asynchronously via useListMcpServer and used to supplement or verify MCP entries during updates.

• Performance Optimizations:
  useCallback and useMemo are used extensively to optimize re-rendering and to preserve function identity for dependent components.

• Immutable Updates:
  MCP lists are rebuilt immutably to ensure state changes are detected by React and Zustand.

Interaction with Other Parts of the System

• AgentFormContext:
  Supplies the current Agent node's form data to extract or update MCP information.

• useListMcpServer:
  Provides the authoritative list of MCP servers and their associated tools to validate and enrich MCP data.

• useGraphStore:
  Central store responsible for updating the graph's nodes, specifically the form data tied to MCPs.

• Agent Nodes:
  This file's hooks are intended for use in UI components or logic that modify the MCP configuration of agent nodes in a graph-based interface or system.

Mermaid Diagram

flowchart TD
    A[useGetNodeMCP] -->|gets MCP| B[AgentFormContext]
    C[useUpdateAgentNodeMCP] -->|uses| B
    C -->|uses| D[useListMcpServer]
    C -->|calls| E[updateNodeForm in useGraphStore]
    C -->|calls| F[findMcpTools]
    F -->|search in| D
    G[useDeleteAgentNodeMCP] -->|uses| B
    G -->|calls| E
    G -->|uses| A

Summary

The use-update-mcp.ts file encapsulates MCP data management for Agent nodes within a React application, providing reusable hooks to get, update, and delete MCPs. It integrates context, server data fetching, and global state management to keep MCP data consistent and synchronized across the UI and backend. This modular approach facilitates maintainability and clarity in managing complex MCP-related logic in the application.