要集成Dify Agent到Web系统，需获取Application ID和API Key，启用API调用权限，构造含inputs、response_mode、user的POST请求；前端可用fetch或React Hook调用，注意处理answer、tool_calls及conversation_id。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让已有Web系统调用Dify构建的Agent能力，比如在CRM里点击“生成客户画像”就自动调用Agent分析历史工单和沟通记录，而不是让用户跳转到Dify页面或手动复制粘贴。
获取Agent调用所需的凭证与端点
进入Dify控制台 → 左侧导航栏点击“应用” → 找到目标Agent应用 → 点击右侧“发布”按钮 → 在弹出页中复制【Application ID】和【API Key】。这两个值必须同时使用，缺一不可，否则请求会返回401错误。
确认该Agent已启用“API调用”权限：在“发布”页底部勾选“允许通过API调用此应用”，未勾选则所有外部请求均被拒绝。
构造符合Agent语义的POST请求
Agent不同于普通聊天接口，它需要明确传递输入变量（inputs）而非仅靠query拼凑逻辑。例如你配置了两个Prompt变量{customer_id}和{include_history}，就必须在请求体中显式提供：
```json
{"inputs": {"customer_id": "CUST-8821", "include_history": true}, "query": "", "response_mode": "blocking", "user": "web-crm-20260607"}
```
注意：query字段可为空字符串，因为Agent主逻辑由inputs驱动；但user字段必须传入稳定标识，否则Dify无法隔离不同用户的会话上下文，会导致数据串扰。
在前端JavaScript中发起调用
方法一：使用fetch直接调用（适合轻量集成）
在你的Web系统JS文件中添加如下代码：
```js
const API_BASE = 'https://api.dify.ai/v1/chat-messages';
const APP_ID = 'app-5f9a3b2c1d8e4f0a9b7c6d5e4f3a2b1c';
const API_KEY = 'sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
async function runAgent(customerId) {
const res = await fetch(API_BASE, {
method: 'POST',
headers: {
'Authorization': `Bearer ${API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
inputs: { customer_id: customerId, include_history: true },
query: '',
response_mode: 'blocking',
user: `web-crm-${Date.now()}`
})
});
return res.json();
}
```
方法二：封装为React Hook（适合现代前端架构）
创建useDifyAgent.js：
```js
import { useState } from 'react';
export function useDifyAgent(appId, apiKey) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const execute = async (inputs, options = {}) => {
Loding = true;
try {
const res = await fetch('https://api.dify.ai/v1/chat-messages', {
method: 'POST',
headers: {
'Authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
inputs,
query: options.query || '',
response_mode: options.response_mode || 'blocking',
user: options.user || `web-${Math.random().toString(36).substr(2, 9)}`
})
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return await res.json();
} catch (err) {
setError(err.message);
throw err;
} finally {
Loding = false;
}
};
return { execute, loading, error };
}
```
处理Agent返回的结构化结果
第一步：解析响应体中的answer字段，它包含Agent最终生成的文本结果。
第二步：检查response中是否含tool_calls数组——若存在，说明Agent触发了工具调用（如查数据库、调第三方API），此时需在你自己的后端实现对应工具的代理逻辑，并将结果回传给Dify完成闭环。
第三步：提取conversation_id并持久化存储。下次调用时带上这个ID，Dify才能延续上下文，否则每次都是全新会话，Agent无法体现“记忆”能力。
