Implementation:FlowiseAI Flowise AnalyseFlow

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Analytics Configuration
Last Updated	2026-02-12 07:00 GMT

Overview

AnalyseFlow is a configuration panel component that allows users to connect and configure analytics/observability providers (LangSmith, LangFuse, Lunary, LangWatch, Arize, Phoenix, Opik) for a chatflow.

Description

This React component renders a series of expandable accordion panels, one for each supported analytics provider. Each panel displays the provider's icon, label, and URL, along with dynamically rendered input fields for credentials, project names, and on/off status toggles. When a provider is toggled on, a green "ON" indicator badge is displayed. The configuration is saved as a JSON string to the chatflow's analytic field via the chatflows API.

Usage

Use this component inside a chatflow settings dialog to let users configure analytics and observability integrations. It is typically rendered as a tab or section within the chatflow configuration panel.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/extended/AnalyseFlow.jsx
• Lines: 1-432

Signature

const AnalyseFlow = ({ dialogProps }) => {
    // Renders accordion panels for each analytics provider
    // dialogProps.chatflow contains the chatflow data including analytic JSON
}

Import

import AnalyseFlow from '@/ui-component/extended/AnalyseFlow'

I/O Contract

Inputs

Name	Type	Required	Description
dialogProps	object	Yes	Contains chatflow object with id and analytic JSON string
show	bool	No	Whether the component is shown (declared in propTypes but not used in signature)
onCancel	func	No	Cancel callback (declared in propTypes but not used in signature)

Outputs

Name	Type	Description
Rendered Component	JSX.Element	Accordion panels with Save button, dispatches SET_CHATFLOW on success

Supported Analytics Providers

Provider	Internal Name	Credential Type	Additional Inputs
LangSmith	langSmith	langsmithApi	Project Name (optional)
LangFuse	langFuse	langfuseApi	Release (optional)
Lunary	lunary	lunaryApi	(none)
LangWatch	langWatch	langwatchApi	(none)
Arize	arize	arizeApi	Project Name (optional)
Phoenix	phoenix	phoenixApi	Project Name (optional)
Opik	opik	opikApi	Project Name (opikProjectName)

Internal State

State Variable	Type	Description
analytic	object	Configuration object keyed by provider name with credentialId, status, and provider-specific fields
providerExpanded	object	Tracks which provider accordions are expanded

Usage Examples

Basic Usage

import AnalyseFlow from '@/ui-component/extended/AnalyseFlow'

const ChatflowSettings = ({ chatflow }) => {
    return (
        <AnalyseFlow
            dialogProps={{ chatflow }}
        />
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Flow_Analysis