Implementation:Langgenius Dify Use Models

Knowledge Sources	Langgenius_Dify
Domains	Frontend, API_Service
Last Updated	2026-02-12 07:00 GMT

Overview

React Query hooks for model management providing CRUD operations for model provider credentials, model-level credentials, model deletion, credential switching, and load balancing configuration.

Description

use-models.ts provides React Query hooks for the Dify model management system, enabling full lifecycle management of model providers and their credentials. The module exports hooks organized into provider-level and model-level operations. Provider-level hooks: useModelProviderModelList fetches all models for a given provider; useGetProviderCredential fetches provider-level credential details with optional credentialId filtering; useAddProviderCredential, useEditProviderCredential, and useDeleteProviderCredential are useMutation hooks for CRUD operations on provider credentials; useActiveProviderCredential switches the active credential for a provider. Model-level hooks: useGetModelCredential fetches credentials for a specific model with parameters for model, modelType, configFrom, and optional credentialId (using staleTime: 0 and gcTime: 0 for always-fresh data); useAddModelCredential, useEditModelCredential, and useDeleteModelCredential manage model-specific credentials; useActiveModelCredential switches the active credential for a model; useDeleteModel removes a model entirely; and useUpdateModelLoadBalancingConfig updates load balancing settings for a model. All hooks are parameterized by provider name and use the "models" namespace for query keys.

Usage

Use these hooks in model provider settings pages, credential management dialogs, and load balancing configuration panels. Each mutation hook is typically connected to form submission handlers in the model configuration UI.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/service/use-models.ts
• Lines: 1-155

Signature

// Provider-level queries
export const useModelProviderModelList = (provider: string) => UseQueryResult<{ data: ModelItem[] }>
export const useGetProviderCredential = (enabled: boolean, provider: string, credentialId?: string) => UseQueryResult<ProviderCredential>

// Provider-level mutations
export const useAddProviderCredential = (provider: string) => UseMutationResult<{ result: string }, unknown, ProviderCredential>
export const useEditProviderCredential = (provider: string) => UseMutationResult<{ result: string }, unknown, ProviderCredential>
export const useDeleteProviderCredential = (provider: string) => UseMutationResult<{ result: string }, unknown, { credential_id: string }>
export const useActiveProviderCredential = (provider: string) => UseMutationResult<{ result: string }, unknown, { credential_id: string, model?: string, model_type?: ModelTypeEnum }>

// Model-level queries
export const useGetModelCredential = (enabled: boolean, provider: string, credentialId?: string, model?: string, modelType?: string, configFrom?: string) => UseQueryResult<ModelCredential>

// Model-level mutations
export const useAddModelCredential = (provider: string) => UseMutationResult<{ result: string }, unknown, ModelCredential>
export const useEditModelCredential = (provider: string) => UseMutationResult<{ result: string }, unknown, ModelCredential>
export const useDeleteModelCredential = (provider: string) => UseMutationResult<{ result: string }, unknown, { credential_id: string, model?: string, model_type?: ModelTypeEnum }>
export const useDeleteModel = (provider: string) => UseMutationResult<{ result: string }, unknown, { model: string, model_type: ModelTypeEnum }>
export const useActiveModelCredential = (provider: string) => UseMutationResult<{ result: string }, unknown, { credential_id: string, model?: string, model_type?: ModelTypeEnum }>
export const useUpdateModelLoadBalancingConfig = (provider: string) => UseMutationResult<{ result: string }, unknown, { config_from: string, model: string, model_type: ModelTypeEnum, load_balancing: ModelLoadBalancingConfig, credential_id?: string }>

Import

import {
  useModelProviderModelList,
  useGetProviderCredential,
  useAddProviderCredential,
  useEditProviderCredential,
  useDeleteProviderCredential,
  useGetModelCredential,
  useAddModelCredential,
  useUpdateModelLoadBalancingConfig,
} from '@/service/use-models'

I/O Contract

Inputs

Name	Type	Required	Description
provider	string	Yes	Model provider identifier (e.g., 'openai', 'anthropic')
enabled	boolean	Yes (queries)	Controls whether the query is active
credentialId	string	No	Specific credential ID for filtering
model	string	Varies	Model name for model-level operations
modelType	ModelTypeEnum	Varies	Model type enum for model-level operations
configFrom	string	No	Configuration source for model credential queries
ProviderCredential	ProviderCredential	Yes (mutations)	Provider credential data for add/edit
ModelCredential	ModelCredential	Yes (mutations)	Model credential data for add/edit
load_balancing	ModelLoadBalancingConfig	Yes (load balancing)	Load balancing configuration object

Outputs

Name	Type	Description
ModelItem[]	{ data: ModelItem[] }	List of models available for the provider
ProviderCredential	ProviderCredential	Provider credential details
ModelCredential	ModelCredential	Model-specific credential details
{ result: string }	{ result: string }	Mutation success response

Usage Examples

List Provider Models

import { useModelProviderModelList } from '@/service/use-models'

function ModelList({ provider }: { provider: string }) {
  const { data } = useModelProviderModelList(provider)

  return (
    <ul>
      {data?.data.map(model => (
        <li key={model.model}>{model.label.en_US}</li>
      ))}
    </ul>
  )
}

Add Provider Credential

import { useAddProviderCredential } from '@/service/use-models'

function AddCredentialForm({ provider }: { provider: string }) {
  const { mutateAsync } = useAddProviderCredential(provider)

  const handleSubmit = async (credentials: ProviderCredential) => {
    await mutateAsync(credentials)
  }

  return <form onSubmit={handleSubmit}>...</form>
}

Update Load Balancing Config

import { useUpdateModelLoadBalancingConfig } from '@/service/use-models'

function LoadBalancingSettings({ provider }: { provider: string }) {
  const { mutate } = useUpdateModelLoadBalancingConfig(provider)

  const handleSave = (config: ModelLoadBalancingConfig) => {
    mutate({
      config_from: 'predefined-model',
      model: 'gpt-4',
      model_type: ModelTypeEnum.LLM,
      load_balancing: config,
    })
  }

  return <LoadBalancingForm onSave={handleSave} />
}

Related Pages

• Principle:Langgenius_Dify_React_Query_Pattern
• Langgenius_Dify_Service_Base - HTTP method wrappers (get, post, put, del) used by all hooks
• Langgenius_Dify_Service_Use_Common - Common hooks including useModelProviders and useModelListByType