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

[Docs] - Resize Images and Cleanup (#2110)

Browse source 
* Resize images 
* Move custom components tutorial to /tutorials
* Fix broken table in chat widget
* Strip apology banner
* Title case for nav
This commit is contained in:
Mendon Kissling 2024-06-07 15:01:28 -04:00 • committed by GitHub
commit 001c73ad48
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 105 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/docs/administration/chat-widget.mdx
View file

@ -184,8 +184,9 @@ Use the widget API to customize your Chat Widget:
format &#123;<span>"key":"value"</span>&#125;.
</Admonition>
| Prop | Type | Required | Description |
| --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
|-----------------------|---------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| bot_message_style | JSON | No | Applies custom formatting to bot messages. |
| chat_input_field | String | Yes | Defines the type of the input field for chat messages. |
| chat_inputs | JSON | Yes | Determines the chat input elements and their respective values. |
@ -208,4 +209,5 @@ Use the widget API to customize your Chat Widget:
| tweaks | JSON | No | Applies additional custom adjustments for the associated flow. |
| user_message_style | JSON | No | Determines the formatting for user messages in the chat window. |
| width | Number | No | Sets the width of the chat window in pixels. |
| window_title | String | No | Sets the title displayed in the chat window's header or title bar. | import ThemedImage from "@theme/ThemedImage"; |
| window_title | String | No | Sets the title displayed in the chat window's header or title bar. |

11
docs/docs/administration/login.mdx
View file

@ -88,12 +88,12 @@ With _`LANGFLOW_AUTO_LOGIN`_ set to _`False`_, Langflow requires users to sign u
light: useBaseUrl("img/sign-up.png"),
dark: useBaseUrl("img/sign-up.png"),
}}
style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
style={{ width: "40%", margin: "20px auto" }}
/>
## Profile settings
Users can change their profile settings by clicking on the profile icon in the top right corner of the application. This opens a dropdown menu with the following options:
You can change your profile settings by clicking on the profile icon in the top right corner of the Langflow dashboard. This opens a dropdown menu with the following options:
- **Admin Page**: Opens the admin page, which is only accessible to the superuser.
- **Profile Settings**: Opens the profile settings page.
@ -105,10 +105,10 @@ Users can change their profile settings by clicking on the profile icon in the t
light: useBaseUrl("img/my-account.png"),
dark: useBaseUrl("img/my-account.png"),
}}
style={{ width: "50%", maxWidth: "600px", margin: "20px auto" }}
style={{ maxWidth: "600px", margin: "20px auto" }}
/>
By clicking on **Profile Settings**, the user is taken to the profile settings page, where they can change their password and their profile picture.
Select **Profile Settings** to change your password and your profile picture.
<ZoomableImage
alt="Docusaurus themed image"
@ -119,8 +119,7 @@ By clicking on **Profile Settings**, the user is taken to the profile settings p
style={{ maxWidth: "600px", margin: "20px auto" }}
/>
By clicking on **Admin Page**, the superuser is taken to the admin page, where they
can manage users and groups.
Select **Admin Page** to manage users and groups as the superuser.
<ZoomableImage
alt="Docusaurus themed image"

2
docs/docs/administration/playground.mdx
View file

@ -23,7 +23,7 @@ As long as you have a flow's environment variables set, you can run it by clicki
light: useBaseUrl("img/playground-chat.png"),
dark: useBaseUrl("img/playground-chat.png"),
}}
style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
2. Chat with your bot as you normally would, all without having to open the editor.

6
docs/docs/components/agents.mdx
View file

@ -2,12 +2,6 @@ import Admonition from '@theme/Admonition';
# Agents
<Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
<p>
We appreciate your understanding as we polish our documentation – it may contain some rough edges. Share your feedback or report issues to help us improve! 🛠️📝
</p>
</Admonition>
Agents are components that use reasoning to make decisions and take actions, designed to autonomously perform tasks or provide services with some degree of agency. LLM chains can only perform hardcoded sequences of actions, while agents use LLMs to reason through which actions to take, and in which order.
---

