react-mcp-tools

A powerful npm package that transforms React components into AI-accessible tools using the Model Context Protocol (MCP). This enables AI assistants like Claude Code to understand and generate code with your custom React components.

🚀 Features

• Smart Component Detection: Automatically scans React/TypeScript projects for annotated components
• TypeScript Integration: Full TypeScript support with intelligent prop type extraction
• MCP Server: Built-in MCP server for seamless AI integration
• Flexible Annotations: Support for // @mcp and // @ai-tool markers
• Props Analysis: Extracts component props, types, and optional parameters
• Code Generation: AI assistants can generate proper component usage code

📦 Installation

# Global installation (recommended)
npm install -g react-mcp-tools

# Or per project
npm install react-mcp-tools

🏁 Quick Start

1. Annotate Your Components

Add // @mcp or // @ai-tool comments above your React components:

// @mcp
export function Button({ text, onClick }: { text: string; onClick: () => void }) {
  return <button onClick={onClick}>{text}</button>;
}

// @ai-tool  
const Card: React.FC<CardProps> = ({ title, content, isVisible = true }) => {
  return isVisible ? <div><h2>{title}</h2><p>{content}</p></div> : null;
}

2. Generate Tools Manifest

react-mcp-tools --verbose

3. Start MCP Server

react-mcp-server

4. Configure Your AI Assistant

See SETUP.md for detailed Claude Code integration.

🎯 How It Works

The package performs static analysis on your React/TypeScript project:

1. Scan: Recursively searches for .jsx, .tsx, .js, .ts files
2. Detect: Identifies components marked with // @mcp or // @ai-tool annotations
3. Analyze: Uses TypeScript compiler API to extract component metadata:
   • Component name and props
   • TypeScript types and interfaces
   • Required vs optional parameters
   • Import paths
4. Generate: Creates MCP-compatible JSON manifest
5. Serve: MCP server exposes components as AI-accessible tools

📝 CLI Usage

# Generate manifest in current directory
react-mcp-tools

# Scan specific directory
react-mcp-tools -d /path/to/project

# Custom output file
react-mcp-tools -o my-manifest.json

# Verbose output
react-mcp-tools --verbose

# Start MCP server
react-mcp-server

🔧 Supported Component Patterns

// Function components
// @mcp
export function MyComponent({ prop1, prop2 }: Props) { ... }

// Arrow function components  
// @ai-tool
export const MyComponent = ({ prop1, prop2 }: Props) => { ... }

// React.FC components
// @mcp
const MyComponent: React.FC<Props> = ({ prop1, prop2 }) => { ... }

// With interfaces
interface Props {
  title: string;
  count?: number;
}

// With type aliases
type Props = {
  title: string;
  count?: number;
}

📋 Example Output

Generated manifest structure:

{
  "tools": [
    {
      "name": "Component.Button",
      "description": "A Button React component", 
      "parameters": {
        "type": "object",
        "properties": {
          "text": {
            "type": "string",
            "description": "The text property of type string"
          },
          "onClick": {
            "type": "function", 
            "description": "The onClick property of type function"
          }
        },
        "required": ["text", "onClick"]
      },
      "code_example": "<Button text=\"Click me\" onClick={() => console.log('clicked')} />",
      "import_path": "@/components/Button"
    }
  ]
}

🤖 AI Integration

Once configured, AI assistants can:

• Understand your component APIs
• Generate proper component usage code
• Respect TypeScript types and required props
• Use appropriate import paths

Example AI interaction:

You: "Create a stats card showing sales data"
AI: Uses Component.StatsCard tool to generate:
     <StatsCard title="Sales" value={1000} variant="green" />

🔗 Links

• Setup Guide - Detailed Claude Code integration
• Claude Code Documentation - Developer reference
• Model Context Protocol - MCP specification

📄 License

ISC License