antd-component-codegen-mcp-toolLABSCO SUMMARY
A bridge, not a model: the component knowledge lives in the Dify app behind the key.
That is the whole shape of it — the server handles the MCP side, the upload and the streaming, and the Dify application decides what good Ant Design code looks like. Being able to attach an image is what makes it useful in practice: hand it the design and ask for the component.
What it is
A TypeScript server that forwards your request to a Dify AI application built for Ant Design component generation, and streams the answer back.
What you get
- antd-component-codegen-mcp-tool generates Ant Design business-component code
- Text input, and optionally an image alongside it
- Image files uploaded to Dify as part of the request
- Streaming responses from the Dify API rather than one blocking wait
Requirements
A Dify API key, supplied as DIFY_API_KEY in the client's environment block. Build the TypeScript with npm run build, then have the client launch build/index.js with node. Config examples are given for both Continue and Cline.
Setup effort
Build from source — git clone https://github.com/AI-FE/dify-mcp-server.git
USE CASES
01
Turning a design screenshot into component code
Attach the image with your description; the file is uploaded and the generated code streams back.
02
Scaffolding an Ant Design business component
Describe what the component should do and get a first version to edit rather than a blank file.
03
Keeping generation inside the editor
Register it in Continue or Cline so the code arrives where you are already working.
1 tool
Listed in project docs. Your client may show a different list.
BEFORE YOU INSTALL
What to know first
Tools you get
1 tool named in the project's documentation.
Requires
- node on PATH
- DIFY_API_KEY in your environment
INSTALLATION
Connect your client
This one is built from source rather than installed with a single command.
Server setup
TERMINAL
git clone https://github.com/AI-FE/dify-mcp-server.git
cd dify-mcp-server
npm install
npm run buildMCP Clients
Continue
CONTINUE · JSON
{
"experimental": {
"modelContextProtocolServers": [
{
"transport": {
"type": "stdio",
"command": "node",
"args": [
"<YOUR_PATH_TO_DIFY_SERVER>/build/index.js"
],
"env": {
"DIFY_API_KEY": "<YOUR_DIFY_API_KEY>"
}
}
}
]
}
}<YOUR_PATH_TO_DIFY_SERVER>/build/index.js is the absolute path to build/index.js in your clone, and *** is your Dify API key.
Cline
CLINE · JSON
{
"mcpServers": {
"dify-server": {
"command": "node",
"args": [
"<YOUR_PATH_TO_DIFY_SERVER>/build/index.js"
],
"env": {
"DIFY_API_KEY": "<YOUR_DIFY_API_KEY>"
}
}
}
}<YOUR_PATH_TO_DIFY_SERVER>/build/index.js is the absolute path to build/index.js in your clone, and *** is your Dify API key.
