Implementation:Langgenius Dify UseModels

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Model Management, Provider Configuration
Last Updated	2026-02-08 00:00 GMT

Overview

React Query hooks for comprehensive model provider and model credential management, including listing models, CRUD operations on provider and model credentials, credential switching, and load balancing configuration.

Description

The UseModels module provides TanStack React Query hooks for managing AI model providers and their model configurations within a Dify workspace. It covers two levels of credential management:

Provider-level operations:

• useModelProviderModelList -- Lists all models available from a provider.
• useGetProviderCredential -- Retrieves provider-level credential configuration.
• useAddProviderCredential / useEditProviderCredential / useDeleteProviderCredential -- CRUD for provider credentials.
• useActiveProviderCredential -- Switches the active credential for a provider.

Model-level operations:

• useGetModelCredential -- Retrieves model-specific credential configuration.
• useAddModelCredential / useEditModelCredential / useDeleteModelCredential -- CRUD for individual model credentials.
• useActiveModelCredential -- Switches the active credential for a specific model.
• useDeleteModel -- Removes a model from the provider.
• useUpdateModelLoadBalancingConfig -- Updates load balancing configuration for a model.

All hooks are namespaced under models and operate against the /workspaces/current/model-providers/ API prefix.

Usage

Use these hooks in the Dify console model provider settings page to configure AI model providers, manage API keys and credentials, switch between active credentials, and set up load balancing across multiple model endpoints.

Code Reference

Source Location

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

Signature

export const useModelProviderModelList: (provider: string) => UseQueryResult<{ data: ModelItem[] }>
export const useGetProviderCredential: (enabled: boolean, provider: string, credentialId?: string) => UseQueryResult<ProviderCredential>
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
export const useGetModelCredential: (enabled: boolean, provider: string, credentialId?: string, model?: string, modelType?: string, configFrom?: string) => UseQueryResult<ModelCredential>
export const useAddModelCredential: (provider: string) => UseMutationResult
export const useEditModelCredential: (provider: string) => UseMutationResult
export const useDeleteModelCredential: (provider: string) => UseMutationResult
export const useDeleteModel: (provider: string) => UseMutationResult
export const useActiveModelCredential: (provider: string) => UseMutationResult
export const useUpdateModelLoadBalancingConfig: (provider: string) => UseMutationResult

Import

import {
  useModelProviderModelList,
  useGetProviderCredential,
  useAddProviderCredential,
  useEditProviderCredential,
  useDeleteProviderCredential,
  useActiveProviderCredential,
  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 enabled
credentialId	string	No	Specific credential ID for retrieval or switching
model	string	No	Model name for model-level credential operations
modelType	ModelTypeEnum	No	Model type for model-level operations
configFrom	string	No	Configuration source for model credential retrieval
data	ModelCredential	Yes (mutations)	Credential data for create/edit operations
load_balancing	ModelLoadBalancingConfig	Yes (load balancing)	Load balancing configuration settings

Outputs

Name	Type	Description
data	ModelItem[]	List of models available from the provider
ProviderCredential	ProviderCredential	Provider-level credential configuration
ModelCredential	ModelCredential	Model-level credential configuration
result	string	Operation result status string

Usage Examples

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

// List models for a provider
const { data } = useModelProviderModelList('openai')
const models = data?.data ?? []

// Add a new provider credential
const { mutateAsync: addCredential } = useAddProviderCredential('openai')
await addCredential({ credentials: { api_key: 'sk-xxx' } })

// Switch active credential
const { mutate: switchCredential } = useActiveProviderCredential('openai')
switchCredential({ credential_id: 'cred-456' })

Related Pages

• Langgenius_Dify_Fetch_Layer - Underlying HTTP fetch layer for API requests
• Langgenius_Dify_UseEndpoints - Similar CRUD hook pattern for plugin endpoints