5 分钟接入 Dify 应用

目前该模板提供了7个Dify示例，下面我将带你快速接入示例

1. 获取项目并初始化项目

从 Github 仓库 获取项目并初始化 AI 项目。初始化项目流程请参考之前的两个文档和视频教程，是一致的：

2. 新增 Dify 相关的 Bucket 和表

2.1 新增 Bucket

因为 Dify 需要使用到文件上传功能，所以需要新增一个 supabase 的 Bucket: dify-files

主要配置：

  • 名称：dify-files
  • 访问权限：public
  • Policy:
    • 选择Give users access to only their own top level folder named as uid
    • 并勾选Insert/Update/SELECT/Delete

2.2 新增表

创建dify_text_completion_saved表，用来保存用户期望保存的 Dify 的文本生成型应用的结果。

  1. 复制/sql/dify.sql文件的内容
  2. 打开 supabase 的 SQL 编辑器（SQL Editor），执行该 SQL 文件

3. 配置 Dify 环境变量

修改.env文件配置 Dify 相关的环境变量，目前 Dify 的应用需要获取和应用唯一匹配的 API 密钥，目前我们的示例应用中有 7 个，所以目前给出了 7 个环境变量的配置。当然，你可以根据你的需求进行增删。

这边文档教程部分，我们只配置第一个DIFY_API_KEY_APP_INTERVIEW（官方示例：AI 前端面试官），其他环境变量可以参考第一个进行配置。

3.1 打开.env

打开.env文件，找到你要配置的 Dify 应用的环境变量，DIFY_API_KEY_APP_INTERVIEW就是我们需要配置的。如果你是自己部署的 Dify，那么你也需要修改DIFY_BASE_URL为你自己的 Dify 服务器地址。

# DIFY相关
# DIFY服务器地址
DIFY_BASE_URL=https://api.dify.ai/v1
DIFY_API_KEY_APP_INTERVIEW=app-dify-api-key

# 下面的Dify环境变量可以参考第一个进行配置
# DIFY_API_KEY_APP_TRANSLATOR=app-dify-api-key
# DIFY_API_KEY_APP_CODE_INTERPRETER=app-dify-api-key
# DIFY_API_KEY_APP_IMAGE_INTERPRETER=app-dify-api-key
# DIFY_API_KEY_APP_PDF_CHAT=app-dify-api-key
# DIFY_API_KEY_APP_PDF_PAPER_INPUT=app-dify-api-key
# DIFY_API_KEY_APP_LITERATURE_REVIEW=app-dify-api-key

3.2 在 Dify 中获取 API 密钥

1. 在应用配置页面点击【访问API】

dify-app-config

2. 获取 API 密钥

  • 点击【API 密钥】
  • 创建密钥
  • 复制密钥

dify-app-config

3. 填入到环境变量中

将刚才获取到的密钥填入到环境变量中

# DIFY相关
# DIFY服务器地址
DIFY_BASE_URL=https://api.dify.ai/v1
DIFY_API_KEY_APP_TRANSLATOR=app-xyz123abc456def789ghi

4. 配置 Dify 应用

接下来我们需要打开config/ai/index.ts文件，配置我们的 Dify 应用。这边我们还是已第一个应用为例

const aiConfig: AiConfig = {
  enable: true,
  apps: {
    // 应用1： 前端面试（请自行修改）
    interview: {
      id: "interview",
      name: "前端面试",
      description:
        "一个模拟的前端面试官，通过提问的方式对前端开发的技能水平进行检验。",
      icon: "👨‍💻‍",
      iconBgColor: "#e0f2fe",
      type: "chat",
      typeName: "聊天助手",
      path: "/ai/chat/interview",
      apikey: "DIFY_API_KEY_APP_INTERVIEW",
    },
    //。。。其他应用可参考第一个进行配置
  },
};

这里面有几个需要注意的：

1. 确保应用的key/id/path保持一致

下面三处的文字请保持一致，我们这里都是interview，你可以根据你的应用本身的语义化进行修改，例如你是一个翻译应用，那么你可以修改为translator。但需要确保三处保持一致。

dify-app-config

2. 确保apikey的值为环境变量中的KEY

例如我们这里.env中配置的Dify API 密钥的key为DIFY_API_KEY_APP_INTERVIEW，那么我们这里apikey的值就为DIFY_API_KEY_APP_INTERVIEW。

dify-app-config

3. 确保path的值对应正确的路径

  • 对话型应用 API + 工作流编排对话型应用 API: /ai/chat/[appId]
  • 文本生成型应用 API: /ai/completion/[appId]
  • Workflow 应用 API: /ai/workflow/[appId]

具体参考API 分类与 NuxtBase 的对应关系

5. 启动项目

启动项目，访问http://localhost:3000，并点击到你的Dify应用，你将看到Dify应用的聊天对话示例。

Dify应用