jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

docs: concepts-flows page (#6907)

Browse source 
* flow-nodes-and-edges

* code-review

---------

Co-authored-by: Edwin Jose <edwin.jose@datastax.com>
This commit is contained in:
Mendon Kissling 2025-03-11 11:58:00 -04:00 • committed by GitHub
commit 8215008633
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 129 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

129
docs/docs/Concepts/concepts-flows.md
View file

@ -10,6 +10,135 @@ If you've already got a Langflow JSON file, import it into Langflow by clicking
Once imported, your flow is ready to use.
:::tip
You can drag and drop Langflow JSON files directly from your file system into the Langflow window to import a flow, even into the initial Langflow splash screen.
:::
## Export Flow
The option to export a flow is available in the same menu as shown above. Once exported as JSON, you can import your flow into another Langflow instance.
## Langflow JSON file contents
Langflow JSON files contain [nodes](#nodes) and [edges](#edges) that describe components and connections, and [additional metadata](#additional-metadata-and-project-information) that describe the flow.
For an example Langflow JSON file, examine the [Basic Prompting.json](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/initial_setup/starter_projects/Basic%20Prompting.json) file in the Langflow repository.
### Nodes
**Nodes** represent the components that make up the flow.
The `ChatInput` node is the entry point of the flow. It's the first node that will be executed.
`ChatInput-jFwUm` is a unique identifier for the node.
```json
{
"data": {
"description": "Get chat inputs from the Playground.",
"display_name": "Chat Input",
"id": "ChatInput-jFwUm",
"node": {
"base_classes": ["Message"],
"description": "Get chat inputs from the Playground.",
"display_name": "Chat Input",
"icon": "MessagesSquare",
"template": {
"input_value": {
"display_name": "Text",
"info": "Message to be passed as input.",
"value": "Hello"
},
"sender": {
"value": "User",
"options": ["Machine", "User"]
},
"sender_name": {
"value": "User"
},
"should_store_message": {
"value": true
}
}
},
"type": "ChatInput"
},
"position": {
"x": 689.5720422421635,
"y": 765.155834131403
}
}
```
### Edges
**Edges** represent the connections between nodes.
The connection between the `ChatInput` node and the `OpenAIModel` node is represented as an edge:
```json
{
"className": "",
"data": {
"sourceHandle": {
"dataType": "ChatInput",
"id": "ChatInput-jFwUm",
"name": "message",
"output_types": ["Message"]
},
"targetHandle": {
"fieldName": "input_value",
"id": "OpenAIModel-OcXkl",
"inputTypes": ["Message"],
"type": "str"
}
},
"id": "reactflow__edge-ChatInput-jFwUm{œdataTypeœ:œChatInputœ,œidœ:œChatInput-jFwUmœ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-OpenAIModel-OcXkl{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-OcXklœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
"source": "ChatInput-jFwUm",
"sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-jFwUmœ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
"target": "OpenAIModel-OcXkl",
"targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œOpenAIModel-OcXklœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
}
```
This edge shows that the `ChatInput` component outputs a `Message` type to the `target` node, which is the `OpenAIModel` node.
The `OpenAIModel` component accepts the `Message` type at the `input_value` field.
### Additional metadata and project information
Additional information about the flow is stored in the root `data` object.
* Metadata and project information including the name, description, and `last_tested_version` of the flow.
```json
{
"name": "Basic Prompting",
"description": "Perform basic prompting with an OpenAI model.",
"tags": ["chatbots"],
"id": "1511c230-d446-43a7-bfc3-539e69ce05b8",
"last_tested_version": "1.0.19.post2",
"gradient": "2",
"icon": "Braces"
}
```
* Visual information about the flow defining the initial position of the flow in the workspace.
```json
"viewport": {
"x": -37.61270157375441,
"y": -155.91266341888854,
"zoom": 0.7575251406952855
}
```
**Notes** are like comments to help you understand the flow within the workspace.
They may contain links, code snippets, and other information.
Notes are written in Markdown and stored as `node` objects.
```json
{
"id": "undefined-kVLkG",
"node": {
"description": "## 📖 README\nPerform basic prompting with an OpenAI model.\n\n#### Quick Start\n- Add your **OpenAI API key** to the **OpenAI Model**\n- Open the **Playground** to chat with your bot.\n..."
}
}
```