Implementation:FlowiseAI Flowise PostProcessing

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

Overview

PostProcessing is a configuration panel component that allows users to enable and write custom JavaScript functions to transform chatflow responses before they are returned to the user.

Description

This React component provides an interface for configuring post-processing of chatflow outputs. It includes a toggle to enable/disable post-processing, a JavaScript code editor (via CodeEditor) for writing the transformation function, an expandable "Available Variables" reference table listing all accessible $flow variables, and a sample function button. The code editor supports dark/light themes and can be expanded to full size via an ExpandTextDialog. The configuration is saved to the chatflow's chatbotConfig.postProcessing field.

Usage

Use this component in the chatflow settings dialog to allow advanced users to write custom JavaScript that transforms the raw AI output. Common use cases include appending disclaimers, formatting responses, filtering content, or enriching output with additional metadata.

Code Reference

Source Location

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

Signature

const PostProcessing = ({ dialogProps }) => {
    // Renders enable toggle, JS code editor, available variables table, and Save button
    // dialogProps.chatflow contains chatflow data with chatbotConfig JSON
}

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
dialogProps	object	Yes	Contains chatflow object with id and chatbotConfig JSON string

Outputs

Name	Type	Description
Rendered Component	JSX.Element	Post-processing configuration panel with code editor and Save button

Available Flow Variables

Variable	Type	Description
$flow.rawOutput	string	The raw output response from the flow
$flow.input	string	The user input message
$flow.chatHistory	array	Array of previous messages in the conversation
$flow.chatflowId	string	Unique identifier for the chatflow
$flow.sessionId	string	Current session identifier
$flow.chatId	string	Current chat identifier
$flow.sourceDocuments	array	Source documents used in retrieval (if applicable)
$flow.usedTools	array	List of tools used during execution
$flow.artifacts	array	List of artifacts generated during execution
$flow.fileAnnotations	array	File annotations associated with the response

Sample Function

// Access chat history as a string
const chatHistory = JSON.stringify($flow.chatHistory, null, 2);

// Return a modified response
return $flow.rawOutput + " This is a post processed response!";

Internal State

State Variable	Type	Description
postProcessingEnabled	bool	Whether post-processing is enabled
postProcessingFunction	string	The user-written JavaScript function code
chatbotConfig	object	The chatflow's chatbotConfig parsed from JSON
showExpandDialog	bool	Whether the expand text dialog is shown
expandDialogProps	object	Props for the ExpandTextDialog

Usage Examples

Basic Usage

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

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

Related Pages

• Principle:FlowiseAI_Flowise_Chatbot_Appearance_Customization