NPM Plus Documentation

Windsurf Setup

Method 1: NPX Installation (Recommended)

In your project root directory, create a .windsurfrc file:

{
  "mcp": {
    "servers": {
      "npmplus-mcp": {
        "command": "npx",
        "args": ["-y", "npmplus-mcp-server"],
        "disabled": false
      }
    }
  }
}

Method 2: HTTP Transport

In your project root directory, create a mcp_config.json file:

{
  "mcpServers": {
    "npmplus-mcp": {
      "serverUrl": "https://api.npmplus.dev/mcp"
    }
  }
}

Step 2: Reload Windsurf

Restart Windsurf or reload the window. The MCP server will be automatically loaded.

Step 3: Test

Use the AI chat and ask: "Install express and cors packages"

Cursor Setup

Method 1: MCP Settings

1. Go to Cursor → Settings → Extensions
2. Look for MCP or Model Context Protocol settings
3. Add the server configuration
4. Restart Cursor

{
  "mcpServers": {
    "npmplus-mcp": {
      "command": "npx",
      "args": ["-y", "npmplus-mcp-server"]
    }
  }
}

{
  "mcpServers": {
    "npmplus-mcp": {
      "serverUrl": "https://api.npmplus.dev/mcp"
    }
  }
}

Method 2: .cursorrules File

Create a .cursorrules file in your project root:

# NPM Plus MCP Server Configuration

This project uses the NPM Plus MCP server for package management.

IMPORTANT FOR CURSOR: Use NPX method ONLY!
HTTP transport causes "Loading tools" errors in Cursor.

Configuration: {"command": "npx", "args": ["-y", "npmplus-mcp-server"]}

Available commands:
- Search for packages
- Install/update/remove packages  
- Security auditing
- Bundle size analysis
- Dependency management

Ask me about JavaScript packages and I'll use the MCP server to help!

Step 3: Test

Ask Cursor: "What's the bundle size of lodash?"

Cline Extension Setup (Complete Guide)

Step 1: Install Cline Extension

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Cline" by saoudrizwan
4. Click Install

Step 2: Configure AI Model

Visit app.cline.bot to set up your AI model provider.

Step 3: Setup NPM Plus MCP Server

"add a tool for JavaScript package management using npmplus-mcp-server"

{
  "mcpServers": {
    "npmplus-mcp": {
      "command": "npx",
      "args": ["-y", "npmplus-mcp-server"]
    }
  }
}

Step 4: Usage

"Search for React testing libraries"
"Check security vulnerabilities in my project"
"What's the bundle size of lodash?"

"Use npmplus-mcp to search for react packages"
"With NPM Plus, audit my dependencies"
"@npmplus-mcp find testing libraries"

Step 5: Troubleshooting

VS Code Native MCP Setup

Method 1: Using Command Palette (Recommended)

1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Search for "MCP: Add Server"
3. Follow the prompts to add NPM Plus server
4. Use this configuration:

{
  "command": "npx",
  "args": ["-y", "npmplus-mcp-server"]
}

Method 2: Manual Configuration File

Create .vscode/mcp.json in your project root:

{
  "mcpServers": {
    "npmplus-mcp": {
      "command": "npx",
      "args": ["-y", "npmplus-mcp-server"]
    }
  }
}

Method 3: Global Settings

Add to your VS Code settings.json:

{
  "mcp.servers": {
    "npmplus-mcp": {
      "command": "npx",
      "args": ["-y", "npmplus-mcp-server"]
    }
  }
}

Step 3: Reload VS Code

Reload the window (Ctrl+R / Cmd+R) or restart VS Code to activate the MCP server.

Step 4: Verify Setup

Check VS Code's output panel for MCP server status. Look for:

• MCP server initialization messages
• NPM Plus connection confirmation
• Available tools list

Usage with AI Extensions

NPM Plus works with any VS Code AI extension that supports MCP:

• Cline: Use "@npmplus-mcp" prefix
• Continue: Natural language queries
• GitHub Copilot Chat: Ask about packages
• Other MCP-compatible extensions