Add new files and update sidebars.js
This commit is contained in:
parent
477f7e8e73
commit
39bc9764b8
7 changed files with 9 additions and 64 deletions
|
|
@ -1,51 +0,0 @@
|
||||||
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>
|
|
||||||
|
|
@ -4,7 +4,15 @@ module.exports = {
|
||||||
type: "category",
|
type: "category",
|
||||||
label: " Getting Started",
|
label: " Getting Started",
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
items: ["index", "getting-started/cli", "getting-started/creating-flows"],
|
items: [
|
||||||
|
"index",
|
||||||
|
"getting-started/cli",
|
||||||
|
"getting-started/basic-prompting",
|
||||||
|
"getting-started/document-qa",
|
||||||
|
"getting-started/blog-writer",
|
||||||
|
"getting-started/memory-chatbot",
|
||||||
|
"getting-started/rag-with-astradb",
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
|
|
@ -15,18 +23,6 @@ module.exports = {
|
||||||
"whats-new/migrating-to-one-point-zero",
|
"whats-new/migrating-to-one-point-zero",
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
type: "category",
|
|
||||||
label: " Starter Projects",
|
|
||||||
collapsed: false,
|
|
||||||
items: [
|
|
||||||
"starter-projects/rag-with-astradb",
|
|
||||||
"starter-projects/basic-prompting",
|
|
||||||
"starter-projects/memory-chatbot",
|
|
||||||
"starter-projects/document-qa",
|
|
||||||
"starter-projects/blog-writer",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
label: " Step-by-Step Guides",
|
label: " Step-by-Step Guides",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue