mocxykit

mocxykit is a frontend development middleware that acts as a proxy and MOCK data provider with a visual management interface. It supports multiple proxy targets, per-URL custom proxies, and dynamic MOCK generation with faker-based data. The MCP integration lets AI-assisted development fetch MOCK data or recently browsed requests directly via MCP protocols, enabling AI editors to request data by interface paths (e.g., api/todo-list) and receive structured responses. Use the built-in API request tool in the configuration UI to send API requests, inspect responses, and save results as MOCK data for fast local testing. The UI also provides synchronization with ApiFox data, versioned MOCK editing, and environment-variable switching for seamless development across different backends and configurations.

Prerequisites:

• Node.js (≥14) and npm/yarn installed

1. Install the Mocxykit package as a development dependency in your project:

npm install mocxykit --save-dev

2. Initialize or configure: ensure you have a local config or environment variables ready. Optionally, create a config path if you want to customize the MCP UI or endpoints.

3. Run the MCP server using npx (as configured in mcp_config):

npx mocxykit

4. Open the MCP configuration UI in your browser (default config page is /config) and adjust API rules, proxies, and MOCK settings as needed.

5. (Optional) If you prefer a different runtime, you can install and run via npm scripts or integrate into your dev server startup workflow.

Note: The exact startup command may vary depending on how you integrate mocxykit into your project; the above demonstrates a typical local dev workflow.

Tips and notes:

• Environment variables: use MOCKXYKIT_CONFIG_PATH to point to a custom config, or MOCKXYKIT_LANG to switch UI language.
• MCP enablement: in the MCP settings, enable the editors you need and ensure the cursor display option is configured if you want UI hints during development.
• MCP usage: reference mcpData API paths in your AI prompts to fetch MOCK data or recent requests automatically. For example, request mcpData api/todo-list to obtain data structures and mock examples.
• If you rely on ApiFox synchronization, ensure you provide a valid ApiFox access token as described in the documentation.
• Proxy rules support multiple patterns and can be refined per URL or globally; use regular expressions for advanced routing.
• When configuring MOCK data, you can use faker-generated values and data paths like data.list<100> to generate large mock datasets efficiently.
• If you encounter UI issues, ensure your dev server serves the /config page and that the environment has network access to any external services (ApiFox, remote backends, etc.).