@rsuite/mcp

@rsuite/mcp

A Model Context Protocol (MCP) server for React Suite components, providing AI tools with access to RSuite component type definitions and documentation.

Overview

This MCP server allows AI assistants to access comprehensive information about RSuite components, including:

• Component props and their types
• Default values and descriptions
• Available components and hooks
• Search functionality for finding relevant components

Installation

npm install @rsuite/mcp

Usage

Quick Start

Run the server directly:

npx @rsuite/mcp

Or install globally:

npm install -g @rsuite/mcp
rsuite-mcp

Configuration Examples

Windsurf

• Navigate to "Settings" > "Windsurf Settings" > "Cascade"
• Click "Manage MCPs" > "View raw config"
• Add the following:

{
  "mcpServers": {
    "rsuite": {
      "command": "npx",
      "args": ["-y", "@rsuite/mcp@latest"]
    }
  }
}

Cursor

• Navigate to "Settings" > "MCP"
• Click "Add new global MCP server"
• Add the configuration above

VS Code

Create .vscode/mcp.json in your workspace:

{
  "servers": {
    "rsuite": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@rsuite/mcp@latest"]
    }
  }
}

Claude Code

claude mcp add rsuite-mcp -- npx -y @rsuite/mcp@latest

Available Tools

get_component_props

Get detailed props information for a specific RSuite component.

Parameters:

• componentId (required): Component ID (e.g., "button", "input", "modal")
• componentName (optional): Specific component name within the file

Example:

Get props for the Button component

list_components

List all available RSuite components with optional search filtering.

Parameters:

• search (optional): Search query to filter components

Example:

List all RSuite components
Show me all input-related components

list_hooks

List all available RSuite hooks.

Example:

What hooks are available in RSuite?

search_components

Search for components by name or keyword.

Parameters:

• query (required): Search query

Example:

Find components related to "date"
Search for "picker" components

Available Resources

The server provides access to component type definitions through the following URI scheme:

• rsuite://index - Complete index of components and hooks
• rsuite://component/{componentId} - Type definitions for a specific component
• rsuite://hook/{hookId} - Information about a specific hook

Configuration

The server fetches component information from the RSuite documentation website. By default, it uses:

• Base URL: https://rsuitejs.com
• Cache TTL: 5 minutes

Environment Variables

You can customize the server behavior using environment variables:

• RSUITE_MCP_BASE_URL: Custom base URL for fetching component data (default: https://rsuitejs.com)
• RSUITE_MCP_VERSION: Specific version of RSuite to use (optional)

Example with custom configuration:

{
  "mcpServers": {
    "rsuite": {
      "command": "npx",
      "args": ["-y", "@rsuite/mcp@latest"],
      "env": {
        "RSUITE_MCP_BASE_URL": "https://your-custom-rsuite-api.com"
      }
    }
  }
}

Features

• Real-time Data: Fetches the latest component information from RSuite's documentation
• Caching: Intelligent caching to reduce API calls and improve performance
• Search: Flexible search functionality to find relevant components
• Type Safety: Full TypeScript support with comprehensive type definitions
• Error Handling: Robust error handling with informative error messages

Example Queries

Here are some example queries you can use with AI assistants:

• "What props does the Button component accept?"
• "Show me all the form-related components in RSuite"
• "What's the type definition for the DatePicker component?"
• "List all components that contain 'picker' in their name"
• "What hooks are available in RSuite?"

Development

Building

npm run build

Development Mode

npm run dev

Testing

The server can be tested using the MCP Inspector:

npx @modelcontextprotocol/inspector npx @rsuite/mcp

Component Data

The server accesses component type information generated by RSuite's documentation build process. This includes:

• 87 Components: All RSuite components with complete prop definitions
• 4 Hooks: RSuite custom hooks
• Type Definitions: Complete TypeScript type information
• Default Values: Default prop values where applicable
• Descriptions: Human-readable descriptions for all props

Architecture

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────────┐
│   AI Assistant  │◄──►│  @rsuite/mcp    │◄──►│ RSuite Docs (JSON)  │
│ (Windsurf, etc) │    │  MCP Server      │    │   rsuitejs.com      │
└─────────────────┘    └──────────────────┘    └─────────────────────┘

The server acts as a bridge between AI assistants and RSuite's component documentation, providing structured access to component information through the Model Context Protocol.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Links

• RSuite Documentation
• Model Context Protocol
• GitHub Repository