51 lines
1.8 KiB
Text
51 lines
1.8 KiB
Text
import ThemedImage from "@theme/ThemedImage";
|
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
|
import ReactPlayer from "react-player";
|
|
|
|
# 🎨 Creating Flows
|
|
|
|
## Compose
|
|
|
|
Creating flows with Langflow is easy. Drag sidebar components onto the canvas and connect them together to create your pipeline.
|
|
Langflow provides a range of Components to choose from, including **Chat Input**, **Chat Output**, **API Request** and **Prompt**.
|
|
|
|
<ZoomableImage
|
|
alt="Docusaurus themed image"
|
|
sources={{
|
|
light: "img/langflow_canvas.png",
|
|
dark: "img/langflow_canvas.png"
|
|
}}
|
|
/>
|
|
|
|
## Starter Flows
|
|
|
|
Langflow provides a range of starter flows to help you get started. These flows are pre-built and can be used as a starting point for your own flows.
|
|
|
|
<div
|
|
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
|
>
|
|
<ReactPlayer playing controls url="/videos/langflow_fork.mp4" />
|
|
</div>
|
|
|
|
## Defining Inputs and Outputs
|
|
|
|
Each flow can have multiple inputs and outputs. These can be defined by placing **Inputs** and **Outputs** components on the canvas.
|
|
|
|
The **Inputs** components define the inputs to the flow.
|
|
Whenever you place an Input component on the canvas, it will allow you to interactively define change its value
|
|
from the Interactive Panel.
|
|
|
|
The **Text Input** component allows you to define a text input, and the **Chat Input** component allows you to use the chat input from the Interactive Panel.
|
|
|
|
The **Outputs** components define the outputs of the flow and work similarly to the Inputs components.
|
|
|
|
Both Inputs and Outputs components can be connected to other components on the canvas and are used to define how the API works too.
|
|
|
|
|
|
|
|
<div
|
|
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
|
>
|
|
<ReactPlayer playing controls url="/videos/langflow_build.mp4" />
|
|
</div>
|