dify-api-core

介绍

        面向企业级应用的 Dify 快速开发模块包。基于 React + TypeScript，本库对 Dify1.13.0 核心 API 进行了深度抽象，提供开箱即用的标准化响应模型。其设计初衷是极致简化二开流程：底层的数据请求、参数组装及类型定义均已预置完成，开发人员可完全从繁琐的后端对接中解放出来，全心投入于界面体验与业务逻辑的构建。

依赖

        模块包中会带有一些测试用的UI组件，具体依赖如下,请确保核心依赖已安装（模块包主要是对api进行封装，所以本身不提供任何UI组件）。

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-json-view": "^1.21.3"
  },
  "devDependencies": {
    "@ant-design/icons": "^5.2.6",
    "@ant-design/x": "^1.4.0",
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.18.2",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-function-bind": "^7.18.9",
    "@babel/plugin-transform-runtime": "^7.18.9",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "@types/lodash": "^4.17.15",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@types/webpack-env": "^1.18.8",
    "antd": "^5.19.1",
    "antd-style": "^3.7.1",
    "babel-loader": "^8.2.5",
    "babel-plugin-import": "^1.13.5",
    "babel-plugin-module-resolver": "^4.1.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "lodash.debounce": "^4.0.8",
    "mini-css-extract-plugin": "^2.6.0",
    "react-codemirror2": "^8.0.1",
    "react-router-dom": "^6.16.0",
    "sass": "^1.89.2",
    "sass-loader": "^16.0.5",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.4.1",
    "typescript": "^5.8.3",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.1"
  }

核心类

        该模块对外暴露了两个核心类：DifyAppChatService 和 DifyAppWorkFlowService。底层均基于 fetch 实现 API 调用。其中，DifyAppChatService 封装了 Dify 中 Chatflow、Chat、Agent 及 Text 类型的应用接口；DifyAppWorkFlowService 则专门针对 Workflow 类型的应用进行了封装。         

完整暴露类如下：

| 序号 | 类名 | 作用 | | :--- | :--- | :--- | | 核心服务类 | | | | 1 | DifyAppChatService | 核心服务类，封装 Chatflow、Chat、Agent 等应用的对话 API | | 2 | DifyAppWorkFlowService | 核心服务类，封装 Workflow 类型应用的工作流运行 API | | 请求与响应模型    | | | | 3 | DifyAppChatMessagesRequest | 发起聊天/对话请求时的参数封装 | | 4 | DifyAppWorkFlowRunRequest | 发起工作流运行请求时的参数封装 | | 5 | DifyAppChatCompletionResponse | 聊天应用（非流式）的完整响应结构 | | 6 | DifyAppChatChunkCompletionResponse | 聊天应用（流式输出）的流式响应块结构 | | 7 | DifyAppWorkFlowRunResponse | 工作流运行（非流式）的完整响应结构 | | 8 | DifyAppWorkFlowRunChunkResponse | 工作流运行（流式输出）的流式响应块结构 | | 9 | DifyAppConversationsResponse | 获取历史会话列表的响应结构 | | 10 | DifyAppMessagesResponse | 获取历史消息列表的响应结构 | | 11 | DifyAppConversationResponse | 获取单个会话详情的响应结构 | | 12 | DifyAppChatFileResponse | 处理文件上传/预览相关的响应结构 | | 13 | DifyAppBaseInfoResponse | 获取应用基础信息（如名称、描述等）的响应结构 | | 14 | DifyAppParametersResponse | 获取应用配置参数（如开场白、提示词等）的响应结构 | | 业务数据实体 | | | | 15 | DifyAppConversation | 会话（Conversation）实体对象 | | 16 | DifyAppMessage | 对话消息（Message）实体对象 | | 17 | DifyAppAgentThought | Agent 推理过程（Thought）实体对象 | | 18 | DifyAppWorkFlowRunData | 工作流运行过程中的核心数据实体 | | 19 | DifyAppWorkFlowRunChunkData | 工作流流式输出过程中的数据块实体 | | 20 | DifyAppMessageFile | 消息中关联的文件实体对象 | | 21 | DifyAppChatFile | 聊天中使用的文件对象封装 | | 筛选、枚举与基础类型        | | | | 22 | DifyAppConversationFilter | 用于筛选/查询会话列表的过滤条件对象 | | 23 | DifyAppMessageFilter | 用于筛选/查询消息列表的过滤条件对象 | | 24 | DifyAppChatMessageResponseError | 聊天接口调用失败时的错误信息封装 | | 25 | DifyAppMessageEventType | 消息事件类型枚举（如 message, message_end 等） | | 26 | DifyAppResponseMode | 响应模式枚举（如 blocking 阻塞式, streaming 流式） | | 27 | DifyAppResponse | API 响应的通用基础结构封装 | | 28 | ResponseJsonView | 用于 JSON 视图展示的通用接口/类型定义 | | 29 | DifyAppUserInputForm | 用户输入表单字段的类型定义 | | 30 | DifyAppInputControl | 输入控件（如文本框、下拉框等）的配置定义 | | 31 | DifyAppButtonAction | 按钮交互动作的类型定义 | | 32 | DifyAppWorkFlowPauseReason | 工作流暂停原因的类型定义 |

