React MCP Client Hooks

React hooks for settuping up a Model Context Protocol (MCP) client.

Installation

npm install @buildwithlayer/react-mcp-client-hooks
# or
yarn add @buildwithlayer/react-mcp-client-hooks

Usage

Wrap your application with the MCP context provider:

import { MCPServerContextProvider } from '@buildwithlayer/react-mcp-client-hooks';

function App() {
  return (
    <MCPServerContextProvider>
      <YourComponent />
    </MCPServerContextProvider>
  );
}

Use the hooks in your components:

import {
  useMCPConnection,
  useMCPListTools,
} from '@buildwithlayer/react-mcp-client-hooks';

function YourComponent() {
  const { connectSSE, status } = useMCPConnection({
    url: new URL('your-mcp-server-url'),
  });
  const { tools, listTools } = useMCPListTools();

  // Your component logic
}

Available Hooks

• useMCPConnection: Manages the connection to an MCP server using SSE (Server-Sent Events).
  • status Provides connection status (CONNECTED, CONNECTING, DISCONNECTED, etc.)
  • Methods for connecting to and disconnecting from the server (connectSSE and disconnect)
  • Exposes server capabilities once connected (capabilities)
  • Handles connection errors (error)
• useMCPListTools: Retrieves the list of available tools from the MCP server.
  • listTools Returns the current tool list and a method to refresh it
  • Provides loading state (loading) and error handling (error)
  • tools Provides the tools returned by listTools
• useMCPCallTool: Calls a tool on the MCP server with provided arguments.
  • callTool Method to call a tool with a name and arguments
  • Tracks tool call history (toolCallResults) with status tracking (PENDING, COMPLETED, ERROR)
  • clearToolCallResults Method to clear call history
  • latestToolCallResult Easy access to the most recent tool call result
  • Provides error handling within each call result
• useMCPListPrompts: Retrieves available prompts from the MCP server.
  • listPrompts Method to fetch and refresh the prompt list
  • Provides loading state (loading) and error handling (error)
  • prompts Access to the current list of available prompts
  • Automatically updates the shared context with prompt data
• useMCPGetPrompt: Retrieves a specific prompt from the MCP server.
  • getPrompt Method to fetch a prompt with name and arguments
  • Tracks prompt request history (getPromptResults) with status tracking
  • clearGetPromptResults Method to clear request history
  • latestGetPromptResult Easy access to the most recent prompt result
  • Provides error handling within each prompt result
• useMCPListResources: Retrieves available resources from the MCP server.
  • listResources Method to fetch and refresh the resource list
  • Provides loading state (loading) and error handling (error)
  • resources Access to the current list of available resources
  • Automatically updates the shared context with resource data
• useMCPReadResource: Reads content of a specific resource from the MCP server.
  • readResource Method to fetch a resource's content by URI
  • Tracks resource read history (readResourceResults) with status tracking
  • clearReadResourceResults Method to clear read history
  • latestReadResourceResult Easy access to the most recent read result
  • Provides error handling within each read result
• useMCPResourceSubscriptions: Manages subscriptions to resources for real-time updates.
  • subscribedResources Access to current list of subscribed resources
  • subscribeToResource Method to subscribe to a resource by URI
  • unsubscribeFromResource Method to unsubscribe from a resource
  • Tracks subscription history (resourceSubscriptionResults) with status tracking
  • clearResourceSubscriptionResults Method to clear subscription history
  • latestResourceSubscriptionResult Easy access to the most recent subscription action result