Implementation:FlowiseAI Flowise DocStoreAPIDialog

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Document Store, API Documentation
Last Updated	2026-02-12 07:00 GMT

Overview

DocStoreAPIDialog is a React dialog component that displays auto-generated API usage examples (Python, JavaScript, cURL) for upserting documents into a specific document store via the Flowise REST API.

Description

This component renders a large dialog that shows code snippets for invoking the document store upsert API endpoint. It fetches the document store configuration to determine whether the request body should use FormData (for file uploads) or JSON format, then generates appropriate code examples in Python, JavaScript, and cURL. Additionally, it displays the overridable node configurations in expandable accordions grouped by node label.

Usage

Use this dialog when users want to see how to programmatically upsert documents into a specific document store loader. It is triggered from the document store detail views when users click an "API" or similar action button.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/docstore/DocStoreAPIDialog.jsx
• Lines: 1-434

Signature

const DocStoreAPIDialog = ({ show, dialogProps, onCancel }) => {
    // ... component logic
}

DocStoreAPIDialog.propTypes = {
    show: PropTypes.bool,
    dialogProps: PropTypes.object,
    onCancel: PropTypes.func
}

export default DocStoreAPIDialog

Import

import DocStoreAPIDialog from '@/views/docstore/DocStoreAPIDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls dialog visibility
dialogProps	object	Yes	Contains title, storeId, and loaderId for generating API examples
onCancel	func	Yes	Callback invoked when the dialog is closed

Outputs

Name	Type	Description
Portal element	React.Element	A dialog rendered via createPortal into the '#portal' DOM node

Key Behavior

• Fetches document store configuration via documentstoreApi.getDocumentStoreConfig(storeId, loaderId)
• Determines request format: FormData (when file inputs are present) or JSON
• Generates code examples using template literals with the actual baseURL, storeId, and loaderId
• Renders code snippets via MemoizedReactMarkdown for syntax highlighting
• Groups node configurations by label with expandable accordions showing parameter tables
• Displays an info note that the upsert API requires the document loader to have been upserted before

Key Functions

Function	Description
formDataRequest()	Returns a markdown string with Python, JavaScript, and cURL examples for FormData-based upsert
jsonDataRequest()	Returns a markdown string with Python, JavaScript, and cURL examples for JSON-based upsert
groupByNodeLabel(nodes)	Groups configuration nodes by label, extracts parameters, and determines the request body format

Usage Examples

Basic Usage

import DocStoreAPIDialog from '@/views/docstore/DocStoreAPIDialog'

<DocStoreAPIDialog
    show={showApiDialog}
    dialogProps={{
        title: 'Upsert API',
        storeId: 'store-abc-123',
        loaderId: 'loader-xyz-456'
    }}
    onCancel={() => setShowApiDialog(false)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Document_Store_Creation