Workflow:FlowiseAI Flowise Chatflow Creation
| Knowledge Sources | |
|---|---|
| Domains | AI_Orchestration, Visual_Programming, LLM_Ops |
| Last Updated | 2026-02-12 07:30 GMT |
Overview
End-to-end process for visually building, configuring, and testing an AI chatflow using the Flowise drag-and-drop canvas editor.
Description
This workflow covers the complete procedure for creating a functional AI chatflow in Flowise. A chatflow is a directed graph of interconnected component nodes (LLMs, memory, tools, document loaders, vector stores, etc.) that together form a conversational AI pipeline. Users build chatflows on a visual ReactFlow-based canvas by dragging nodes from a component palette, configuring their parameters, connecting them via typed input/output anchors, and testing the result through an integrated chat interface. The completed chatflow is persisted to the server and can be deployed as an API endpoint or shared publicly.
Usage
Execute this workflow when you need to create a new conversational AI pipeline in Flowise. This applies when you have a specific use case (e.g., a customer support bot, a RAG-based Q&A system, or a tool-augmented agent) and want to assemble the required LLM components visually without writing code. The output is a saved, testable chatflow that can be deployed via API or embedded in a website.
Execution Steps
Open the Chatflows page from the sidebar navigation. This page displays all existing chatflows with search, pagination, and card or list view options. Each chatflow card shows a preview of the nodes used in the flow along with its name and category tags.
Key considerations:
- Chatflows are scoped to the current workspace
- Users can filter by name, category, or tags
- Existing chatflows can be duplicated or exported as starting points
Step 2: Create New Canvas
Click the "Add New" button to open a blank canvas. The system navigates to the canvas editor view with an empty ReactFlow workspace. The flow is initialized with no nodes or edges and is assigned the default name "Untitled Chatflow". All available component nodes are fetched from the server and loaded into the node palette.
Key considerations:
- The canvas uses ReactFlow for rendering and interaction
- Component node definitions are loaded from the server on initialization
- The canvas tracks a "dirty" state to warn about unsaved changes
Step 3: Add Nodes from Component Palette
Open the node palette by clicking the floating action button. Browse or search for nodes using the fuzzy search feature. Nodes are organized by category (LangChain nodes, LlamaIndex nodes, Utilities, etc.). Drag the desired node onto the canvas to place it. The system generates a unique node ID, initializes all input parameters with default values, and renders the node at the drop position.
Key considerations:
- Nodes represent discrete components: LLMs, embeddings, memory, tools, document loaders, text splitters, vector stores, output parsers, and more
- Fuzzy search scores results by relevance to help find nodes quickly
- Each node dropped on the canvas marks the flow as dirty (unsaved)
Step 4: Configure Node Parameters
Click on a node to expand its parameter panel. Each node exposes typed input fields including text inputs, dropdowns, async dropdowns (for dynamic loading), code editors, JSON editors, file uploads, boolean toggles, and credential selectors. Fill in required parameters and optionally configure additional parameters via the "Additional Parameters" section.
Key considerations:
- Parameter types include: string, number, boolean, password, json, code, file, options, multiOptions, asyncOptions, datagrid, and more
- Credential inputs connect to the centralized credential store
- Variables from upstream nodes can be referenced using the double-curly-brace syntax
- Some parameters are conditionally visible based on other parameter values
Step 5: Connect Nodes
Drag from an output handle on one node to a compatible input handle on another node to create a connection. The system validates type compatibility between source output and target input, prevents circular connections, and creates an edge with a unique identifier. The target node's input is automatically populated with a reference to the source node's output.
Key considerations:
- Connection validation ensures type safety between node anchors
- Single-input anchors accept one connection; list-input anchors accept multiple
- Variable-type inputs concatenate connection references with existing values
- Edges are visually rendered with delete buttons on hover
Step 6: Save the Chatflow
Click the save button in the canvas header. For a new chatflow, a dialog prompts for a name. The system serializes the entire ReactFlow state (nodes, edges, positions, viewport) to JSON, strips credential values (stored separately), and sends the payload to the server. For existing chatflows, the system checks for concurrent edits before saving.
Key considerations:
- First save creates the chatflow record and assigns a persistent ID
- Subsequent saves use conflict detection based on last-updated timestamps
- The flow is stored as a JSON blob with type CHATFLOW
- Credentials are persisted separately from the flow data for security
Step 7: Test with Chat Interface
Open the integrated chat popup by clicking the floating chat button on the canvas. Type a message and send it to test the chatflow end-to-end. The system sends the message to the prediction API endpoint, which executes the entire node graph and returns the response. Streaming responses are displayed in real time. The chat supports file uploads, image attachments, and audio recording.
Key considerations:
- Testing uses the internal prediction endpoint for authenticated access
- Streaming is supported if the chatflow's LLM node supports it
- Chat history is stored locally in the browser's localStorage
- Users can provide feedback via thumbs up/down buttons on responses
- Source documents are accessible if the flow includes retrieval components