应用实践-全栈 | 基于 Vercel AI SDK 构建 Dify AI Provider | Chuck

简述

为何要构建 Dify AI Provider？
- Vercel AI SDK 支持模型较多，并且有搭建好的应用，调用方便。（DeepSeek 火起来后就很快就出了 @ai-sdk/deepseek）
- Dify 优势在于后端 Workflow，前端视觉和附加功能一般。
难点
- 基于 AI SDK 搭建的应用模板 ai-chatbot 考虑到通用性，在文件上传入口的配置相对简单。
  - Dify 支持在线和本地文件上传，并且支持丰富的文件类型。
- 调用 Dify 和模型字段完全不同，而需要考虑对话的连续性和用户标识的对应。
  - 模型对话一般没有用户标识，Dify 有。
  - 模型多轮对话是将所有对话集中在一个 messages 数据，而 Dify 通过 conversation_id 作为标识匹配，只传输用户最新问题。
  - 本地文件需要上传后先接受返回的云端文件标识数据，再组成 files 字段。
应用网址：https://www.aibangxuanxing.com/

资料集

以下是核心的资料集，要把每个资料集先作为单个步骤运行一遍才能了解。
基于 APIs 开发 | Dify：https://docs.dify.ai/zh-hans/guides/application-publishing/developing-with-apis
vercel/ai-chatbot: https://github.com/vercel/ai-chatbot
A full-featured, hackable Next.js AI chatbot built by Vercel
vercel/ai: https://github.com/vercel/ai
The AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents
- AI SDK Core: streamText: https://sdk.vercel.ai/docs/reference/ai-sdk-core/stream-text
Community Providers: Writing a Custom Provider: https://sdk.vercel.ai/providers/community-providers/custom-providers
- Younis-Ahmed/qwen-ai-provider: https://github.com/younis-ahmed/qwen-ai-provider
  Community-built Qwen AI Provider for Vercel AI SDK - Integrate Alibaba Cloud's Qwen models with Vercel's AI application framework
- Xiang-CH/zhipu-ai-provider: https://github.com/Xiang-CH/zhipu-ai-provider
  Zhipu AI Provider for Vercel AI SDK. This community-built integration allows you to use Zhipu AI's GLM series language models directly within your Vercel AI applications.

流程思路

了解 AI SDK 核心接口 LanguageModel，以下是两个核心文件：
- LanguageModelV1：语言模型的核心接口，定义了模型必须实现的方法和属性。
  - specificationVersion：指定接口版本 v1
  - provider：提供者名称
  - modelId：模型标识符
  - defaultObjectGenerationMode：默认对象生成模式
  - doGenerate：非流式生成方法
  - doStream：流式生成方法
- LanguageModelV1Prompt：标准化的提示类型，由消息数组组成，每条消息都有特定的角色和内容。
  - 支持多种角色：system、user、assistant、tool
  - 每种角色支持不同类型的内容部分
了解基于 AI SDK 搭建的应用 ai-chatbot
- 数据字段：lib\db\schema.ts
- 数据传递链路
  - 用户输入：文本、在线文件
  - 模型数据流形式回复
- 核心组件：components\chat.tsx、components\multimodal-input.tsx
了解 Dify 调用时 HTTP 字段和数据流返回字段。
登录后创建应用，访问 API 页面才能看到明细。
使用 LanguageModelV1 包装 Dify 数据，接入 ai-chatbot。可以浏览资料集中的阿里和智谱的项目，两个代码包是今年年后上线的，结构清晰，比 AI SDK 中原有的模型代码包更直观。以下是三个核心文件：
- provider.ts：供应商基础配置。
- provider-chat-language-model.ts：语言模型核心接口，定义了模型必须实现的方法和属性。
- convert-to-provider-chat-messages.ts：将应用中的用户消息转换为 provider 聊天消息格式。
修改 ai-chatbot
- 每个接入的模型有独立 id，用 selectedChatModel 给模型调用独立的组件，区分页面的描述和支持不同的文件类型。
- 了解 AI SDK streamText，用 experimental_providerMetadata 字段包装 Dify 返回的本地文件数据字段。

备选方案

只修改 ai-chatbot 应用，接入 Dify。
- lib\db\schema.ts：添加 Dify 扩展字段：对话相关和文件相关，迁移后为 Dify 创建专门的查询函数。
  - 用户标识映射：user - user.id
  - 消息标识映射：message_id - message.id
  - 对话标识映射：conversation_id - chat.id
  - 消息内容映射：query - message.content
  - 文件处理：添加 Dify 本地文件返回的数据储存表
- 使用 TransformStream 和 @ai-sdk/ui-utils 中 formatDataStreamPart 处理 Dify 数据流。