Dify API集成开发详解：将AI应用嵌入自有网站或App

Finn

发布时间：2026-09-22| 4人浏览过

原创

将Dify构建的AI应用嵌入自有系统，核心在于通过HTTP请求与Dify后端进行数据交互。这种方式允许你保留原有的用户界面和品牌风格，同时利用Dify强大的模型编排能力。相比直接使用大模型原生API，Dify API封装了提示词工程、上下文管理和知识库检索等复杂逻辑，让前端只需关注输入输出。

在开始之前，你需要在Dify平台创建一个应用并发布为“API访问”模式。确保你已经熟悉基本的HTTP请求发送方法，无论是使用Postman测试还是在前端代码中调用。

Dify API集成开发详解：将AI应用嵌入自有网站或App

在Dify应用概览页点击访问API，创建并复制API密钥

1. 获取API密钥与基础配置

登录Dify控制台，进入目标应用的【概览】页面。在左侧菜单找到【访问API】选项，点击后会看到当前应用的API地址和密钥管理区域。

点击【创建密钥】按钮，系统会生成一串以app-开头的字符串。这串字符是你的身份凭证，务必妥善保存，因为一旦关闭弹窗就无法再次查看完整密钥。在实际开发中，建议将此密钥存储在后端环境变量中，避免直接暴露在前端代码里。

注意区分【基础版】和【专业版】API路径的差异，通常基础版适用于简单的聊天完成场景，而专业版支持更复杂的消息历史管理。复制API Base URL，例如https://api.dify.ai/v1，这将作为所有请求的前缀。

Dify API集成开发详解：将AI应用嵌入自有网站或App

1. 获取API密钥与基础配置

2. 构造首个聊天请求

Dify的聊天接口通常位于/chat-messages路径下。我们需要发送一个POST请求，包含查询内容、用户标识和响应模式。

请求头必须包含Authorization: Bearer <your-api-key>和Content-Type: application/json。其中user字段用于标识终端用户，Dify会据此维护独立的会话上下文。

以下是一个标准的请求体示例：

{
  "inputs": {},
  "query": "你好，请介绍一下你自己",
  "response_mode": "blocking",
  "conversation_id": "",
  "user": "user-123"
}

response_mode设置为blocking时，服务器会等待完整结果生成后一次性返回。这在调试阶段非常有用，你可以直接在Postman中看到完整的JSON响应，包含answer字段即为AI的回答内容。

Dify API集成开发详解：将AI应用嵌入自有网站或App

使用Postman发送blocking模式请求并查看完整JSON响应

3. 实现流式响应以提升体验

在生产环境中，为了减少用户等待焦虑，通常采用流式（Streaming）响应。将response_mode改为streaming，服务器会以Server-Sent Events (SSE) 格式分批返回数据。

前端处理流式数据需要监听事件流。每个数据块以data:开头，包含部分生成的文本。你需要将这些片段拼接起来，实时更新UI上的文字显示。

以下是使用JavaScript Fetch API处理流式响应的核心逻辑：

fetch('https://api.dify.ai/v1/chat-messages', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer app-xxx',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    inputs: {},
    query: '写一首关于春天的诗',
    response_mode: 'streaming',
    user: 'user-123'
  })
})
.then(response => {
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  
  function readStream() {
    return reader.read().then(({ done, value }) => {
      if (done) return;
      const chunk = decoder.decode(value, { stream: true });
      // 解析SSE格式数据，提取answer字段并更新UI
      processChunk(chunk);
      return readStream();
    });
  }
  return readStream();
});

注意，SSE数据可能包含多个事件类型，如message、agent_thought等。在解析时需判断event字段，只提取answer事件中的文本内容，忽略中间的处理状态信息。