14
docs/docs/components/chains.mdx
View file

@ -5,19 +5,11 @@ import Admonition from "@theme/Admonition";
# Chains
<Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
<p>
Thank you for your patience while we enhance our documentation. It may
have some imperfections. Share your feedback or report issues to help us
improve! 🛠️📝
</p>
</Admonition>
Chains, in the context of language models, refer to a series of calls made to a language model. This approach allows for using the output of one call as the input for another. Different chain types facilitate varying complexity levels, making them useful for creating pipelines and executing specific scenarios.
---
### CombineDocsChain
## CombineDocsChain
`CombineDocsChain` includes methods to combine or aggregate loaded documents for question-answering functionality.
@ -34,7 +26,7 @@ Acts as a proxy for LangChain’s [documents](https://python.langchain.com/docs/
---
### ConversationChain
## ConversationChain
`ConversationChain` facilitates dynamic, interactive conversations with a language model, ideal for chatbots or virtual assistants.
@ -48,7 +40,7 @@ Acts as a proxy for LangChain’s [documents](https://python.langchain.com/docs/
---
### ConversationalRetrievalChain
## ConversationalRetrievalChain
`ConversationalRetrievalChain` combines document search with question-answering capabilities, extracting information and providing answers.

2
docs/docs/components/custom.mdx
View file

@ -3,7 +3,7 @@ import Admonition from "@theme/Admonition";
# Custom Components
<Admonition type="info" label="Tip">
Read the [Custom Component Guidelines](../administration/custom-component) for
Read the [Custom Component Tutorial](../tutorials/custom_components) for
detailed information on custom components.
</Admonition>

24
docs/docs/components/experimental.mdx
View file

@ -4,7 +4,9 @@ import Admonition from '@theme/Admonition';
Components in the experimental phase are currently in beta. They have been initially developed and tested but haven't yet achieved a stable or fully supported status. We encourage users to explore these components, provide feedback, and report any issues encountered.
### Clear Message History Component
---
## Clear Message History Component
This component clears the message history for a specified session ID.
@ -22,7 +24,7 @@ Provide the session ID to clear its message history.
---
### Extract Key From Record
## Extract Key From Record
This component extracts specified keys from a record.
@ -47,7 +49,7 @@ Provide the record and specify the keys you want to extract. Optionally, enable
---
### Flow as Tool
## Flow as Tool
This component turns a function running a flow into a Tool.
@ -79,7 +81,7 @@ Select a flow, name and describe the tool, and decide if you want to return the
---
### Listen
## Listen
This component listens for a specified notification.
@ -95,7 +97,7 @@ Specify the notification to listen for.
---
### List Flows
## List Flows
This component lists all available flows.
@ -105,7 +107,7 @@ Call this component without parameters to list all flows.
---
### Merge Records
## Merge Records
This component merges a list of records.
@ -120,7 +122,7 @@ Provide the records you want to merge.
---
### Notify
## Notify
This component generates a notification.
@ -144,7 +146,7 @@ Specify the notification name, provide a record if necessary, and indicate wheth
---
### Run Flow
## Run Flow
This component runs a specified flow.
@ -170,7 +172,7 @@ Provide the input value, select the flow, and apply any tweaks.
---
### Runnable Executor
## Runnable Executor
This component executes a specified runnable.
@ -198,7 +200,7 @@ Specify the input key, provide inputs, select the runnable, and optionally defin
---
### SQL Executor
## SQL Executor
This component executes an SQL query.
@ -226,7 +228,7 @@ Provide the SQL query, specify the database URL, and configure settings for colu
---
### SubFlow
## SubFlow
This component dynamically generates a tool from a flow.

56
docs/docs/components/inputs-and-outputs.mdx
View file

@ -20,6 +20,15 @@ You can find out more about Chat Input and other Inputs [here](#chat-input).
This component collects user input from the chat.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/chat-input-expanded.png",
dark: "img/chat-input-expanded.png",
}}
style={{ width: "40%", margin: "20px auto" }}
/>
**Parameters**
- **Sender Type:** Specifies the sender type. Defaults to `User`. Options are `Machine` and `User`.
@ -34,30 +43,30 @@ This component collects user input from the chat.
</p>
</Admonition>
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/chat-input-expanded.png",
dark: "img/chat-input-expanded.png",
}}
style={{ width: "40%", margin: "20px auto" }}
/>
One significant capability of the Chat Input component is its ability to transform the Playground into a chat window. This feature is particularly valuable for scenarios requiring user input to initiate or influence the flow.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/interaction-panel-with-chat-input.png",
dark: "img/interaction-panel-with-chat-input.png",
light: ("img/playground-chat.png"),
dark: ("img/playground-chat.png"),
}}
style={{ width: "50%", margin: "20px auto" }}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
### Text Input
The **Text Input** component adds an **Input** field on the Playground. This enables you to define parameters while running and testing your flow.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/text-input-expanded.png",
dark: "img/text-input-expanded.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
**Parameters**
- **Value:** Specifies the text input value. This is where the user inputs text data that will be passed to the next component in the sequence. If no value is provided, it defaults to an empty string.
@ -79,15 +88,6 @@ A template with `Name: {name}, Age: {age}` will convert the `Record` into a text
If you pass more than one `Record`, the text will be concatenated with a new line separator.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/text-input-expanded.png",
dark: "img/text-input-expanded.png",
}}
style={{ width: "50%", margin: "20px auto" }}
/>
## Outputs
Outputs are components that are used to define where data comes out of your flow. They can be used to send data to the user, to the Playground, or to define how the data will be displayed in the Playground.
@ -135,10 +135,6 @@ A prompt is the input provided to a language model, consisting of multiple compo
This component creates a prompt template with dynamic variables. This is useful for structuring prompts and passing dynamic data to a language model.
**Parameters**
- **Template:** The template for the prompt. This field allows you to create other fields dynamically by using curly brackets `{}`. For example, if you have a template like `Hello {name}, how are you?`, a new field called `name` will be created. Prompt variables can be created with any name inside curly brackets, e.g. `{variable_name}`.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
@ -148,14 +144,14 @@ This component creates a prompt template with dynamic variables. This is useful
style={{ width: "50%", margin: "20px auto" }}
/>
**Parameters**
- **Template:** The template for the prompt. This field allows you to create other fields dynamically by using curly brackets `{}`. For example, if you have a template like `Hello {name}, how are you?`, a new field called `name` will be created. Prompt variables can be created with any name inside curly brackets, e.g. `{variable_name}`.
### PromptTemplate
The `PromptTemplate` component enables users to create prompts and define variables that control how the model is instructed. Users can input a set of variables which the template uses to generate the prompt when a conversation starts.
<Admonition type="info">
After defining a variable in the prompt template, it acts as its own component
input. See [Prompt Customization](../administration/prompt-customization) for
more details.
</Admonition>
After defining a variable in the prompt template, it acts as its own component input. See [Prompt Customization](../administration/prompt-customization) for more details.
- **template:** The template used to format an individual request.

