Implementation:FlowiseAI Flowise ExportAsTemplateDialog

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

Overview

ExportAsTemplateDialog is a portal-rendered modal dialog that allows users to export a chatflow, agentflow, or tool as a custom marketplace template with configurable name, description, badge, and use cases.

Description

ExportAsTemplateDialog renders a MUI Dialog through a DOM portal with a form containing fields for template name (required), description, badge, and use cases (tag-style chip input). It initializes the name and flow type from the provided dialogProps.chatflow or dialogProps.tool object, automatically mapping chatflow types (AGENTFLOW, MULTIAGENT, CHATFLOW) to template type labels (AgentflowV2, Agentflow, Chatflow). On confirmation, it validates that the name is non-empty (showing a snackbar error via enqueueSnackbar if blank), assembles the template payload, and calls marketplacesApi.saveAsCustomTemplate. Success and error responses are both communicated through persistent snackbar notifications.

Usage

Use ExportAsTemplateDialog on chatflow/agentflow canvas pages or tool detail pages when the user wants to save their current configuration as a reusable marketplace template. Control visibility with the show prop and pass the chatflow or tool data through dialogProps.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/dialog/ExportAsTemplateDialog.jsx
• Lines: 1-288

Signature

const ExportAsTemplateDialog = ({ show, dialogProps, onCancel }) => { ... }

export default ExportAsTemplateDialog

Import

import ExportAsTemplateDialog from '@/ui-component/dialog/ExportAsTemplateDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	No	Controls dialog visibility
dialogProps	object	No	Configuration object containing chatflow (with name, type, id) or tool (with name, description, iconSrc, schema, func), title (optional dialog title override), cancelButtonName, confirmButtonName, and disabled flag
onCancel	function	No	Callback invoked when the Cancel button is clicked or after successful/failed save

Outputs

Name	Type	Description
(rendered JSX)	React portal	A modal dialog with template name, description, badge, and use cases form fields, rendered into the #portal DOM element

Usage Examples

Basic Usage

import ExportAsTemplateDialog from '@/ui-component/dialog/ExportAsTemplateDialog'

const [showDialog, setShowDialog] = useState(false)

// Export a chatflow as template
const dialogProps = {
    chatflow: {
        id: 'chatflow-123',
        name: 'My Customer Support Bot',
        type: 'CHATFLOW'
    },
    title: 'Export As Template',
    cancelButtonName: 'Cancel',
    confirmButtonName: 'Save Template',
    disabled: false
}

// Export a tool as template
const toolDialogProps = {
    tool: {
        name: 'Web Scraper',
        description: 'Scrapes web pages',
        iconSrc: '/icons/scraper.svg',
        schema: '...',
        func: '...'
    },
    cancelButtonName: 'Cancel',
    confirmButtonName: 'Save Template'
}

<ExportAsTemplateDialog
    show={showDialog}
    dialogProps={dialogProps}
    onCancel={() => setShowDialog(false)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Template_Marketplace