使用说明

项目简介

Dify Server MCP 服务器是一个基于 Model Context Protocol 的应用后端,它集成了 Dify AI API,旨在为 LLM 客户端提供 Ant Design 业务组件的代码生成能力。通过 'antd-component-codegen-mcp-tool' 工具,开发者可以利用自然语言描述和可选的图片输入,快速生成所需的 Ant Design 组件代码。

主要功能点

  • Ant Design 组件代码生成工具: 提供 'antd-component-codegen-mcp-tool' 工具,能够根据用户输入的文本描述和图片(可选),调用 Dify AI API 生成 Ant Design 业务组件的代码。
  • 文本和图片输入支持: 工具支持文本输入,用户可以使用自然语言描述所需的组件功能和样式。同时,也支持上传图片作为参考,更精确地表达设计需求。
  • 流式响应处理: 代码生成结果以流式方式返回,用户可以逐步获取生成的代码,并及时查看效果。
  • 标准输入输出通信: 服务器通过标准输入输出 (stdio) 与 MCP 客户端进行通信,易于集成和部署。

安装步骤

  1. 安装 Node.js 和 npm: 确保您的开发环境中已安装 Node.js 和 npm (Node 包管理器)。
  2. 克隆仓库: 将 dify-mcp-server 仓库克隆到本地:
    git clone https://github.com/AI-FE/dify-mcp-server.git
    cd dify-mcp-server
  3. 安装依赖: 在仓库根目录下,运行以下命令安装项目依赖:
    npm install
  4. 构建服务器: 运行以下命令构建服务器代码:
    npm run build
    构建成功后,将在 'build' 目录下生成 'index.js' 文件。

服务器配置

以下是在 MCP 客户端 (如 Continue 或 Cline) 中配置 Dify Server MCP 服务器的示例。您需要将以下 JSON 配置添加到您的 MCP 客户端配置文件中。

{
  "serverName": "dify-server",
  "transport": {
    "type": "stdio",
    "command": "node",
    "args": ["/path/to/dify-server/build/index.js"],  //  请替换为 dify-server 仓库 build 目录中 index.js 文件的实际路径
    "env": {
      "DIFY_API_KEY": "***"  //  请替换为您的 Dify API 密钥
    }
  }
}

配置参数说明:

  • 'serverName': 自定义服务器名称,用于在 MCP 客户端中标识和引用该服务器,例如 "dify-server"。
  • 'transport': 定义服务器的传输协议配置。
    • 'type': 传输协议类型,这里使用 'stdio',表示通过标准输入输出进行通信。
    • 'command': 启动服务器进程的命令,这里使用 'node',假设您的环境中已安装 Node.js 并可通过 'node' 命令执行。
    • 'args': 传递给 'command' 的参数数组。
      • '"/path/to/dify-server/build/index.js"': 请务必将此路径替换为您本地 dify-server 仓库 'build' 目录中 'index.js' 文件的绝对路径。 这是服务器启动脚本的路径。
    • 'env': 环境变量配置。
      • 'DIFY_API_KEY': 请将 '*' 替换为您在 Dify 平台申请的 API 密钥。** Dify Server 需要此密钥才能调用 Dify AI API。

重要: 请根据您的实际环境修改 'args' 中的文件路径和 'env' 中的 API 密钥。

基本使用方法

  1. 启动 MCP 客户端: 配置完成后,启动您的 MCP 客户端 (如 Continue 或 Cline)。客户端应能自动连接到 Dify Server MCP 服务器。
  2. 调用工具: 在 MCP 客户端中,您可以使用 'antd-component-codegen-mcp-tool' 工具。根据客户端的具体使用方式,输入工具名称和相应的参数 (例如,文本描述和图片路径)。
  3. 获取代码: 工具执行后,Dify Server 将调用 Dify AI API 生成 Ant Design 组件代码,并通过流式响应返回给 MCP 客户端。您可以在客户端界面中查看生成的代码。

请参考您的 MCP 客户端文档,了解如何在客户端中配置和使用 MCP 服务器以及工具。

信息

分类

开发者工具