22
docs/docs/components/model_specs.mdx
View file

@ -2,17 +2,11 @@ import Admonition from '@theme/Admonition';
# Large Language Models (LLMs)
<Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
<p>
Thank you for your patience as we refine our documentation. You might encounter some inconsistencies. Please help us improve by sharing your feedback or reporting any issues! 🛠️📝
</p>
</Admonition>
A Large Language Model (LLM) is a foundational component of Langflow. It provides a uniform interface for interacting with LLMs from various providers, including OpenAI, Cohere, and HuggingFace. Langflow extensively uses LLMs across its chains and agents, employing them to generate text based on specific prompts or inputs.
---
### Anthropic
## Anthropic
This is a wrapper for Anthropic's large language models. Learn more at [Anthropic](https://www.anthropic.com).
@ -22,7 +16,7 @@ This is a wrapper for Anthropic's large language models. Learn more at [Anthropi
---
### ChatAnthropic
## ChatAnthropic
This is a wrapper for Anthropic's large language model designed for chat-based interactions. Learn more at [Anthropic](https://www.anthropic.com).
@ -32,7 +26,7 @@ This is a wrapper for Anthropic's large language model designed for chat-based i
---
### CTransformers
## CTransformers
`CTransformers` provides access to Transformer models implemented in C/C++ using the [GGML](https://github.com/ggerganov/ggml) library.
@ -65,7 +59,7 @@ Ensure the `ctransformers` Python package is installed. Discover more about inst
- **model_file**: The specific model file name within the repository or directory.
- **model_type**: The type of transformer model used. For further information, visit [ctransformers](https://github.com/marella/ctransformers).
### ChatOpenAI Component
## ChatOpenAI Component
This component interfaces with [OpenAI's](https://openai.com) large language models, supporting a variety of tasks such as chatbots, generative question-answering, and summarization.
@ -76,7 +70,7 @@ This component interfaces with [OpenAI's](https://openai.com) large language mod
- **openai_api_key**: The API key required for authentication with the OpenAI API.
- **temperature**: Adjusts the randomness level of the text generation. This should be a non-negative number, defaulting to `0.7`.
### Cohere Component
## Cohere Component
A wrapper for accessing [Cohere's](https://cohere.com) large language models.
@ -84,7 +78,7 @@ A wrapper for accessing [Cohere's](https://cohere.com) large language models.
- **max_tokens**: The limit on the number of tokens to generate per request, defaulting to `256`.
- **temperature**: Adjusts the randomness level in text generations. This should be a non-negative number, defaulting to `0.75`.
### HuggingFaceHub Component
## HuggingFaceHub Component
A component facilitating access to models hosted on the [HuggingFace Hub](https://www.huggingface.co/models).
@ -93,7 +87,7 @@ A component facilitating access to models hosted on the [HuggingFace Hub](https:
- **repo_id**: Specifies the model repository, defaulting to `gpt2`.
- **task**: The specific task to execute with the model, returning either `generated_text` or `summary_text`.
### LlamaCpp Component
## LlamaCpp Component
This component provides access to `llama.cpp` models, ensuring high performance and flexibility.
@ -122,7 +116,7 @@ This component provides access to `llama.cpp` models, ensuring high performance
- **verbose**: Controls the verbosity of output details. When enabled, it provides insights into internal states to aid debugging and understanding, defaulting to `False`.
- **vocab_only**: Loads only the vocabulary without model weights, defaulting to `False`.
### VertexAI Component
## VertexAI Component
This component integrates with [Google Vertex AI](https://cloud.google.com/vertex-ai) large language models to enhance AI capabilities.

22
docs/docs/components/models.mdx
View file

@ -2,7 +2,7 @@ import Admonition from "@theme/Admonition";
# Models
### Amazon Bedrock
## Amazon Bedrock
This component facilitates the generation of text using the LLM (Large Language Model) model from Amazon Bedrock.
@ -48,7 +48,7 @@ This component facilitates the generation of text using the LLM (Large Language
---
### Anthropic
## Anthropic
This component allows the generation of text using Anthropic Chat&Completion large language models.
@ -79,7 +79,7 @@ For detailed documentation and integration guides, please refer to the [Anthropi
---
### Azure OpenAI
## Azure OpenAI
This component allows the generation of text using the LLM (Large Language Model) model from Azure OpenAI.
@ -124,7 +124,7 @@ For detailed documentation and integration guides, please refer to the [Azure Op
---
### Cohere
## Cohere
This component enables text generation using Cohere large language models.
@ -144,7 +144,7 @@ This component enables text generation using Cohere large language models.
---
### Google Generative AI
## Google Generative AI
This component enables text generation using Google Generative AI.
@ -172,7 +172,7 @@ This component enables text generation using Google Generative AI.
---
### Hugging Face API
## Hugging Face API
This component facilitates text generation using LLM models from the Hugging Face Inference API.
@ -194,7 +194,7 @@ This component facilitates text generation using LLM models from the Hugging Fac
---
### LiteLLM Model
## LiteLLM Model
Generates text using the `LiteLLM` collection of large language models.
@ -217,7 +217,7 @@ Generates text using the `LiteLLM` collection of large language models.
---
### Ollama
## Ollama
Generate text using Ollama Local LLMs.
@ -252,7 +252,7 @@ Generate text using Ollama Local LLMs.
---
### OpenAI
## OpenAI
This component facilitates text generation using OpenAI's models.
@ -278,7 +278,7 @@ This component facilitates text generation using OpenAI's models.
---
### Qianfan
## Qianfan
This component facilitates the generation of text using Baidu Qianfan chat models.
@ -317,7 +317,7 @@ This component facilitates the generation of text using Baidu Qianfan chat model
---
### Vertex AI
## Vertex AI
The `ChatVertexAI` is a component for generating text using Vertex AI Chat large language models API.

8
docs/docs/components/retrievers.mdx
View file

@ -2,17 +2,11 @@ import Admonition from '@theme/Admonition';
# Retrievers
<Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
<p>
We appreciate your patience as we enhance our documentation. It may have some imperfections. Please share your feedback or report issues to help us improve. 🛠️📝
</p>
</Admonition>
A retriever is an interface that returns documents in response to an unstructured query. It's broader than a vector store because it doesn't need to store documents; it only needs to retrieve them.
---
### MultiQueryRetriever
## MultiQueryRetriever
The `MultiQueryRetriever` automates generating multiple queries, retrieves relevant documents for each query, and aggregates the results. This method improves retrieval effectiveness and addresses the limitations of traditional distance-based methods.

14
docs/docs/components/text-splitters.mdx
View file

@ -2,19 +2,11 @@ import Admonition from "@theme/Admonition";
# Text Splitters
<Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
<p>
Thank you for your patience as we enhance our documentation. It might
currently have some rough edges. Please share your feedback or report any
issues to assist us in improving! 🛠️📝
</p>
</Admonition>
A text splitter is a tool that divides a document or text into smaller chunks or segments. This helps make large texts more manageable for analysis or processing.
---
### CharacterTextSplitter
## CharacterTextSplitter
The `CharacterTextSplitter` splits a long text into smaller chunks based on a specified character. It aims to keep paragraphs, sentences, and words intact as much as possible since these are semantically related elements of text.
@ -27,7 +19,7 @@ The `CharacterTextSplitter` splits a long text into smaller chunks based on a sp
---
### RecursiveCharacterTextSplitter
## RecursiveCharacterTextSplitter
The `RecursiveCharacterTextSplitter` functions similarly to the `CharacterTextSplitter` by trying to keep paragraphs, sentences, and words together. It also recursively splits the text into smaller chunks if the initial chunk size exceeds a specified threshold.
@ -38,7 +30,7 @@ The `RecursiveCharacterTextSplitter` functions similarly to the `CharacterTextSp
- **chunk_size:** The maximum number of characters in each chunk.
- **separators:** A list of characters used to split the text into chunks. The splitter first tries to split text using the first character in the `separators` list. If any chunk exceeds the maximum size, it proceeds to the next character in the list and continues splitting. The defaults are ["\n\n", "\n", " ", ""].
### LanguageRecursiveTextSplitter
## LanguageRecursiveTextSplitter
The `LanguageRecursiveTextSplitter` divides text into smaller chunks based on the programming language of the text.

36
docs/docs/components/tools.mdx
View file

@ -2,70 +2,64 @@ import Admonition from '@theme/Admonition';
# Tools
<Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
<p>
Thanks for your patience as we refine our documentation. It might have some rough edges currently. Please share your feedback or report issues to help us enhance it! 🛠️📝
</p>
</Admonition>
### SearchApi
## SearchApi
SearchApi offers a real-time search engine results API that returns structured JSON data, including answer boxes, knowledge graphs, organic results, and more.
#### Parameters
### Parameters
- **Api Key:** A unique identifier required for authentication with real-time search engines, obtainable through the [SearchApi dashboard](https://www.searchapi.io/).
- **Engine:** Specifies the search engine used, such as Google, Google Scholar, Bing, YouTube, and YouTube transcripts. Refer to the [documentation](https://www.searchapi.io/docs/google) for a complete list of supported engines.
- **Parameters:** Allows the selection of various parameters recognized by SearchApi. Some parameters are mandatory while others are optional.
#### Output
### Output
- **Document:** The JSON response from the request.
### BingSearchRun
## BingSearchRun
Bing Search, a web search engine by Microsoft, provides search results for various content types like web pages, images, videos, and news articles. It combines algorithms and human editors to deliver these results.
#### Parameters
### Parameters
- **Api Wrapper:** A BingSearchAPIWrapper component that processes the search URL and subscription key.
### Calculator
## Calculator
The calculator tool leverages an LLMMathChain to provide mathematical calculation capabilities, enabling the agent to perform computations as needed.
#### Parameters
### Parameters
- **LLM:** The Language Model used for calculations.
### GoogleSearchResults
## GoogleSearchResults
This is a wrapper around Google Search tailored for users who need precise control over the JSON data returned from the API.
#### Parameters
### Parameters
- **Api Wrapper:** A GoogleSearchAPIWrapper equipped with a Google API key and CSE ID.
### GoogleSearchRun
## GoogleSearchRun
This tool acts as a quick wrapper around Google Search, executing the search query and returning the snippet from the most relevant result.
#### Parameters
### Parameters
- **Api Wrapper:** A GoogleSearchAPIWrapper equipped with a Google API key and CSE ID.
### GoogleSerperRun
## GoogleSerperRun
A cost-effective Google Search API.
#### Parameters
### Parameters
- **Api Wrapper:** A GoogleSerperAPIWrapper with the required API key and result keys.
### InfoSQLDatabaseTool
## InfoSQLDatabaseTool
This tool retrieves metadata about SQL databases. It takes a comma-separated list of table names as input and outputs the schema and sample rows for those tables.
#### Parameters
### Parameters
- **Db:** The SQL database to query.

14
docs/docs/components/utilities.mdx
View file

@ -2,17 +2,11 @@ import Admonition from "@theme/Admonition";
# Utilities
<Admonition type="caution" icon="🚧" title="Zone Under Construction">
We appreciate your understanding as we polish our documentation—it may
contain some rough edges. Share your feedback or report issues to help us
improve! 🛠️📝
</Admonition>
Utilities are a set of actions that can be used to perform common tasks in a flow. They are available in the **Utilities** section in the sidebar.
---
### GET request
## GET request
Make a GET request to the specified URL.
@ -27,7 +21,7 @@ Make a GET request to the specified URL.
---
### POST request
## POST request
Make a POST request to the specified URL.
@ -43,7 +37,7 @@ Make a POST request to the specified URL.
---
### Update request
## Update request
Make a PATCH or PUT request to the specified URL.
@ -60,7 +54,7 @@ Make a PATCH or PUT request to the specified URL.
---
### JSON document builder
## JSON document builder
Build a document containing a JSON object using a key and another document page content.

2
docs/docs/contributing/how-contribute.md
View file

@ -1,4 +1,4 @@
# How to contribute?
# How to Contribute?
👋 Hello there! We welcome contributions from developers of all levels to our open-source project on [GitHub](https://github.com/langflow-ai/langflow). If you'd like to contribute, please check our contributing guidelines and help make Langflow more accessible.

19
docs/docs/getting-started/canvas.mdx
View file

@ -11,15 +11,6 @@ The **Langflow canvas** is the central hub of Langflow, where you'll assemble ne
To get a feel for the canvas, we'll examine a basic prompting flow.
You can either build this flow yourself, or select **New Project** > **Basic prompting** to open a canvas with the flow pre-built.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/basic-prompting.png",
dark: "img/basic-prompting.png",
}}
style={{ width: "30%", margin: "20px auto" }}
/>
## Flows, components, collections, and projects
A [flow](#flow) is a pipeline of components connected together in the Langflow canvas.
@ -44,9 +35,10 @@ For example, the [Basic prompting](../starter-projects/basic-prompting.mdx) flow
light: "img/basic-prompting.png",
dark: "img/basic-prompting.png",
}}
style={{ width: "80%", margin: "20px auto" }}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
In this flow, the **OpenAI LLM component** receives input (left side) and produces output (right side) - in this case, receiving input from the **Chat Input** and **Prompt** components and producing output to the **Chat Output** component.
## Component
@ -77,7 +69,7 @@ Components are the building blocks of flows. They consist of inputs, outputs, an
light: useBaseUrl("img/single-component.png"),
dark: useBaseUrl("img/single-component.png"),
}}
style={{ width: "50%", maxWidth: "800px", margin: "20px auto" }}
style={{ width: "40%", margin: "20px auto" }}
/>
<div style={{ marginBottom: "20px" }}>
@ -112,7 +104,7 @@ The menu options are **Code**, **Save**, **Duplicate**, and **More**.
light: "img/chat-input-with-menu.png",
dark: "img/chat-input-with-menu.png",
}}
style={{ width: "30%", margin: "20px auto" }}
style={{ width: "40%", margin: "20px auto" }}
/>
### Code menu
@ -174,13 +166,14 @@ Modify the call's parameters in the **Tweaks** window, click the **Copy Code** o
light: "img/api-window.png",
dark: "img/api-window.png",
}}
style={{ width: "50%", margin: "20px auto" }}
style={{ width: "60%", margin: "20px auto" }}
/>
### curl
The **curl** tab displays sample code for posting a query to your flow.
Modify the `input_value` to change your input message.
Copy the code and run it to post a query to your flow and get the result.
```curl
curl -X POST \

2
docs/docs/getting-started/install-langflow.mdx
View file

@ -86,7 +86,7 @@ You'll be presented with the following screen:
light: "img/duplicate-space.png",
dark: "img/duplicate-space.png",
}}
style={{ width: "100%", margin: "20px auto" }}
style={{ width: "80%", maxWidth: "800px", margin: "0 auto" }}
/>
Name your Space, define the visibility (Public or Private), and click on **Duplicate Space** to start the installation process. When installation is finished, you'll be redirected to the Space's main page to start using Langflow right away!

2
docs/docs/starter-projects/document-qa.mdx
View file

@ -33,7 +33,7 @@ Build a question-and-answer chatbot with a document loaded from local memory.
light: "img/document-qa.png",
dark: "img/document-qa.png",
}}
style={{ width: "80%", margin: "20px auto" }}
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>
This flow creates a basic chatbot with the **Chat Input**, **Prompt**, **OpenAI**, and **Chat Output** components.

0
docs/docs/administration/custom-component.mdx → docs/docs/tutorials/custom_components.mdx
View file

1
docs/docs/whats-new/customization-control.mdx
View file

@ -1 +0,0 @@
# A New Customization and Control

1
docs/docs/whats-new/debugging-reimagined.mdx
View file

@ -1 +0,0 @@
# Debugging Reimagined

1
docs/docs/whats-new/simplification-standardization.mdx
View file

@ -1 +0,0 @@
# Simplification Through Standardization

1
docs/sidebars.js
View file

@ -105,6 +105,7 @@ module.exports = {
collapsed: true,
items: [
"tutorials/chatprompttemplate_guide",
"tutorials/custom_components",
"tutorials/loading_document",
"tutorials/rag-with-astradb",
],