Implementation:FlowiseAI Flowise PasteJSONDialog

Knowledge Sources	FlowiseAI Flowise
Domains	Tools, UI Dialogs
Last Updated	2026-02-12 07:00 GMT

Overview

PasteJSONDialog is a React dialog component that provides a JSON code editor for users to paste and validate a JSON array of property definitions, which are then parsed and formatted for use as tool input schemas.

Description

This component renders a Material UI Dialog through a React portal. It contains a CodeEditor component for JSON input with theme-aware syntax highlighting (dark/light mode). A "See Example" button populates the editor with a sample JSON array showing the expected format with property, type, description, and required fields. On confirmation, the input is parsed and validated as a JSON array, and each item is formatted into a standardized object with id, property, type, description, and required fields. If parsing fails, an error message is displayed inline.

Usage

Use this component within the tools configuration interface to allow users to quickly define tool input properties by pasting a JSON schema array instead of adding properties one by one through a form.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/tools/PasteJSONDialog.jsx
• Lines: 1-87

Signature

const PasteJSONDialog = ({ show, onCancel, onConfirm, customization }) => { ... }

Import

import PasteJSONDialog from '@/views/tools/PasteJSONDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
onCancel	func	Yes	Callback invoked when the cancel button is clicked
onConfirm	func	Yes	Callback invoked with an array of formatted property objects (each with id, property, type, description, required)
customization	object	Yes	Redux customization state; its isDarkMode property determines the CodeEditor theme

Outputs

Name	Type	Description
React Portal	JSX.Element	Renders the dialog via createPortal to the element with id "portal"

Usage Examples

Basic Usage

<PasteJSONDialog
    show={showPasteDialog}
    onCancel={() => setShowPasteDialog(false)}
    onConfirm={(formattedRows) => {
        // formattedRows: [{ id: 1, property: 'name', type: 'string', description: "User's name", required: true }, ...]
        setToolProperties(formattedRows)
        setShowPasteDialog(false)
    }}
    customization={customization}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Tool_Management