Dify Chat 文档
Guide
FAQ
Guide
FAQ

自定义应用配置管理

为方便演示, 在 React SPA 版本中，我们默认使用 LocalStorage 进行应用配置管理，而在 Next.js 版本中，我们默认使用的是本地 JSON 文件。

如果你想自定义应用配置管理服务，请阅读以下内容。

确定运行模式

在开始配置之前，确保你的运行模式是多应用模式。

React SPA
Next.js
packages/react-app/src/App.tsx
// 初始化全局运行时配置
difyChatRuntimeConfig.init('multiApp')

自定义应用配置管理

React SPA 版本

配置入口

packages/react-app/src/services/app/multiApp/index.ts
// 默认使用 LocalStorage 存储
import DifyAppService from './localstorage';

export const appService = new DifyAppService();

内置实现

1. LocalStorage

使用 LocalStorage 数据进行存储，当用户切换浏览器后，数据会丢失，仅作为演示用。

2. 静态数据

使用静态数据进行存储，仅支持查询，不支持修改数据，适用于用户无需自定义应用的场景。

定义用户可访问的应用列表：

packages/react-app/src/services/app/multiApp/static-readonly/data.ts
import { AppModeEnums, IDifyAppItem } from '@dify-chat/core'

/**
 * 静态的应用列表，用于演示
 */
export const staticAppList: IDifyAppItem[] = [
	{
		// 应用唯一标识，不重复即可
		id: '0.270357011315995',
		// 应用信息，包括名称、描述、标签、模式等
		info: {
			// 应用名称
			name: 'My Chatflow APP',
			// 应用描述
			description: '我的 Chatflow 应用',
			// 应用标签
			tags: [],
			// 应用模式
			mode: AppModeEnums.CHATFLOW,
		},
		// API 请求配置，包括 API Base 和 API Key
		requestConfig: {
			// API Base 地址
			apiBase: 'https://api.dify.ai/v1',
			// API 密钥
			apiKey: 'app-xxxxxxx',
		},
	},
]

3. Restful API

通过接口获取和修改数据，推荐使用🌟

默认请求的后端服务地址为 http://localhost:3000，你可以根据你的需要修改。

启动后端服务：

packages/server
pnpm dev

自定义后端服务

如果内置的 Restful 实现无法满足你的需求，你可以自定义你的后端服务，请遵循以下步骤进行操作。

首先，修改后端服务地址为你的自定义地址。

packages/react-app/src/services/app/multiApp/restful.ts
// 比如你的自定义后端服务地址是 http://localhost:4567
const API_BASE_URL = 'http://localhost:4567'

然后，实现以下接口：

接口名称 请求方法 接口路径 请求参数 返回参数
获取 App 配置列表 GET /apps 无 IDifyAppItem[]
获取 App 配置详情 GET /apps/:id 无 IDifyAppItem
添加 App 配置 POST /apps IDifyAppItem 无
更新 App 配置 PUT /apps/:id IDifyAppItem 无
删除 App 配置 DELETE /apps/:id 无 无

Next.js 版本

配置入口

packages/nextjs-app/services/app/multiApp/index.ts
# 使用 fs 实现
export * from "./fs";

内置实现

1. 本地文件存储

使用本地文件进行存储，支持完整的 CRUD，但存在丢失数据的风险。

配置示例：

packages/nextjs-app/.dify-chat/storage/apps.json
[
  {
    "id": "1751001348066",
    "info": {
      "name": "Chatflow Demo",
      "description": "",
      "tags": [
        "参数",
        "测试"
      ],
      "mode": "advanced-chat",
      "author_name": "Dify"
    },
    "requestConfig": {
      "apiBase": "https://api.dify.ai/v1",
      "apiKey": "app-xxx"
    },
    "answerForm": {
      "enabled": true,
      "feedbackText": "你提交了一个表单"
    },
    "inputParams": {
      "enableUpdateAfterCvstStarts": true
    },
    "extConfig": {
      "conversation": {
        "openingStatement": {
          "displayMode": "always"
        }
      }
    }
  }
]

2. Restful API

通过 API 接口管理，支持完整的 CRUD，推荐使用🌟

默认请求的后端服务地址为 http://localhost:3000，你可以根据你的需要修改。

启动后端服务：

packages/server
pnpm dev

自定义后端服务

如果内置的 Restful 实现无法满足你的需求，你可以自定义你的后端服务，请遵循以下步骤进行操作。

首先，修改后端服务地址为你的自定义地址。

packages/nextjs-app/services/app/multiApp/restful.ts
// 比如你的自定义后端服务地址是 http://localhost:4567
const API_BASE_URL = 'http://localhost:4567'

然后，实现以下接口：

接口名称 请求方法 接口路径 请求参数 返回参数
获取 App 配置列表 GET /apps 无 IDifyAppItem[]
获取 App 配置详情 GET /apps/:id 无 IDifyAppItem
添加 App 配置 POST /apps IDifyAppItem 无
更新 App 配置 PUT /apps/:id IDifyAppItem 无
删除 App 配置 DELETE /apps/:id 无 无
ON THIS PAGE