Dify MCP server

This MCP server integrates Dify AI API with the Model Context Protocol to provide code generation capabilities for Ant Design business components. It supports text and image inputs and handles streaming responses efficiently.

Installation

Prerequisites

Before installing, make sure you have Node.js installed on your system.

Basic Setup

1. Clone the repository
2. Install dependencies:

npm install

3. Build the server:

npm run build

Environment Variables

The server requires a Dify API key to function properly. You'll need to set this as an environment variable when running the server:

DIFY_API_KEY=your_dify_api_key_here

Integration Options

Integrating with Continue

Add the following configuration to your ~/.continue/config.json file:

{
  "experimental": {
    "modelContextProtocolServers": [
      {
        "transport": {
          "type": "stdio",
          "command": "node",
          "args": ["your/path/dify-server/build/index.js"],
          "env": {
            "DIFY_API_KEY": "***"
          }
        }
      }
    ]
  }
}

Make sure to replace "your/path/dify-server/build/index.js" with the actual path to the built server on your system, and "***" with your actual Dify API key.

Integrating with Cline

Create or modify your Cline MCP settings file at your/path/cline_mcp_settings.json:

{
  "mcpServers": {
    "dify-server": {
      "command": "node",
      "args": ["your/path/dify-server/build/index.js"],
      "env": {
        "DIFY_API_KEY": "***"
      }
    }
  }
}

Again, replace the path and API key with your actual values.

Using the Server

Available Tools

The server provides the following tools:

• antd-component-codegen-mcp-tool: Generates Ant Design business component code
  • Accepts text input describing the desired component
  • Optionally accepts image input for visual references
  • Returns generated code via streaming response

Debugging

Since MCP servers communicate via standard input/output (stdio), debugging can be challenging. For easier debugging, use the MCP Inspector:

npm run inspector

This will provide a URL to a browser-based debugging tool where you can:

• Send test requests
• View responses
• Monitor server behavior

Example Usage

Once integrated, you can request Ant Design component code generation through either Continue or Cline by:

1. Describing the component you want to create
2. Optionally uploading reference images
3. Receiving the generated code as a streaming response

The server handles all communication with the Dify AI API behind the scenes, providing you with just the code you need.

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.