mocxykit

Source

This is an Frontend development service middleware that can be used with webpack and vite. Its main function is to visualize the configuration, manage http(s)-proxy, and mock data.

Catalog onlyCatalog onlySTDIO

Overview

mocxykit is a frontend development service middleware designed to visualize configurations, manage HTTP(S) proxies, and mock data, compatible with webpack and vite.

To use mocxykit, install it via npm with npm install mocxykit --save-dev, then configure it in your webpack or vite project as per the provided examples in the documentation.

Visual management of mock data and proxy configurations - Support for global and custom URL proxies - Dynamic switching between proxy and mock data - Integration with Ngrok for public access - Support for multiple environment variable management

Proxying requests during frontend development
Mocking API responses for testing
Visualizing and managing multiple proxy configurations
Enabling public access to local development environments using Ngrok

Add to your AI client

Use these steps to connect mocxykit in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "mocxykit-shunseven": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mocxykit-shunseven"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "mocxykit-shunseven": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mocxykit-shunseven"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "mocxykit-shunseven": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mocxykit-shunseven"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mocxykit-shunseven": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mocxykit-shunseven"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mocxykit-shunseven": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mocxykit-shunseven"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "mocxykit-shunseven": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mocxykit-shunseven"
      ]
    }
  }
}

FAQ

Can mocxykit be used with any frontend framework?

Yes! mocxykit can be integrated with any project using webpack or vite.

Is mocxykit free to use?

Yes! mocxykit is open-source and free to use.

How does mocxykit handle mock data?

mocxykit allows you to define mock data responses based on request parameters and supports random data generation using faker.

Developer tools