Implementation:FlowiseAI Flowise ConfigContext

Knowledge Sources	FlowiseAI Flowise
Domains	State Management, Configuration
Last Updated	2026-02-12 07:00 GMT

Overview

ConfigContext is a React context provider that fetches and distributes platform configuration settings (including license type detection) to the entire Flowise UI application.

Description

ConfigContext creates a React context using createContext and exposes a ConfigProvider component along with a useConfig hook. On mount, the provider fetches platform settings via the platformsettingsApi.getSettings() API call and determines the platform type (enterprise, cloud, or open source), storing the result in state. Consuming components can then access the configuration object and platform license flags without needing to make their own API calls.

Usage

Wrap the application (or a subtree) with <ConfigProvider> to make platform configuration available. Use the useConfig() hook in any descendant component to access config, loading, isEnterpriseLicensed, isCloud, and isOpenSource values.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/store/context/ConfigContext.jsx
• Lines: 1-55

Signature

export const ConfigProvider = ({ children }) => { ... }
export const useConfig = () => useContext(ConfigContext)

Import

import { ConfigProvider, useConfig } from '@/store/context/ConfigContext'

I/O Contract

Inputs

Name	Type	Required	Description
children	PropTypes.any	Yes	Child React elements to be wrapped by the provider

Outputs

Name	Type	Description
config	object	The platform settings object fetched from the API
loading	boolean	Whether the config is still being fetched
isEnterpriseLicensed	boolean	True if PLATFORM_TYPE is 'enterprise'
isCloud	boolean	True if PLATFORM_TYPE is 'cloud'
isOpenSource	boolean	True if PLATFORM_TYPE is neither 'enterprise' nor 'cloud'

Usage Examples

Basic Usage

import { ConfigProvider, useConfig } from '@/store/context/ConfigContext'

// Wrap app with ConfigProvider
function App() {
    return (
        <ConfigProvider>
            <MyComponent />
        </ConfigProvider>
    )
}

// Consume config in a child component
function MyComponent() {
    const { config, loading, isEnterpriseLicensed, isCloud, isOpenSource } = useConfig()

    if (loading) return <div>Loading...</div>

    return (
        <div>
            {isEnterpriseLicensed && <span>Enterprise Edition</span>}
            {isCloud && <span>Cloud Edition</span>}
            {isOpenSource && <span>Open Source Edition</span>}
        </div>
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Application_Configuration