Open Source | Building Dify AI Provider with Vercel AI SDK

Open Source

• ai-chatbot-dify-provider
  • Refactored based on the ai-chatbot version updated on 2025-05-25, supporting Dify conversations and file upload functionality.
  • The conversation routing function is streamText, so when calling Dify, it must be response_mode: streaming.
  • File type and size limits must match the Dify backend configuration.

Overview

• Why build a Dify AI Provider?
  • Vercel AI SDK supports numerous models and comes with pre-built applications for easy invocation. (For instance, after DeepSeek gained popularity, @ai-sdk/deepseek was quickly released.)
  • Dify excels in backend workflows, while its frontend visuals and additional features are generally basic.
• Challenges
  • The ai-chatbot application template built on AI SDK, designed for generality, has relatively simple configurations at the file upload entry point.
    • Dify supports both online and local file uploads and a wide range of file types.
  • Invoking Dify and model fields are entirely different, requiring consideration for conversation continuity and user identification mapping.
    • Model conversations typically lack user identifiers, whereas Dify includes them.
    • Multi-turn conversations in models consolidate all dialogues into a single messages data structure, while Dify uses conversation_id as an identifier, transmitting only the user's latest query.
    • Local files need to be uploaded first to receive returned cloud file identifier data before forming the files field.
• Application URL: https://www.aibangxuanxing.com/

Resource Collection

• Below is the core resource collection; each resource should be run as an individual step to understand fully.
• Developing with APIs | Dify

  【Update】Following Dify's rebranding on May 15th, the API documentation has been updated (though not yet complete): Send Conversation Message - Dify Docs

• vercel/ai-chatbot

  A full-featured, hackable Next.js AI chatbot built by Vercel

• 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
• Community Providers
  • Younis-Ahmed/qwen-ai-providerQwen

    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-providerZhipu AI

    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.

  • warmwind/dify-ai-provider Dify AI

    Dify provider for Vercel AI SDK

Process Flow

• Understand the AI SDK core interface LanguageModel, with the following two core files:

  • LanguageModelV1: The core interface for language models, defining the methods and properties that models must implement.

    • specificationVersion: Specifies the interface version v1
    • provider: Provider name
    • modelId: Model identifier
    • defaultObjectGenerationMode: Default object generation mode
    • doGenerate: Non-streaming generation method
    • doStream: Streaming generation method

  • LanguageModelV1Prompt: Standardized prompt types, consisting of an array of messages, each with a specific role and content.

    • Supports multiple roles: system, user, assistant, tool
    • Each role supports different types of content parts

• Understand the ai-chatbot application built on AI SDK

  • Data fields: lib\db\schema.ts

  • Data transmission chain

    • User input: text, online files
    • Model response in data stream format

  • Core components: components\chat.tsx, components\multimodal-input.tsx

• Understand HTTP fields and data stream response fields when calling Dify.

  After logging in, create an application and visit the API page to see details.

  

• Use LanguageModelV1 to wrap Dify data and integrate it into ai-chatbot. Refer to the Alibaba and Zhipu projects in the resource collection; both code packages were launched after the Chinese New Year this year, with clear structures that are more intuitive than the original model code packages in AI SDK. The following are three core files:

  • provider.ts: Basic provider configuration.
  • provider-chat-language-model.ts: Core language model interface, defining the methods and properties that models must implement.
  • convert-to-provider-chat-messages.ts: Converts user messages in the application to the provider chat message format.

• Modify ai-chatbot

  • Each integrated model has a unique id; use selectedChatModel to call independent components for the model, distinguishing page descriptions and supporting different file types.
  • Understand AI SDK streamText, and use the experimental_providerMetadata field to wrap the local file data fields returned by Dify.

Alternative Solutions

• Only modify the ai-chatbot application to integrate Dify.
  • lib\db\schema.ts: Add Dify extension fields: conversation-related and file-related, and create specialized query functions for Dify after migration.
    • User identifier mapping: user - user.id
    • Message identifier mapping: message_id - message.id
    • Conversation identifier mapping: conversation_id - chat.id
    • Message content mapping: query - message.content
    • File handling: Add a data storage table for Dify local file returns
  • Use TransformStream and formatDataStreamPart from @ai-sdk/ui-utils to handle Dify data streams.