Implementation:FlowiseAI Flowise PromptLangsmithHubDialog

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

Overview

PromptLangsmithHubDialog is a dialog component that allows users to browse, filter, and load prompt templates from the LangChain Hub (LangSmith) directly into Flowise workflows.

Description

This React component renders a full-width dialog with filtering capabilities for browsing prompts from the LangChain Hub. Users can filter by model (Anthropic, Google, Meta, OpenAI), use case (Agents, Chatbots, QA, Summarization, etc.), and language (Chinese, English, French, German, Russian, Spanish). The dialog presents a split-pane layout with a list of available prompts on the left and prompt details (template, description, readme) on the right using styled MUI Accordions.

Usage

Use this component when a user needs to import a pre-built prompt template from the LangChain Hub into a PromptTemplate or ChatPromptTemplate node in the Flowise canvas editor.

Code Reference

Source Location

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

Signature

const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
    // Fetches prompts from LangChain Hub API
    // Supports filtering by model, usecase, and language
    // Returns selected prompt templates via onSubmit callback
}

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
promptType	string	Yes	Type of prompt to browse: 'template' for StringPromptTemplate or 'chat' for ChatPromptTemplate
show	bool	Yes	Controls whether the dialog is visible
onCancel	func	Yes	Callback invoked when the user cancels the dialog
onSubmit	func	Yes	Callback invoked with the selected prompt's detailed templates array

Outputs

Name	Type	Description
Rendered Dialog	React Portal	A fullWidth MUI Dialog rendered via createPortal to the portal element
onSubmit(detailed)	array	Array of prompt template objects with typeDisplay and template properties

Internal State

State Variable	Type	Description
modelName	array	Selected model filters (e.g., anthropic:claude-2, openai:gpt-4)
usecase	array	Selected use case filters (e.g., Agents, Chatbots, QA over documents)
language	array	Selected language filters (e.g., English, French)
availablePrompNameList	array	List of prompts returned from the API
selectedPrompt	object	Currently selected prompt with detailed template data
accordionExpanded	array	Which accordion sections are expanded (prompt, description, readme)
loading	bool	Whether prompts are being fetched

Key Dependencies

• useApi hook with promptApi.getAvailablePrompts for fetching prompt lists
• promptApi.getPrompt for fetching individual prompt details
• MemoizedReactMarkdown for rendering readme content
• Redux store for SHOW_CANVAS_DIALOG / HIDE_CANVAS_DIALOG actions

Usage Examples

Basic Usage

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

const PromptNode = () => {
    const [showDialog, setShowDialog] = useState(false)

    const handleSubmit = (templates) => {
        // templates is an array of { typeDisplay, template } objects
        templates.forEach(t => {
            console.log(`${t.typeDisplay}: ${t.template}`)
        })
        setShowDialog(false)
    }

    return (
        <>
            <Button onClick={() => setShowDialog(true)}>Browse LangChain Hub</Button>
            <PromptLangsmithHubDialog
                promptType="chat"
                show={showDialog}
                onCancel={() => setShowDialog(false)}
                onSubmit={handleSubmit}
            />
        </>
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Prompt_Management