@mcp-fe/react-tools

React hooks and components for seamless integration with MCP (Model Context Protocol) tools.

Simplify dynamic MCP tool integration in React applications with automatic lifecycle management, reference counting, and full access to React features.

✨ Key Features

• 🔄 Automatic Lifecycle - Register on mount, unregister on unmount
• 📊 Reference Counting - Share tools across multiple components safely
• ⚡ Re-render Safe - Smart refs prevent duplicate registrations
• 🎯 Full React Access - Handlers have complete access to state, props, and context
• 🔌 Optional Context - Works standalone or with Provider
• 📘 TypeScript First - Complete type safety out of the box

📦 Installation

npm install @mcp-fe/react-tools

pnpm add @mcp-fe/react-tools

yarn add @mcp-fe/react-tools

🚀 Quick Example

import { useMCPTool } from '@mcp-fe/react-tools';

function MyComponent() {
  const user = useUser();
  
  useMCPTool({
    name: 'get_user_profile',
    description: 'Get current user profile',
    inputSchema: {
      type: 'object',
      properties: {}
    },
    handler: async () => ({
      content: [{
        type: 'text',
        text: JSON.stringify({ 
          userId: user.id,
          name: user.name,
          email: user.email
        })
      }]
    })
  });
  
  return <div>Profile tool is active!</div>;
}

📚 Documentation

📖 View Complete Documentation →

Comprehensive documentation is available in the docs/ directory:

• Getting Started - Installation, quick start, and basic usage
• API Reference - Complete API documentation for all hooks and utilities
• Guides - Advanced patterns and best practices
• Examples - Real-world implementation examples
• Architecture - Internal design and data flow
• Troubleshooting - Common issues and solutions

🎯 Core Hooks

useMCPTool

The main hook for registering MCP tools with full lifecycle management.

useMCPGetter

Simplified hook for getter tools (no input parameters).

useMCPAction

Hook for action tools that accept inputs and perform operations.

→ See full API documentation

🏗️ Project Links

• 📦 npm Package
• 🐙 GitHub Repository
• 🌐 Homepage
• 📝 Changelog

📄 License

Apache-2.0 - See LICENSE for details.

Ready to get started? Check out the Getting Started Guide!