Implementation:FlowiseAI Flowise ToolDialog

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

Overview

The ToolDialog is a React dialog component for creating, editing, importing, and previewing custom tools with input schema definitions and JavaScript function implementations.

Description

This component renders a full-featured MUI Dialog rendered via createPortal for managing custom tools in Flowise. It supports four dialog modes: ADD (create new tool), EDIT (modify existing tool), IMPORT (import a tool definition), and TEMPLATE (view a read-only tool template). The dialog includes fields for tool name, description, icon source, an editable data grid for input schema properties (property, type, description, required), and a CodeEditor for the JavaScript function. It also integrates with RBAC permission buttons for export, save-as-template, and delete operations.

Usage

Use this component whenever you need to present the user with a form to create or edit a custom tool. It is typically opened from the Tools dashboard or from a CustomTool node within the canvas editor.

Code Reference

Source Location

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

Signature

const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, setError }) => {
    // ...
}

ToolDialog.propTypes = {
    show: PropTypes.bool,
    dialogProps: PropTypes.object,
    onUseTemplate: PropTypes.func,
    onCancel: PropTypes.func,
    onConfirm: PropTypes.func,
    setError: PropTypes.func
}

export default ToolDialog

Import

import ToolDialog from '@/views/tools/ToolDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Configuration object containing type ('ADD', 'EDIT', 'IMPORT', 'TEMPLATE'), title, data, toolId, and confirmButtonName
onUseTemplate	function	No	Callback invoked when the "Use Template" button is clicked (TEMPLATE mode)
onCancel	function	Yes	Callback invoked when the dialog is closed or an operation fails
onConfirm	function	Yes	Callback invoked after a successful create, update, or delete; receives the tool ID
setError	function	No	Callback to propagate API errors to the parent component

Outputs

Name	Type	Description
Rendered dialog	JSX.Element (portal)	A full-screen MUI Dialog rendered into the portal element for tool management

Key Internal State

State Variable	Type	Description
toolId	string	The ID of the current tool being edited
toolName	string	The name of the tool
toolDesc	string	The tool description (used by LLM to determine when to invoke the tool)
toolIcon	string	URL for the tool icon
toolSchema	array	Array of input schema rows with property, type, description, and required fields
toolFunc	string	The JavaScript function body for the tool

Key Operations

• addNewTool() -- Creates a new tool via toolsApi.createNewTool
• saveTool() -- Updates an existing tool via toolsApi.updateTool
• deleteTool() -- Deletes a tool via toolsApi.deleteTool after confirmation
• exportTool() -- Downloads the tool definition as a JSON file
• onSaveAsTemplate() -- Opens the ExportAsTemplateDialog for saving the tool as a reusable template
• handlePastedJSON(formattedData) -- Applies pasted JSON data to the tool schema grid

Usage Examples

Basic Usage

import ToolDialog from '@/views/tools/ToolDialog'

const [showDialog, setShowDialog] = useState(false)
const [dialogProps, setDialogProps] = useState({})

const openAddTool = () => {
    setDialogProps({
        type: 'ADD',
        title: 'Add New Tool',
        confirmButtonName: 'Add'
    })
    setShowDialog(true)
}

<ToolDialog
    show={showDialog}
    dialogProps={dialogProps}
    onCancel={() => setShowDialog(false)}
    onConfirm={(toolId) => {
        setShowDialog(false)
        // refresh tool list
    }}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Tool_Management