use-get-tools.ts

Overview

The use-get-tools.ts file provides custom React hooks for extracting specific pieces of data related to "tools" and "MCP IDs" from an agent form context within a React application. These hooks facilitate the retrieval of tool component names and MCP identifiers from nested form data, enabling components to access this information in a clean, reusable, and memoized manner.

The file leverages React's useContext and useMemo hooks, along with Lodash's get utility function, to safely and efficiently access deeply nested properties from a shared context (AgentFormContext). This approach helps prevent runtime errors caused by missing or undefined data and optimizes performance by memoizing the extracted values.

File Contents

• useGetAgentToolNames(): Custom hook to retrieve an array of tool component names from the agent form.

• useGetAgentMCPIds(): Custom hook to retrieve an array of MCP IDs from the agent form.

Detailed Explanations

1. useGetAgentToolNames()

Purpose

Extracts and returns the list of component names for all tools defined in the current agent form context.

Signature

function useGetAgentToolNames(): { toolNames: string[] }

Parameters

This hook takes no parameters directly. It internally consumes the AgentFormContext to access the agent form data.

Return Value

An object containing:

• toolNames: An array of strings representing the component_name of each tool in the form.

Implementation Details

• Uses useContext(AgentFormContext) to obtain the current agent form node.

• Uses Lodash's get to safely retrieve the tools array from node.data.form.tools; defaults to an empty array if undefined.

• Uses Array.map() to create an array of component_name values from the tools.

• Memoizes the result with useMemo to avoid unnecessary recalculations on re-renders.

Usage Example

import { useGetAgentToolNames } from './use-get-tools';

function ToolList() {
  const { toolNames } = useGetAgentToolNames();

  return (
    <ul>
      {toolNames.map(name => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

2. useGetAgentMCPIds()

Purpose

Extracts and returns the list of MCP IDs from the current agent form context.

Signature

function useGetAgentMCPIds(): { mcpIds: string[] }

Parameters

This hook takes no parameters directly. It consumes AgentFormContext internally.

Return Value

An object containing:

• mcpIds: An array of strings representing the mcp_id values found in the form.

Implementation Details

• Uses useContext(AgentFormContext) to access the current agent form node.

• Uses Lodash get to safely access the mcp array inside node.data.form.mcp; defaults to an empty array if undefined.

• Maps the mcp array to extract the mcp_id property from each entry.

• Memoized with useMemo to optimize performance.

Usage Example

import { useGetAgentMCPIds } from './use-get-tools';

function MCPList() {
  const { mcpIds } = useGetAgentMCPIds();

  return (
    <div>
      {mcpIds.map(id => (
        <p key={id}>MCP ID: {id}</p>
      ))}
    </div>
  );
}

Important Implementation Details

• Context Dependency: Both hooks rely on AgentFormContext to provide the form data. This implies that any component using these hooks must be a descendant of a React component that provides AgentFormContext.Provider.

• Safe Data Access: The use of Lodash's get function ensures that if the expected nested properties (data.form.tools or data.form.mcp) are missing or undefined, the hooks gracefully default to empty arrays instead of throwing errors.

• Memoization: useMemo is employed to prevent unnecessary recomputation of tool names or MCP IDs when the context node does not change, improving component rendering efficiency.

• Data Shape Assumptions:

  • tools is assumed to be an array with objects containing a component_name property (string).

  • mcp is assumed to be an array with objects containing an mcp_id property (string).

• TypeScript Interfaces: The hooks use the IAgentForm interface to type the expected shapes of tools and mcp for type safety.

Interaction with Other Parts of the System

• AgentFormContext: This context is the central source of the agent form data. It is likely provided by a higher-level component managing the form state or fetched data.

• IAgentForm Interface: Imported from @/interfaces/database/agent, this interface defines the expected shape of the agent form data, including properties like tools and mcp. This ensures consistency across different parts of the app interacting with the form.

• React Components: Components that need to display or work with the list of tool component names or MCP IDs can consume these hooks to obtain the data cleanly and reactively.

• Lodash get: Used to safely access nested properties, preventing runtime errors due to missing data.

Mermaid Flowchart Diagram: Hook Workflow and Data Flow

flowchart TD
    A[React Component] -->|calls| B[useGetAgentToolNames]
    A -->|calls| C[useGetAgentMCPIds]
    B --> D[useContext(AgentFormContext)]
    C --> D
    D --> E[agent form node data]
    E --> F{Tools array exists?}
    F -- Yes --> G[Extract component_name from each tool]
    F -- No --> H[Return empty array]
    E --> I{MCP array exists?}
    I -- Yes --> J[Extract mcp_id from each MCP]
    I -- No --> K[Return empty array]
    G --> L[Return toolNames array]
    J --> M[Return mcpIds array]

Summary

The use-get-tools.ts file is a utility module that provides two React hooks for efficiently accessing specific parts of an agent form's data — the component names of tools and the MCP IDs. By leveraging React context, Lodash's safe property access, and memoization, it offers a robust and reusable solution to extract and provide this data to React components within the application.

End of Documentation for use-get-tools.ts