如何使用

        首先先安装依赖，一定要安装最新的。

npm i dify-api-core

or

yarn add dify-api-core

        其次引入核心类。

import {
  DifyAppChatService,
  DifyAppWorkFlowService
} from "dify-api-core";

具体使用方法请参考示例代码，如下(后续有不明白的，我再基于实际情况单独出个示例的代码仓库)：

  const { message } = App.useApp();
  /** 应用密钥，基于配置切换 */
  const [key, setKey] = useState<string>("");
  /** 聊天会话 ID */
  const [conversationId, setConversationId] = useState<string>("");
  /** App 模式，默认：ChatFlow */
  const [value, setValue] = useState(2);
  /** 用户 ID */
  const [user, setUser] = useState("");
  /** 聊天内容 */
  const [query, setQuery] = useState("查询2025年下半年广东省影像服务有哪些?");
  /** 请求加载状态 */
  const [loading, setLoading] = useState(false);
  /** 请求错误消息 */
  const [repErrMsg, setRepErrMsg] = useState("");
  /** 消息类型，参考:{@link DifyAppMessageEventType} */
  const [eventType, setEventType] = useState("");
  /** 执行结果 */
  const [result, setResult] = useState("");
  /** 执行工作流 或 聊天会话 唯一ID，这个ID非常核心 */
  const [idLabel, setIdLabel] = useState("会话 ID");
  /** 执行工作流（流式）过程中的任务ID，这个ID非常核心 */
  const [taskId, setTaskId] = useState("");
  /** 工作流（流式）运行实例ID，这个ID非常核心，中断时可以基于这个ID跟踪后续的恢复状态 */
  const [workflowRunId, setWorkflowRunId] = useState("");
  /** 聊天前上传文件的ID，（为了演示，只取第一个） */
  const [fileId, setFileId] = useState("");
  /** 会话重命名（新名称）*/
  const [newName, setNewName] = useState("");
  /** 人工介入表单提交的动作（确认的操作）*/
  const [formAction, setFormAction] = useState("");
  /** 人工介入表单令牌（拿到这个令牌可以触发formAction的提交）*/
  const [formToken, setFormToken] = useState("");
  /** 选择上传的文件列表 */
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  /** 上传进度 */
  const [uploading, setUploading] = useState(false);
  /** 图片或者音频上传地址 */
  const [uploadUrl, setUploadUrl] = useState("");
  /** dify应用用户输入表单（文本、段落和下拉框） */
  const [userInputForm, setUserInputForm] = useState<DifyAppUserInputForm[]>(
    [],
  );
  ........................此处省略..............................................
  /** 工作流流式消息回调（工作流是没有会话这个概念的） */
  const onWorkFlowMessageEvent = (rep: DifyAppWorkFlowRunChunkResponse) => {
    if (rep.status !== 200) {
      setRepErrMsg(`${rep.code || ""} :${rep.message || ""} `);
      setLoading(false);
    }
    console.log("chat message event", rep);
    setEventType(rep.event);
    setTaskId(rep.task_id);
    if (
      rep.event == DifyAppMessageEventType.EVENT_WORKFLOW_FINISHED ||
      rep.event == DifyAppMessageEventType.EVENT_ERROR
    ) {
      if (rep.workflow_run_id) {
        setConversationId(rep.workflow_run_id);
      }
      setLoading(false);
      message.success("流式工作流执行完毕！");
    }
    setResult(JSON.stringify(rep));
  };

  /** 处理（发送）应用消息（流式） */
  const handleChatMessageStream = async () => {
    let msgReq: DifyAppChatMessagesRequest = new DifyAppChatMessagesRequest({
      query,
      user,
      inputs: value === 5 ? {query: query} : {}, // 仅做演示，如果是文本生成应用，就传入query参数，其他应用不传（因为其他应用可能没有输入参数），这个参数的作用是让模型在生成答案的时候可以参考这个输入参数的值进行理解和回答
    });
    /** 检查请求参数与当前应用要求的输入变量是否匹配 */
    let checkResponse = await DifyAppChatService.checkAppChatRequest(
      key,
      baseUrl,
      msgReq,
    );
    if (checkResponse.status !== 200) {
      setRepErrMsg(
        `${checkResponse.code || ""} :${checkResponse.message || ""} `,
      );
      return;
    }
    setResult("");
    setTaskId("");
    setRepErrMsg("");
    setLoading(true);
    DifyAppChatService.chatMessageStream(
      key,
      `${baseUrl}`,
      msgReq,
      onChatStreamMessageEvent,
    );
  };
  ........................此处省略..............................................
  <Button
          type="primary"
          onClick={handleChatMessageStream}
          loading={loading}
        >
          发送消息(流式)
  </Button>

效果图

部分截图效果如下：

• 获取应用基本信息

• Agent发起流式聊天会话

• 基于会话ID获取对应的历史消息

人工介入WorkFlow展示效果：

联系我

• CSDN博客：https://blog.csdn.net/Appleyk
• B站：西柚配咖啡