Repository: langflow-ai/langflow
Pull request: docs: concepts folder
This pull request includes significant changes to the documentation for components and the API pane.

* **Components Overview**: The content from `components-overview.md` has been moved and expanded in a new file `concepts-components.md`. This includes detailed explanations of component functionalities, menus, ports, and code examples. [[1]](diffhunk://#diff-38a2c7f6162a723f9ceac617ba7b9fd087d97657db52cb420a0f1c9febc25ff8L1-L105) [[2]](diffhunk://#diff-cba791b9c14d897fab7a2bc6b3a836edd5b988c2207cb4c10ab21810248f042eR1-R206)

* **Component Code Example**: Added a detailed example of a `RecursiveCharacterTextSplitterComponent` class, explaining its inputs, methods, and usage within a flow.


Problem statement:
docs: how does Langflow run components?
### Feature Request

Documentation focused on more lower-level, under-the-hood Langflow.
Initially raised in Discord, using the Recursivecharactertextsplitter as example.

1) When and how does the get_data_input() method ever get called?

2) When and how does the build_text_splitter() method ever get called?

3) When does the text content found within the data input actually get split? The component's build_text_splitter() method only returns an object instance of the text_splitter. In the Langchain documentation examples, a text splitter object is first instantiated followed by calling that object's .split_text()  or .split_document() method.

How is this component supposed to work within Langflow?

### Motivation

Better explanation of how Langflow interacts with lower-level Python code and Pydantic models.

### Your Contribution

_No response_

Where does Langflow store flows when running locally?
### Feature Request

See title. It's not clear where flows are stored for me to interact with them.

### Motivation

Increase Langflow adoption by making it easier to interact with my local deployment.

### Your Contribution

I will add this by submitting a PR.

Hints from issue discussion:
Linux or WSL2 on Windows: home/<username>/.cache/langflow/

MacOS: /Users/<username>/Library/Caches/langflow/

Can be customized with `LANGFLOW_CONFIG_DIR` env variable if required

Commit message: reorder-sidebar

Patch to review:
diff --git a/docs/docs/Components/components-embedding-models.md b/docs/docs/Components/components-embedding-models.md
index 7507a72a219b..2f71233ccbc4 100644
--- a/docs/docs/Components/components-embedding-models.md
+++ b/docs/docs/Components/components-embedding-models.md
@@ -21,16 +21,14 @@ This embeddings component uses an OpenAI API key for authentication. Refer to yo
 
 This component generates embeddings using the [AI/ML API](https://docs.aimlapi.com/api-overview/embeddings).
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Type | Description |
 |------|------|-------------|
 | model_name | String | The name of the AI/ML embedding model to use |
 | aiml_api_key | SecretString | API key for authenticating with the AI/ML service |
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -40,9 +38,7 @@ This component generates embeddings using the [AI/ML API](https://docs.aimlapi.c
 
 This component is used to load embedding models from [Amazon Bedrock](https://aws.amazon.com/bedrock/).
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -51,7 +47,7 @@ This component is used to load embedding models from [Amazon Bedrock](https://aw
 | endpoint_url | String | URL to set a specific service endpoint other than the default AWS endpoint |
 | region_name | String | AWS region to use, e.g., `us-west-2`. Falls back to `AWS_DEFAULT_REGION` environment variable or region specified in ~/.aws/config if not provided |
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -64,9 +60,7 @@ Connect this component to the **Embeddings** port of the [Astra DB vector store
 This component requires that your Astra DB database has a collection that uses a vectorize embedding provider integration.
 For more information and instructions, see [Embedding Generation](https://docs.datastax.com/en/astra-db-serverless/databases/embedding-generation.html).
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Display Name | Info |
 |------|--------------|------|
@@ -76,7 +70,7 @@ For more information and instructions, see [Embedding Generation](https://docs.d
 | provider_api_key | Provider API Key | As an alternative to `authentication`, directly provide your embedding provider credentials. |
 | model_parameters | Model Parameters | Additional model parameters |
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -86,9 +80,7 @@ For more information and instructions, see [Embedding Generation](https://docs.d
 
 This component generates embeddings using Azure OpenAI models.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -98,7 +90,7 @@ This component generates embeddings using Azure OpenAI models.
 | API Version | String | The API version to use, options include various dates |
 | API Key | String | The API key to access the Azure OpenAI service |
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -108,9 +100,7 @@ This component generates embeddings using Azure OpenAI models.
 
 This component is used to load embedding models from [Cohere](https://cohere.com/).
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -118,7 +108,7 @@ This component is used to load embedding models from [Cohere](https://cohere.com
 | model | String | Language model used for embedding text documents and performing queries (default: `embed-english-v2.0`) |
 | truncate | Boolean | Whether to truncate the input text to fit within the model's constraints (default: `False`) |
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -128,16 +118,14 @@ This component is used to load embedding models from [Cohere](https://cohere.com
 
 This component computes selected forms of similarity between two embedding vectors.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Display Name | Info |
 |------|--------------|------|
 | embedding_vectors | Embedding Vectors | A list containing exactly two data objects with embedding vectors to compare. |
 | similarity_metric | Similarity Metric | Select the similarity metric to use. Options: "Cosine Similarity", "Euclidean Distance", "Manhattan Distance". |
 
-#### Outputs
+### Outputs
 
 | Name | Display Name | Info |
 |------|--------------|------|
@@ -147,16 +135,14 @@ This component computes selected forms of similarity between two embedding vecto
 
 This component connects to Google's generative AI embedding service using the GoogleGenerativeAIEmbeddings class from the `langchain-google-genai` package.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Display Name | Info |
 |------|--------------|------|
 | api_key | API Key | Secret API key for accessing Google's generative AI service (required) |
 | model_name | Model Name | Name of the embedding model to use (default: "models/text-embedding-004") |
 
-#### Outputs
+### Outputs
 
 | Name | Display Name | Info |
 |------|--------------|------|
@@ -173,9 +159,7 @@ This component loads embedding models from HuggingFace.
 
 Use this component to generate embeddings using locally downloaded Hugging Face models. Ensure you have sufficient computational resources to run the models.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Display Name | Info |
 |------|--------------|------|
@@ -191,9 +175,7 @@ This component generates embeddings using Hugging Face Inference API models.
 
 Use this component to create embeddings with Hugging Face's hosted models. Ensure you have a valid Hugging Face API key.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Display Name | Info |
 |------|--------------|------|
@@ -209,9 +191,7 @@ Use this component to create embeddings with Hugging Face's hosted models. Ensur
 
 This component generates embeddings using MistralAI models.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -222,7 +202,7 @@ This component generates embeddings using MistralAI models.
 | timeout | Integer | Request timeout in seconds (default: 120) |
 | endpoint | String | Custom API endpoint URL (default: `https://api.mistral.ai/v1/`) |
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -232,9 +212,7 @@ This component generates embeddings using MistralAI models.
 
 This component generates embeddings using NVIDIA models.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -243,7 +221,7 @@ This component generates embeddings using NVIDIA models.
 | nvidia_api_key | SecretString | API key for authenticating with NVIDIA's service |
 | temperature | Float | Model temperature for embedding generation (default: `0.1`) |
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -253,9 +231,7 @@ This component generates embeddings using NVIDIA models.
 
 This component generates embeddings using Ollama models.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -263,7 +239,7 @@ This component generates embeddings using Ollama models.
 | Ollama Base URL | String | Base URL of the Ollama API (default: `http://localhost:11434`) |
 | Model Temperature | Float | Temperature parameter for the model. Adjusts the randomness in the generated embeddings |
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -273,9 +249,7 @@ This component generates embeddings using Ollama models.
 
 This component is used to load embedding models from [OpenAI](https://openai.com/).
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -302,7 +276,7 @@ This component is used to load embedding models from [OpenAI](https://openai.com
 | TikToken Enable | Boolean | Whether to enable TikToken (default: `True`) |
 | TikToken Model Name | String | Name of the TikToken model |
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -312,16 +286,14 @@ This component is used to load embedding models from [OpenAI](https://openai.com
 
 This component generates embeddings for a given message using a specified embedding model.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Display Name | Info |
 |------|--------------|------|
 | embedding_model | Embedding Model | The embedding model to use for generating embeddings. |
 | message | Message | The message for which to generate embeddings. |
 
-#### Outputs
+### Outputs
 
 | Name | Display Name | Info |
 |------|--------------|------|
@@ -331,9 +303,7 @@ This component generates embeddings for a given message using a specified embedd
 
 This component is a wrapper around [Google Vertex AI](https://cloud.google.com/vertex-ai) [Embeddings API](https://cloud.google.com/vertex-ai/docs/generative-ai/embeddings/get-text-embeddings).
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -349,7 +319,7 @@ This component is a wrapper around [Google Vertex AI](https://cloud.google.com/v
 | tuned_model_name | String | The name of a tuned model. If provided, `model_name` is ignored |
 | verbose | Boolean | This parameter controls the level of detail in the output. When set to `True`, it prints internal states of the chain to help debug (default: `False`) |
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description |
 |------|------|-------------|
diff --git a/docs/docs/Components/components-io.md b/docs/docs/Components/components-io.md
index 76c5bb916bfb..9d01e06eed21 100644
--- a/docs/docs/Components/components-io.md
+++ b/docs/docs/Components/components-io.md
@@ -9,7 +9,7 @@ This category of components defines where data enters and exits your flow. They
 
 The difference between Chat Input and Text Input components is the output format, the number of configurable fields, and the way they are displayed in the Playground.
 
-### Chat Input
+## Chat Input
 
 This component collects user input from the chat.
 
@@ -83,13 +83,13 @@ The Chat Output component creates a [Message](/configuration-objects) object tha
 
 The TextOutputComponent displays text output in the **Playground**. It takes a single input of text and returns a [Message](/configuration-objects) object containing that text. The component is simpler compared to the Chat Output, but focuses solely on displaying text without additional chat-specific features or customizations.
 
-## Inputs
+### Inputs
 
 | Name | Display Name | Info | Type |
 |------|--------------|------|------|
 |input_value|Text|Text to be passed as output.|MultilineInput|
 
-## Outputs
+### Outputs
 
 | Name | Display Name | Info |
 |------|--------------|------|
diff --git a/docs/docs/Components/components-loaders.md b/docs/docs/Components/components-loaders.md
index 4a3cafa6dcac..2969fe630697 100644
--- a/docs/docs/Components/components-loaders.md
+++ b/docs/docs/Components/components-loaders.md
@@ -22,7 +22,7 @@ The [Unstructured.io](https://unstructured.io/) loader component loads files fro
 
 The Confluence component integrates with the Confluence wiki collaboration platform to load and process documents. It utilizes the ConfluenceLoader from LangChain to fetch content from a specified Confluence space.
 
-### Inputs:
+### Inputs
 
 | Name | Display Name | Info |
 | --- | --- | --- |
@@ -34,7 +34,7 @@ The Confluence component integrates with the Confluence wiki collaboration platf
 | content_format | Content Format | Specify content format (default: STORAGE) |
 | max_pages | Max Pages | Maximum number of pages to retrieve (default: 1000) |
 
-### Outputs:
+### Outputs
 
 | Name | Display Name | Info |
 | --- | --- | --- |
@@ -44,7 +44,7 @@ The Confluence component integrates with the Confluence wiki collaboration platf
 
 The GitLoader component uses the GitLoader from LangChain to fetch and load documents from a specified Git repository.
 
-### Inputs:
+### Inputs
 
 | Name | Display Name | Info |
 | --- | --- | --- |
@@ -54,7 +54,7 @@ The GitLoader component uses the GitLoader from LangChain to fetch and load docu
 | file_filter | File Filter | Patterns to filter files (e.g., '.py' to include only .py files, '!.py' to exclude .py files) |
 | content_filter | Content Filter | A regex pattern to filter files based on their content |
 
-### Outputs:
+### Outputs
 
 | Name | Display Name | Info |
 | --- | --- | --- |
@@ -64,7 +64,7 @@ The GitLoader component uses the GitLoader from LangChain to fetch and load docu
 
 This component uses the [Unstructured.io](https://unstructured.io/) Serverless API to load and parse files into a list of structured [Data](/configuration-objects) objects.
 
-### Inputs:
+### Inputs
 
 | Name | Display Name | Info |
 | --- | --- | --- |
@@ -74,7 +74,7 @@ This component uses the [Unstructured.io](https://unstructured.io/) Serverless A
 | chunking_strategy | Chunking Strategy | Strategy for chunking the document (options: "", "basic", "by_title", "by_page", "by_similarity") |
 | unstructured_args | Additional Arguments | Optional dictionary of additional arguments for the Unstructured.io API |
 
-### Outputs:
+### Outputs
 
 | Name | Display Name | Info |
 | --- | --- | --- |
diff --git a/docs/docs/Components/components-overview.md b/docs/docs/Components/components-overview.md
deleted file mode 100644
index 9f694d0181c9..000000000000
--- a/docs/docs/Components/components-overview.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: Components overview
-slug: /components-overview
----
-
-import Icon from "@site/src/components/icon";
-
-A component is a single building block within a flow with inputs, outputs, functions, and parameters that define its functionality. A single component is like a class within a larger application.
-
-To add a component to a flow, drag it from the **Component** menu to the **Workspace**.
-
-Learn more about components and how they work on this page.
-
-## Component menu
-
-Each component is unique, but all have a menu bar at the top that looks something like this.
-
-<img src="/img/openai-model-component.png" alt="Open AI component" style={{display: 'block', margin: 'auto', width: 300}} />
-
-Use these controls to do the following:
-
-- **Code** — Modify the component's Python code and save your changes.
-- **Controls** — Adjust all component parameters.
-- **Freeze Path** — After a component runs, lock its previous output state to prevent it from re-running.
-
-Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
-
-To view a component’s output and logs, click the <Icon name="View" aria-label="View icon" />**Visibility** icon.
-
-To run a single component, click ▶️ **Play**. A ✅**Check** indicates that the component ran successfully.
-
-## Component ports
-
-Handles (<Icon name="Circle" size="16" aria-label="A circle on the side of a component" />) on the side of a component indicate the types of inputs and outputs that can be connected at that port. Hover over a handle to see connection details.
-
-<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
-
-### Component port data type colors
-
-The following table lists the handle colors and their corresponding data types:
-
-| Data Type | Handle Color | Hex Code |
-|-----------|--------------|----------|
-| BaseLanguageModel | Fuchsia | #c026d3 |
-| Data | Red | #dc2626 |
-| Document | Lime | #65a30d |
-| Embeddings | Emerald | #10b981 |
-| LanguageModel | Fuchsia | #c026d3 |
-| Message | Indigo | #4f46e5 |
-| Prompt | Violet | #7c3aed |
-| str | Indigo | #4F46E5 |
-| Text | Indigo | #4F46E5 |
-| unknown | Gray | #9CA3AF |
-
-
-## Freeze Path
-
-After a component runs, **Freeze Path** locks the component's previous output state to prevent it from re-running.
-
-If you’re expecting consistent output from a component and don’t need to re-run it, click **Freeze Path**.
-
-Enabling **Freeze Path** freezes all components downstream of the selected component.
-
-
-## Additional component options
-
-Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
-
-To modify a component's name or description, double-click in the **Name** or **Description** fields. Component descriptions accept markdown syntax.
-
-### Component shortcuts
-
-The following keyboard shortcuts are available when a component is selected.
-
-| Menu Item | Mac Shortcut | Description |
-|-----------|----------|-------------|
-| Code | ⌘ + C | Opens the code editor for the component. |
-| Advanced | ⌘ + A | Opens advanced settings for the component. |
-| Save | ⌘ + S | Saves the current state of the component to Saved components in the sidebar. |
-| Duplicate | ⌘ + D | Creates a duplicate of the component. |
-| Copy | ⌘ + C | Copies the selected component. Paste it in the workspace with ⌘ + V. |
-| Docs | ⌘ + D | Opens related documentation. |
-| Minimize | ⌘ + Q | Minimizes the current component. |
-| Freeze | ⌘ + F | Freezes the current component state. |
-| Freeze Path | ⌘ + F | Freezes the current component state and all upstream components. |
-| Download | ⌘ + D | Downloads the current component as a JSON file. |
-| Delete | ⌘ + ⌫ | Deletes the component. |
-
-## Group components in the workspace
-
-Multiple components can be grouped into a single component for reuse. This is useful when combining large flows into single components (like RAG with a vector database, for example) and saving space.
-
-1. Hold **Shift** and drag to select components.
-2. Select **Group**.
-3. The components merge into a single component.
-4. Double-click the name and description to change them.
-5. Save your grouped component to in the sidebar for later use.
-
-## Component version
-
-A component's state is stored in a database, while sidebar components are like starter templates. As soon as you drag a component from the sidebar to the workspace, the two components are no longer in parity.
-
-The component will keep the version number it was initialized to the workspace with. Click the **Update Component** icon (exclamation mark) to bring the component up to the `latest` version. This will change the code of the component in place so you can validate that the component was updated by checking its Python code before and after updating it.
-
-
diff --git a/docs/docs/Components/components-tools.md b/docs/docs/Components/components-tools.md
index 2e7b6d21275b..3f6d63201675 100644
--- a/docs/docs/Components/components-tools.md
+++ b/docs/docs/Components/components-tools.md
@@ -25,13 +25,68 @@ To make a component into a tool that an agent can use, enable **Tool mode** in t
 If the component you want to connect to an agent doesn't have a **Tool mode** option, you can modify the component's inputs to become a tool.
 For an example, see [Make any component a tool](/agents-tool-calling-agent-component#make-any-component-a-tool).
 
+## Astra DB Tool
+
+The `Astra DB Tool` allows agents to connect to and query data from Astra DB Collections.
+
+### Inputs
+
+| Name              | Type   | Description                                                                                                                      |
+|-------------------|--------|----------------------------------------------------------------------------------------------------------------------------------|
+| Tool Name         | String | The name used to reference the tool in the agent's prompt.                                                                       |
+| Tool Description  | String | A brief description of the tool. This helps the model decide when to use it.                                                     |
+| Collection Name   | String | The name of the Astra DB collection to query.                                                                                    |
+| Token             | SecretString | The authentication token for accessing Astra DB.                                                                                 |
+| API Endpoint      | String | The Astra DB API endpoint.                                                                                                       |
+| Projection Fields | String | The attributes to return, separated by commas. Default: "*".                                                                     |
+| Tool Parameters   | Dict   | Parameters the model needs to fill to execute the tool. For required parameters, use an exclamation mark (e.g., "!customer_id"). |
+| Static Filters    | Dict   | Attribute-value pairs used to filter query results.                                                                              |
+| Limit             | String | The number of documents to return.                                                                                               |
+
+### Outputs
+
+The Data output is primarily used when directly querying Astra DB, while the Tool output is used when integrating with LangChain agents or chains.
+
+| Name | Type | Description |
+|------|------|-------------|
+| Data | List[Data] | A list of Data objects containing the query results from Astra DB. Each Data object contains the document fields specified by the projection attributes. Limited by the `number_of_results` parameter. |
+| Tool | StructuredTool | A LangChain StructuredTool object that can be used in agent workflows. Contains the tool name, description, argument schema based on tool parameters, and the query function. |
+
+
+## Astra DB CQL Tool
+
+The `Astra DB CQL Tool` allows agents to query data from CQL Tables in Astra DB.
+
+The main difference between this tool and the **Astra DB Tool** is that this tool is specifically designed for CQL tables and requires partition keys for querying, while also supporting clustering keys for more specific queries.
+
+### Inputs
+
+| Name              | Type   | Description                                                                                                                                        |
+|-------------------|--------|----------------------------------------------------------------------------------------------------------------------------------------------------|
+| Tool Name         | String | The name used to reference the tool in the agent's prompt.                                                                                         |
+| Tool Description  | String | A brief description of the tool to guide the model in using it.                                                                                    |
+| Keyspace          | String | The name of the keyspace.                                                                                                                          |
+| Table Name        | String | The name of the Astra DB CQL table to query.                                                                                                       |
+| Token             | SecretString | The authentication token for Astra DB.                                                                                                             |
+| API Endpoint      | String | The Astra DB API endpoint.                                                                                                                         |
+| Projection Fields | String | The attributes to return, separated by commas. Default: "*".                                                                                       |
+| Partition Keys    | Dict   | Required parameters that the model must fill to query the tool.                                                                                    |
+| Clustering Keys   | Dict   | Optional parameters the model can fill to refine the query. Required parameters should be marked with an  exclamation mark (e.g., "!customer_id"). |
+| Static Filters    | Dict   | Attribute-value pairs used to filter query results.                                                                                                |
+| Limit             | String | The number of records to return.                                                                                                                   |
+
+### Outputs
+
+| Name | Type | Description |
+|------|------|-------------|
+| Data | List[Data] | A list of Data objects containing the query results from the Astra DB CQL table. Each Data object contains the document fields specified by the projection fields. Limited by the number_of_results parameter. |
+| Tool | StructuredTool | A LangChain StructuredTool object that can be used in agent workflows. Contains the tool name, description, argument schema based on partition and clustering keys, and the query function. |
+
 ## Bing Search API
 
 This component allows you to call the Bing Search API.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name                   | Type         | Description                           |
 |------------------------|--------------|---------------------------------------|
@@ -40,7 +95,7 @@ This component allows you to call the Bing Search API.
 | bing_search_url        | String       | Custom Bing Search URL (optional)    |
 | k                      | Integer      | Number of search results to return    |
 
-#### Outputs
+### Outputs
 
 | Name    | Type      | Description                          |
 |---------|-----------|--------------------------------------|
@@ -51,15 +106,13 @@ This component allows you to call the Bing Search API.
 
 This component creates a tool for performing basic arithmetic operations on a given expression.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name       | Type   | Description                                                        |
 |------------|--------|--------------------------------------------------------------------|
 | expression | String | The arithmetic expression to evaluate (e.g., `4*4*(33/22)+12-20`). |
 
-#### Outputs
+### Outputs
 
 | Name   | Type | Description                                     |
 |--------|------|-------------------------------------------------|
@@ -71,9 +124,8 @@ This component allows you to evaluate basic arithmetic expressions. It supports
 
 This component runs Icosa's Combinatorial Reasoning (CR) pipeline on an input to create an optimized prompt with embedded reasons. Sign up for access here: https://forms.gle/oWNv2NKjBNaqqvCx6 
 
-### Parameters
+### Inputs
 
-#### Inputs
 | Name                   | Display Name | Description                           |
 |------------------------|--------------|---------------------------------------|
 | prompt                 | Prompt      | Input to run CR on                    |
@@ -82,7 +134,7 @@ This component runs Icosa's Combinatorial Reasoning (CR) pipeline on an input to
 | password               | Password | Password for Icosa API authentication |
 | model_name             | Model Name      | OpenAI LLM to use for reason generation|
 
-#### Outputs
+### Outputs
 
 | Name    | Display Name | Description                          |
 |---------|-----------|--------------------------------------|
@@ -93,9 +145,7 @@ This component runs Icosa's Combinatorial Reasoning (CR) pipeline on an input to
 
 This component allows you to call the Glean Search API.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name                   | Type         | Description                           |
 |------------------------|--------------|---------------------------------------|
@@ -105,7 +155,7 @@ This component allows you to call the Glean Search API.
 | page_size              | Integer      | Number of results per page (default: 10) |
 | request_options        | Dict         | Additional options for the API request (optional) |
 
-#### Outputs
+### Outputs
 
 | Name    | Type      | Description                          |
 |---------|-----------|--------------------------------------|
@@ -116,9 +166,7 @@ This component allows you to call the Glean Search API.
 
 This component allows you to call the Google Search API.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name                   | Type         | Description                           |
 |------------------------|--------------|---------------------------------------|
@@ -127,7 +175,7 @@ This component allows you to call the Google Search API.
 | input_value            | String       | Search query input                    |
 | k                      | Integer      | Number of search results to return    |
 
-#### Outputs
+### Outputs
 
 | Name    | Type      | Description                          |
 |---------|-----------|--------------------------------------|
@@ -138,9 +186,7 @@ This component allows you to call the Google Search API.
 
 This component allows you to call the Serper.dev Google Search API.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name                   | Type         | Description                           |
 |------------------------|--------------|---------------------------------------|
@@ -148,7 +194,7 @@ This component allows you to call the Serper.dev Google Search API.
 | input_value            | String       | Search query input                    |
 | k                      | Integer      | Number of search results to return    |
 
-#### Outputs
+### Outputs
 
 | Name    | Type      | Description                          |
 |---------|-----------|--------------------------------------|
@@ -161,9 +207,7 @@ This component creates a structured tool from Python code using a dataclass.
 
 The component dynamically updates its configuration based on the provided Python code, allowing for custom function arguments and descriptions.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name                   | Type         | Description                           |
 |------------------------|--------------|---------------------------------------|
@@ -174,7 +218,7 @@ The component dynamically updates its configuration based on the provided Python
 | tool_function          | String       | Selected function for the tool        |
 | global_variables        | Dict         | Global variables or data for the tool |
 
-#### Outputs
+### Outputs
 
 | Name        | Type  | Description                             |
 |-------------|-------|-----------------------------------------|
@@ -184,9 +228,7 @@ The component dynamically updates its configuration based on the provided Python
 
 This component creates a Python REPL (Read-Eval-Print Loop) tool for executing Python code.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name            | Type         | Description                                             |
 |-----------------|--------------|--------------------------------------------------------|
@@ -194,7 +236,7 @@ This component creates a Python REPL (Read-Eval-Print Loop) tool for executing P
 | description     | String       | A description of the tool's functionality               |
 | global_imports  | List[String] | List of modules to import globally (default: ["math"])  |
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description                                |
 |------|------|--------------------------------------------|
@@ -204,9 +246,7 @@ This component creates a Python REPL (Read-Eval-Print Loop) tool for executing P
 
 This component creates a tool for interacting with a retriever in LangChain.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name        | Type          | Description                                 |
 |-------------|---------------|---------------------------------------------|
@@ -214,7 +254,7 @@ This component creates a tool for interacting with a retriever in LangChain.
 | name        | String        | The name of the tool                        |
 | description | String        | A description of the tool's functionality   |
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description                                |
 |------|------|--------------------------------------------|
@@ -224,9 +264,7 @@ This component creates a tool for interacting with a retriever in LangChain.
 
 This component creates a tool for searching using SearXNG, a metasearch engine.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name        | Type         | Description                           |
 |-------------|--------------|---------------------------------------|
@@ -235,7 +273,7 @@ This component creates a tool for searching using SearXNG, a metasearch engine.
 | categories  | List[String] | Categories to search in               |
 | language    | String       | Language for the search results       |
 
-#### Outputs
+### Outputs
 
 | Name        | Type | Description                                |
 |-------------|------|--------------------------------------------|
@@ -247,9 +285,7 @@ This component calls the `searchapi.io` API. It can be used to search the web fo
 
 For more information, see the [SearchAPI documentation](https://www.searchapi.io/docs/google).
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name           | Display Name       | Info                                                |
 |----------------|---------------------|-----------------------------------------------------|
@@ -258,7 +294,7 @@ For more information, see the [SearchAPI documentation](https://www.searchapi.io
 | input_value    | Input               | The search query or input for the API call          |
 | search_params  | Search parameters   | Additional parameters for customizing the search    |
 
-#### Outputs
+### Outputs
 
 | Name | Display Name    | Info                                                 |
 |------|-----------------|------------------------------------------------------|
@@ -269,9 +305,7 @@ For more information, see the [SearchAPI documentation](https://www.searchapi.io
 
 This component creates a tool for searching using the Serp API.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name             | Type         | Description                                 |
 |------------------|--------------|---------------------------------------------|
@@ -279,7 +313,7 @@ This component creates a tool for searching using the Serp API.
 | input_value      | String       | Search query input                          |
 | search_params    | Dict         | Additional search parameters (optional)     |
 
-#### Outputs
+### Outputs
 
 | Name    | Type      | Description                                 |
 |---------|-----------|---------------------------------------------|
@@ -290,9 +324,7 @@ This component creates a tool for searching using the Serp API.
 
 This component creates a tool for searching and retrieving information from Wikipedia.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name                    | Type    | Description                                                |
 |-------------------------|---------|-----------------------------------------------------------|
@@ -302,7 +334,7 @@ This component creates a tool for searching and retrieving information from Wiki
 | load_all_available_meta | Boolean | Whether to load all available metadata (advanced)          |
 | doc_content_chars_max   | Integer | Maximum number of characters for document content (advanced)|
 
-#### Outputs
+### Outputs
 
 | Name    | Type      | Description                           |
 |---------|-----------|---------------------------------------|
@@ -313,16 +345,14 @@ This component creates a tool for searching and retrieving information from Wiki
 
 This component creates a tool for querying the Wolfram Alpha API.
 
-### Parameters
-
-#### Inputs
+### Inputs
 
 | Name        | Type         | Description                    |
 |-------------|--------------|--------------------------------|
 | input_value | String       | Query input for Wolfram Alpha  |
 | app_id      | SecretString | Wolfram Alpha API App ID       |
 
-#### Outputs
+### Outputs
 
 | Name    | Type      | Description                                    |
 |---------|-----------|------------------------------------------------|
@@ -333,57 +363,12 @@ This component creates a tool for querying the Wolfram Alpha API.
 
 This component creates a tool for retrieving news from Yahoo Finance.
 
-### Parameters
+### Inputs
 
 This component does not have any input parameters.
 
-#### Outputs
+### Outputs
 
 | Name | Type | Description                                  |
 |------|------|----------------------------------------------|
 | tool | Tool | Yahoo Finance News tool for use in LangChain |
-
-
-## Astra DB Tool
-
-The `Astra DB Tool` allows agents to connect to and query data from Astra DB Collections.
-
-### Parameters
-
-#### Inputs
-
-| Name              | Type   | Description                                                                                                                      |
-|-------------------|--------|----------------------------------------------------------------------------------------------------------------------------------|
-| Tool Name         | String | The name used to reference the tool in the agent's prompt.                                                                       |
-| Tool Description  | String | A brief description of the tool. This helps the model decide when to use it.                                                     |
-| Collection Name   | String | The name of the Astra DB collection to query.                                                                                    |
-| Token             | SecretString | The authentication token for accessing Astra DB.                                                                                 |
-| API Endpoint      | String | The Astra DB API endpoint.                                                                                                       |
-| Projection Fields | String | The attributes to return, separated by commas. Default: "*".                                                                     |
-| Tool Parameters   | Dict   | Parameters the model needs to fill to execute the tool. For required parameters, use an exclamation mark (e.g., "!customer_id"). |
-| Static Filters    | Dict   | Attribute-value pairs used to filter query results.                                                                              |
-| Limit             | String | The number of documents to return.                                                                                               |
-
-
-
-## Astra DB CQL Tool
-
-The `Astra DB CQL Tool` allows agents to query data from CQL Tables in Astra DB.
-
-### Parameters
-
-#### Inputs
-
-| Name              | Type   | Description                                                                                                                                        |
-|-------------------|--------|----------------------------------------------------------------------------------------------------------------------------------------------------|
-| Tool Name         | String | The name used to reference the tool in the agent's prompt.                                                                                         |
-| Tool Description  | String | A brief description of the tool to guide the model in using it.                                                                                    |
-| Keyspace          | String | The name of the keyspace.                                                                                                                          |
-| Table Name        | String | The name of the Astra DB CQL table to query.                                                                                                       |
-| Token             | SecretString | The authentication token for Astra DB.                                                                                                             |
-| API Endpoint      | String | The Astra DB API endpoint.                                                                                                                         |
-| Projection Fields | String | The attributes to return, separated by commas. Default: "*".                                                                                       |
-| Partition Keys    | Dict   | Required parameters that the model must fill to query the tool.                                                                                    |
-| Clustering Keys   | Dict   | Optional parameters the model can fill to refine the query. Required parameters should be marked with an  exclamation mark (e.g., "!customer_id"). |
-| Static Filters    | Dict   | Attribute-value pairs used to filter query results.                                                                                                |
-| Limit             | String | The number of records to return.                                                                                                                   |
diff --git a/docs/docs/Workspace/workspace-api.md b/docs/docs/Concepts/concepts-api.md
similarity index 85%
rename from docs/docs/Workspace/workspace-api.md
rename to docs/docs/Concepts/concepts-api.md
index 91ef420db1f8..b868a7938ac8 100644
--- a/docs/docs/Workspace/workspace-api.md
+++ b/docs/docs/Concepts/concepts-api.md
@@ -1,40 +1,68 @@
 ---
-title: API
-slug: /workspace-api
+title: API pane
+slug: /concepts-api
 ---
 
-import ReactPlayer from "react-player";
+The **API** pane presents code templates for integrating your flow into external applications.
 
-The **API** section presents code templates for integrating your flow into external applications.
+![](/img/api-pane.png)
 
+## cURL
 
-![](/img/api-pane.png)
+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.
 
+## Python API
 
-### cURL {#4eb287a8424349c4b0b436a6703de5f3}
+The **Python API** tab displays code to interact with your flow using the Python HTTP `requests` library.
 
+To use the `requests` library:
 
-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.
+1. Copy and paste the code into a Python script.
+2. Run the script and pass your message with it.
+
+```python
+python3 python-api-script.py --message="tell me about something interesting"
+```
+## Python code
 
+The **Python Code** tab displays code to interact with your flow's `.json` file using the Langflow runtime.
 
-### Python API {#fb7db14e6330418389562ef647aa2354}
+To use your code in a Python application using the Langflow runtime, you have to first download your flow’s JSON file.
 
+1. In your **Workspace**, click **Settings**, and then select **Export**.
 
-The **Python API** tab displays code to interact with your flow using the Python HTTP requests library.
+2. Download the flow to your local machine. Make sure the flow path in the script matches the flow’s location on your machine.
 
+3. Copy and paste the code from the API tab into a Python script file.
+It will look like this:
 
-### Python Code {#7af87438549b4972907ac310a4193067}
+```python
+from langflow.load import run_flow_from_json
+TWEAKS = {
+  "ChatInput-kKhri": {},
+  "Prompt-KDSi5": {},
+  "ChatOutput-Vr3Q7": {},
+  "OpenAIModel-4xYtx": {}
+}
 
+result = run_flow_from_json(flow="./basic-prompting-local.json",
+                            input_value="tell me about something interesting",
+                            fallback_to_env_vars=True, # False by default
+                            tweaks=TWEAKS)
 
-The **Python Code** tab displays code to interact with your flow's `.json` file using the Langflow runtime.
+print(result)
+```
 
+4. Run the script:
 
-### Tweaks {#5680600063724590ac2302b4ddeea867}
+```python
+python3 python-api-script.py
+```
 
+## Tweaks
 
 The **Tweaks** tab displays the available parameters for your flow. Modifying the parameters changes the code parameters across all windows. For example, changing the **Chat Input** component's `input_value` will change that value across all API calls.
 
-
 ## Send image files to your flow with the API
 
 Send image files to the Langflow API for AI analysis.
@@ -80,65 +108,55 @@ Your chatbot describes the image file you sent.
 "text": "This flowchart appears to represent a complex system for processing financial inquiries using various AI agents and tools. Here’s a breakdown of its components and how they might work together..."
 ```
 
-## Chat Widget {#48f121a6cb3243979a341753da0c2700}
-
-
----
-
+## Chat widget
 
 The **Chat Widget HTML** tab displays code that can be inserted in the `<body>` of your HTML to interact with your flow.
 
-
 The **Langflow Chat Widget** is a powerful web component that enables communication with a Langflow project. This widget allows for a chat interface embedding, allowing the integration of Langflow into web applications effortlessly.
 
-
 You can get the HTML code embedded with the chat by clicking the Code button at the Sidebar after building a flow.
 
-
 Clicking the Chat Widget HTML tab, you'll get the code to be inserted. Read below to learn how to use it with HTML, React and Angular.
 
+### Embed the chat widget into HTML
 
-### Embed your flow into HTML {#6e84db2f2a0d451db6fa03c57e9bf9a4}
+To embed the Chat Widget into any HTML page, insert the code snippet. inside a `<body>` tag.
 
+```html
+<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@v1.0.6/dist/build/static/js/bundle.min.js""></script>
 
-The Chat Widget can be embedded into any HTML page, inside a `<body>` tag, as demonstrated in the video below.
+  <langflow-chat
+    window_title="Basic Prompting"
+    flow_id="801abb1e-19b9-4278-9632-179b6d84f126"
+    host_url="http://localhost:7860"
 
+  ></langflow-chat>
+```
 
-### Embed your flow with React {#fe5d3b1c42e74e4c84ebc9d1799b7665}
-
+### Embed the chat widget with React
 
 To embed the Chat Widget using React, insert this `<script>` tag into the React _index.html_ file, inside the `<body>`tag:
 
-
 ```javascript
 <script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
 ```
 
-
 Declare your Web Component and encapsulate it in a React component.
 
-
 ```javascript
 declare global {  namespace JSX {    interface IntrinsicElements {      "langflow-chat": any;    }  }}export default function ChatWidget({ className }) {  return (    <div className={className}>      <langflow-chat        chat_inputs='{"your_key":"value"}'        chat_input_field="your_chat_key"        flow_id="your_flow_id"        host_url="langflow_url"      ></langflow-chat>    </div>  );}
 ```
 
-
-
 Finally, you can place the component anywhere in your code to display the Chat Widget.
 
-
-### Embed your flow with Angular {#4fd87355b9aa409894acfbb9e1497980}
-
+### Embed the chat widget with Angular
 
 To use the chat widget in Angular, first add this `<script>` tag into the Angular _index.html_ file, inside the `<body>` tag.
 
-
 ```javascript
 <script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
 ```
 
-
-
 When you use a custom web component in an Angular template, the Angular compiler might show a warning when it doesn't recognize the custom elements by default. To suppress this warning, add `CUSTOM_ELEMENTS_SCHEMA` to the module's `@NgModule.schemas`.
 
 - Open the module file (it typically ends with _.module.ts_) where you'd add the `langflow-chat` web component.
@@ -152,43 +170,27 @@ When you use a custom web component in an Angular template, the Angular compiler
 @NgModule({  declarations: [    // ... Other components and directives ...  ],  imports: [    // ... Other imported modules ...  ],  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here})export class YourModule {}
 ```
 
-
-
 In your Angular project, find the component belonging to the module where `CUSTOM_ELEMENTS_SCHEMA` was added. Inside the template, add the `langflow-chat` tag to include the Chat Widget in your component's view:
 
-
 ```javascript
 <langflow-chat  chat_inputs='{"your_key":"value"}'  chat_input_field="your_chat_key"  flow_id="your_flow_id"  host_url="langflow_url"></langflow-chat>
 ```
 
-
 :::tip
 
 `CUSTOM_ELEMENTS_SCHEMA` is a built-in schema that allows Angular to recognize custom elements. Adding `CUSTOM_ELEMENTS_SCHEMA` tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like `langflow-chat`. Notice that you can only use the Chat Widget in components that are part of the module where you added `CUSTOM_ELEMENTS_SCHEMA`.
 
 :::
 
-
-
-
-## Chat Widget Configuration {#5ede4bbbd2ac43e29c90f3edb43cba58}
-
-
----
-
+## Chat Widget Configuration
 
 Use the widget API to customize your Chat Widget:
 
-
 :::caution
-
 Props with the type JSON need to be passed as stringified JSONs, with the format \{"key":"value"\}.
-
 :::
 
 
-
-
 | Prop                  | Type    | Required | Description                                                                                                                                                      |
 | --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | bot_message_style     | JSON    | No       | Applies custom formatting to bot messages.                                                                                                                       |
diff --git a/docs/docs/Concepts/concepts-components.md b/docs/docs/Concepts/concepts-components.md
new file mode 100644
index 000000000000..2c4db5249aa1
--- /dev/null
+++ b/docs/docs/Concepts/concepts-components.md
@@ -0,0 +1,209 @@
+---
+title: Components
+slug: /concepts-components
+---
+
+import Icon from "@site/src/components/icon";
+
+# Langflow components overview
+
+A component is a single building block within a flow with inputs, outputs, functions, and parameters that define its functionality. A single component is like a class within a larger application.
+
+To add a component to a flow, drag it from the **Component** menu to the **Workspace**.
+
+Learn more about components and how they work on this page.
+
+## Component menu
+
+Each component is unique, but all have a menu bar at the top that looks something like this.
+
+<img src="/img/openai-model-component.png" alt="Open AI component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+Use these controls to do the following:
+
+- **Code** — Modify the component's Python code and save your changes.
+- **Controls** — Adjust all component parameters.
+- **Freeze Path** — After a component runs, lock its previous output state to prevent it from re-running.
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To view a component’s output and logs, click the <Icon name="View" aria-label="View icon" />**Visibility** icon.
+
+To run a single component, click ▶️ **Play**.
+
+A ✅**Check** indicates that the component ran successfully.
+
+Running a single component with the **Play** button is different from running the entire flow. In a single component run, the `build_vertex` function is called, which builds and runs only the single component with direct inputs provided through the UI (the `inputs_dict` parameter). The  `VertexBuildResult` data is passed to the `build_and_run` method, which calls the component's `build` method and runs it. Unlike running the full flow, running a single component does not automatically execute its upstream dependencies.
+
+## Component ports
+
+Handles (<Icon name="Circle" size="16" aria-label="A circle on the side of a component" />) on the side of a component indicate the types of inputs and outputs that can be connected at that port. Hover over a handle to see connection details.
+
+<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+### Component port data type colors
+
+The following table lists the handle colors and their corresponding data types:
+
+| Data Type | Handle Color | Hex Code |
+|-----------|--------------|----------|
+| BaseLanguageModel | Fuchsia | #c026d3 |
+| Data | Red | #dc2626 |
+| Document | Lime | #65a30d |
+| Embeddings | Emerald | #10b981 |
+| LanguageModel | Fuchsia | #c026d3 |
+| Message | Indigo | #4f46e5 |
+| Prompt | Violet | #7c3aed |
+| str | Indigo | #4F46E5 |
+| Text | Indigo | #4F46E5 |
+| unknown | Gray | #9CA3AF |
+
+## Component code
+
+A component inherits from a base `Component` class that defines its interface and behavior.
+
+For example, the [Recursive character text splitter](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/components/langchain_utilities/recursive_character.py) is a child of the [LCTextSplitterComponent](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/base/textsplitters/model.py) class.
+
+```python
+from typing import Any
+
+from langchain_text_splitters import RecursiveCharacterTextSplitter, TextSplitter
+
+from langflow.base.textsplitters.model import LCTextSplitterComponent
+from langflow.inputs.inputs import DataInput, IntInput, MessageTextInput
+from langflow.utils.util import unescape_string
+
+class RecursiveCharacterTextSplitterComponent(LCTextSplitterComponent):
+    display_name: str = "Recursive Character Text Splitter"
+    description: str = "Split text trying to keep all related text together."
+    documentation: str = "https://docs.langflow.org/components-processing"
+    name = "RecursiveCharacterTextSplitter"
+    icon = "LangChain"
+
+    inputs = [
+        IntInput(
+            name="chunk_size",
+            display_name="Chunk Size",
+            info="The maximum length of each chunk.",
+            value=1000,
+        ),
+        IntInput(
+            name="chunk_overlap",
+            display_name="Chunk Overlap",
+            info="The amount of overlap between chunks.",
+            value=200,
+        ),
+        DataInput(
+            name="data_input",
+            display_name="Input",
+            info="The texts to split.",
+            input_types=["Document", "Data"],
+        ),
+        MessageTextInput(
+            name="separators",
+            display_name="Separators",
+            info='The characters to split on.\nIf left empty defaults to ["\\n\\n", "\\n", " ", ""].',
+            is_list=True,
+        ),
+    ]
+
+    def get_data_input(self) -> Any:
+        return self.data_input
+
+    def build_text_splitter(self) -> TextSplitter:
+        if not self.separators:
+            separators: list[str] | None = None
+        else:
+            # check if the separators list has escaped characters
+            # if there are escaped characters, unescape them
+            separators = [unescape_string(x) for x in self.separators]
+
+        return RecursiveCharacterTextSplitter(
+            separators=separators,
+            chunk_size=self.chunk_size,
+            chunk_overlap=self.chunk_overlap,
+        )
+
+```
+
+Components include definitions for inputs and outputs, which will be represented in the UI with color-coded ports.
+
+**Input Definition:** Each input (like `IntInput` or `DataInput`) specifies an input's type, name, and display properties, which appear as configurable fields in the component's UI panel.
+
+**Methods:** Components have methods or functions that handle their functionality. This component has two methods.
+`get_data_input` retrieves the text data to be split from the component's input. This makes the data available to the class.
+`build_text_splitter` creates a `RecursiveCharacterTextSplitter` object by calling its parent class's `build` method. The text is split with the created splitter and passed to the next component.
+When used in a flow, this component:
+
+1. Displays its configuration options in the UI.
+2. Validates user inputs based on the input types.
+3. Processes data using the configured parameters.
+4. Passes results to the next component.
+
+## Freeze Path
+
+After a component runs, **Freeze Path** locks the component's previous output state to prevent it from re-running.
+
+If you’re expecting consistent output from a component and don’t need to re-run it, click **Freeze Path**. 
+
+Enabling **Freeze Path** freezes all components upstream of the selected component.
+
+If you only want to freeze a single component, select **Freeze** instead.
+
+A <Icon name="Snowflake" aria-label="Snowflake"/> icon appears on all frozen components.
+
+## Additional component options
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To modify a component's name or description, double-click in the **Name** or **Description** fields. Component descriptions accept markdown syntax.
+
+### Component shortcuts
+
+The following keyboard shortcuts are available when a component is selected.
+
+| Menu Item | Mac Shortcut | Description |
+|-----------|----------|-------------|
+| Code | ⌘ + C | Opens the code editor for the component. |
+| Advanced | ⌘ + A | Opens advanced settings for the component. |
+| Save | ⌘ + S | Saves the current state of the component to Saved components in the sidebar. |
+| Duplicate | ⌘ + D | Creates a duplicate of the component. |
+| Copy | ⌘ + C | Copies the selected component. Paste it in the workspace with ⌘ + V. |
+| Docs | ⌘ + D | Opens related documentation. |
+| Minimize | ⌘ + Q | Minimizes the current component. |
+| Freeze | ⌘ + F | Freezes the current component state. |
+| Freeze Path | ⌘ + Shift + F | Freezes the current component state and all upstream components. |
+| Download | ⌘ + D | Downloads the current component as a JSON file. |
+| Delete | ⌘ + ⌫ | Deletes the component. |
+
+## Group components in the workspace
+
+Multiple components can be grouped into a single component for reuse. This is useful when combining large flows into single components (like RAG with a vector database, for example) and saving space.
+
+1. Hold **Shift** and drag to select components.
+2. Select **Group**.
+3. The components merge into a single component.
+4. Double-click the name and description to change them.
+5. Save your grouped component to in the sidebar for later use.
+
+## Component version
+
+A component's state is stored in a database, while sidebar components are like starter templates. As soon as you drag a component from the sidebar to the workspace, the two components are no longer in parity.
+
+The component will keep the version number it was initialized to the workspace with. Click the **Update Component** icon (exclamation mark) to bring the component up to the `latest` version. This will change the code of the component in place so you can validate that the component was updated by checking its Python code before and after updating it.
+
+## Components sidebar
+
+Components are listed in the sidebar by component type.
+
+Component **bundles** are components grouped by provider. For example, Langchain modules like **RunnableExecutor** and **CharacterTextSplitter** are grouped under the **Langchain** bundle.
+
+The sidebar includes a component **Search** bar, and includes flags for showing or hiding **Beta** and **Legacy** components.
+
+**Beta** components are still being tested and are not suitable for production workloads.
+
+**Legacy** components are available to use but no longer supported.
+
+
+
+
diff --git a/docs/docs/Concepts/concepts-overview.md b/docs/docs/Concepts/concepts-overview.md
new file mode 100644
index 000000000000..700fd4349c1a
--- /dev/null
+++ b/docs/docs/Concepts/concepts-overview.md
@@ -0,0 +1,130 @@
+---
+title: Langflow overview
+slug: /concepts-overview
+---
+
+This page explores the fundamental building blocks of Langflow, beginning with the question, **"What is a flow?"**
+
+## What is a flow?
+
+A **flow** is an application. It receives input, processes it, and produces output.
+
+Flows are created in the **workspace** with components dragged from the components sidebar.
+
+![Basic prompting flow within in the workspace](/img/workspace-basic-prompting.png)
+
+A flow can be simple as the [basic prompting flow](/get-started-quickstart), which creates an OpenAI chatbot with four components.
+
+* Each component in a flow is a **node** that performs a specific task, like an AI model or a data source.
+* Each component has a **Configuration** menu. Click the **Code** pane to see a component's underlying Python code.
+* Components are connected with **edges** to form flows.
+
+If you're familiar with [ReactFlow](https://reactflow.dev/learn), a **flow** is a node-based application, a **component** is a node, and the connections between components are **edges**.
+
+When a flow is run, Langflow builds a Directed Acyclic Graph (DAG) graph object from the nodes (components) and edges (connections between components), with the nodes sorted to determine the order of execution. The graph build calls the individual components' `def_build` functions to validate and prepare the nodes. This graph is then processed in dependency order. Each node is built and executed sequentially, with results from each built node being passed to nodes that are dependent on the previous node's results.
+
+Flows are stored on local disk at these default locations:
+
+* **Linux or WSL on Windows**: `home/<username>/.cache/langflow/`
+* **MacOS**: `/Users/<username>/Library/Caches/langflow/`
+
+The flow storage location can be customized with the [LANGFLOW_CONFIG_DIR](/environment-variables#LANGFLOW_CONFIG_DIR) environment variable.
+
+## Find your way around
+
+If you're new to Langflow, it's OK to feel a bit lost at first. We’ll take you on a tour, so you can orient yourself and start creating applications quickly.
+
+Langflow has four distinct regions: the [workspace](#workspace) is the main area where you build your flows. The components sidebar is on the left, and lists the available [components](#components). The [playground](#playground) and [API pane](#api-pane) are available in the upper right corner.
+
+![](/img/workspace.png)
+
+## Workspace
+
+The **workspace** is where you create AI applications by connecting and running components in flows.
+
+The workspace controls allow you to adjust your view and lock your flows in place.
+
+* Add **Notes** to flows with the **Add Note** button, similar to commenting in code.
+* To access the [Settings](#settings) menu, click ⚙️ **Settings**.
+
+This menu contains configuration for **Global Variables**, **Langflow API**, **Shortcuts**, and **Messages**.
+
+## Components
+
+A **component** is a single building block within a flow and consists of inputs, outputs, and parameters that define its functionality.
+
+To add a component to your flow, drag it from the sidebar onto the workspace.
+
+To connect components, drag a line from the output handle (⚪) of one component to the input handle of another.
+
+For more information, see [Components overview](/concepts-components).
+
+<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+## Playground
+
+The **Playground** executes the current flow in the workspace.
+
+Chat with your flow, view inputs and outputs, and modify your AI's memories to tune your responses in real time.
+
+Either the **Chat Input** or **Chat Output** component can be opened in the **Playground** and tested in real time.
+
+For more information, see the [Playground](/concepts-playground).
+
+![](/img/playground.png)
+
+## API pane {#api-pane}
+
+The **API** pane provides code templates to integrate your flows into external applications.
+
+For more information, see the [API pane](/concepts-api).
+
+![](/img/api-pane.png)
+
+## View logs
+
+The **Logs** pane provides a detailed record of all component executions within a workspace.
+
+To access the **Logs** pane, click your **Flow Name**, and then select **Logs**.
+
+![](/img/logs.png)
+
+## Projects and folders
+
+The **My Projects** page displays all the flows and components you've created in the Langflow workspace.
+
+![](/img/my-projects.png)
+
+**My Projects** is the default folder where all new projects and components are initially stored.
+
+Projects, folders, and flows are exchanged as JSON objects.
+
+* To create a new folder, click 📁 **New Folder**.
+
+* To rename a folder, double-click the folder name.
+
+* To download a folder, click 📥 **Download**.
+
+* To upload a folder, click 📤 **Upload**. The default maximum file upload size is 100 MB.
+
+* To move a flow or component, drag and drop it into the desired folder.
+
+## Options menu
+
+The dropdown menu labeled with the project name offers several management and customization options for the current flow in the Langflow workspace.
+
+* **New**: Create a new flow from scratch.
+* **Settings**: Adjust settings specific to the current flow, such as its name, description, and endpoint name.
+* **Logs**: View logs for the current project, including execution history, errors, and other runtime events.
+* **Import**: Import a flow or component from a JSON file into the workspace.
+* **Export**: Export the current flow as a JSON file.
+* **Undo (⌘Z)**: Revert the last action taken in the project.
+* **Redo (⌘Y)**: Reapply a previously undone action.
+* **Refresh All**: Refresh all components and delete cache.
+
+## Settings
+
+Click ⚙️ **Settings** to access **Global variables**, **Langflow API**, **Shortcuts**, and **Messages**.
+
+
+
diff --git a/docs/docs/Concepts/concepts-playground.md b/docs/docs/Concepts/concepts-playground.md
new file mode 100644
index 000000000000..4146a53e7ebc
--- /dev/null
+++ b/docs/docs/Concepts/concepts-playground.md
@@ -0,0 +1,76 @@
+---
+title: Playground
+slug: /concepts-playground
+---
+
+import Icon from "@site/src/components/icon";
+
+The **Playground** is a dynamic interface designed for real-time interaction with LLMs, allowing users to chat, access memories, and monitor inputs and outputs. Here, users can directly prototype and their models, making adjustments and observing different outcomes.
+
+As long as you have an [Input or Output](/components-io) component working, you can open it by clicking the **Playground** button.
+The Playground's window arrangement changes depending on what components are being used.
+
+![](/img/playground.png)
+
+## Run a flow in the playgound
+
+When you run a flow in the **Playground**, Langflow calls the `/build/{flow_id}/flow` endpoint in [chat.py](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/api/v1/chat.py#L162). This call retrieves the flow data, builds a graph, and executes the graph. As each component (or node) is executed, the `build_vertex` function calls `build_and_run`, which may call the individual components' `def_build` method, if it exists. If a component doesn't have a `def_build` function, the build will still return a component.
+
+The `build` function allows components to execute logic at runtime. For example, the [Recursive character text splitter](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/components/langchain_utilities/recursive_character.py) is a child of the `LCTextSplitterComponent` class. When text needs to be processed, the parent class's `build` method is called, which creates a `RecursiveCharacterTextSplitter` object and uses it to split the text according to the defined parameters. The split text is then passed on to the next component. This all occurs when the component is built.
+
+## View playground messages by session ID
+
+When you send a message from the **Playground** interface, the interactions are stored in the **Message Logs** by `session_id`.
+A single flow can have multiple chats, and different flows can share the same chat. Each chat will have a different `session_id`.
+
+To view messages by `session_id` within the Playground, click the <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> menu of any chat session, and then select **Message Logs**.
+
+Individual messages in chat memory can be edited or deleted. Modifying these memories will influence the behavior of the chatbot responses.
+
+To learn more about chat memories in Langflow, see [Memory components](/components-memories).
+
+## Use custom Session IDs for multiple user interactions
+
+`session_id` values are used to track user interactions in a flow.
+By default, if the `session_id` value is empty, it is set to the same value as the `flow_id`. In this case, every chat call will use the same `session_id`, and you’ll effectively have one chat session.
+
+The `session_id` value can be configured in the **Advanced Settings** of the **Chat Input** and **Chat Output** components.
+
+To have more than one session in a single flow, pass a specific Session ID to a flow with the `session_id` parameter in the URL. All the components in the flow will automatically use this `session_id` value.
+
+To post a message to a flow with a specific Session ID with curl, enter the following command:
+
+```bash
+   curl -X POST "http://127.0.0.1:7860/api/v1/run/$FLOW_ID" \
+   -H 'Content-Type: application/json' \
+   -d '{
+       "session_id": "custom_session_123",
+       "input_value": "message",
+       "input_type": "chat",
+       "output_type": "chat"
+   }'
+```
+
+Check your flow's **Playground**. In addition to the messages stored for the Default Session, a new session is started with your custom Session ID.
+
+**Chat Input** and **Chat Output** components can be modified to store a `session_id` parameter as a **Tweak** for specific sessions. This allows you to use the same flow for multiple sessions with different `session_id` values. 
+
+To post a message to a flow with a specific Session ID using the `session_id` parameter as a **Tweak**, enter the following command:
+
+```bash
+curl -X POST "http://127.0.0.1:7860/api/v1/run/$FLOW_ID" \
+-H 'Content-Type: application/json' \
+-d '{
+    "tweaks": {
+        "session_id": "custom_session_123"
+    },
+    "input_value": "message",
+    "input_type": "chat",
+    "output_type": "chat"
+}'
+```
+
+You can only have one **Chat Input** component per flow, but by using multiple `session_id` values, you maintain separate conversation histories for different users or purposes.
+
+The Playground will still display all available sessions, but the value stored in the `session_id` tweak will override the flow's `session_id` value.
+
diff --git a/docs/docs/Get-Started/get-started-quickstart.md b/docs/docs/Get-Started/get-started-quickstart.md
index 6b86f6df9f06..2895e7e237bf 100644
--- a/docs/docs/Get-Started/get-started-quickstart.md
+++ b/docs/docs/Get-Started/get-started-quickstart.md
@@ -51,7 +51,7 @@ With no connections between them, the components won't interact with each other.
 You want data to flow from **Chat Input** to **Chat Output** via the connectors between the components.
 Each component accepts inputs on its left side, and sends outputs on its right side.
 Hover over the connection ports to see the data types that the component accepts.
-For more on component inputs and outputs, see [Components overview](/components-overview).
+For more on component inputs and outputs, see [Components overview](/concepts-components).
 
 5. To connect the **Chat Input** component to the OpenAI model component, click and drag a line from the blue **Message** port to the OpenAI model component's **Input** port.
 6. To connect the **Prompt** component to the OpenAI model component, click and drag a line from the blue **Prompt Message** port to the OpenAI model component's **System Message** port.
@@ -169,6 +169,6 @@ This example used movie data, but the RAG pattern can be used with any data you
 
 Make the **Astra DB** database the brain that [Agents](/agents-overview) use to make decisions.
 
-Expose this flow as an [API](/workspace-api) and call it from your external applications.
+Expose this flow as an [API](/concepts-api) and call it from your external applications.
 
 For more on the **Astra DB** component, see [Astra DB vector store](/components-vector-stores#astra-db-vector-store).
diff --git a/docs/docs/Workspace/workspace-logs.md b/docs/docs/Workspace/workspace-logs.md
deleted file mode 100644
index b881ef17baea..000000000000
--- a/docs/docs/Workspace/workspace-logs.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Logs
-slug: /workspace-logs
----
-
-
-The **Logs** pane provides a detailed record of all component executions within a workspace. It is designed to help you track actions, debug issues, and understand the flow of data through various components.
-
-1. To access the **Logs** pane, click your **Flow Name**, and then select **Logs**.
-
-![](/img/logs.png)
-
-2. All cells in the **Logs** view can be opened and inspected.
-
-
diff --git a/docs/docs/Workspace/workspace-overview.md b/docs/docs/Workspace/workspace-overview.md
deleted file mode 100644
index 56f9a99e956d..000000000000
--- a/docs/docs/Workspace/workspace-overview.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Workspace concepts
-slug: /workspace-overview
----
-
-The **workspace** is where you create AI applications by connecting and running components in flows.
-
-The workspace controls allow you to adjust your view and lock your flows in place.
-
-## Components
-
-A **component** is a single building block within a flow and consists of inputs, outputs, and parameters that define its functionality.
-
-To add a component to your flow, drag it from the sidebar onto the workspace.
-
-To connect components, drag a line from the output handle (⚪) of one component to the input handle of another.
-
-For more information, see [How to build flows with components](/components-overview).
-
-<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
-
-## Playground
-
-The **Playground** executes the current flow in the workspace.
-
-Chat with your flow, view inputs and outputs, and modify your AI's memories to tune your responses in real time.
-
-Either the **Chat Input** or **Chat Output** component can be opened in the **Playground** and tested in real time.
-
-For more information, see the [Playground documentation](/workspace-playground).
-
-![](/img/playground.png)
-
-## API
-
-The **API** pane provides code templates to integrate your flows into external applications.
-
-For more information, see the [API documentation](/workspace-api).
-
-![](/img/api-pane.png)
-
-## Projects and folders
-
-The **My Projects** page displays all the flows and components you've created in the Langflow workspace.
-
-![](/img/my-projects.png)
-
-**My Projects** is the default folder where all new projects and components are initially stored.
-
-Projects, folders, and flows are exchanged as JSON objects.
-
-* To create a new folder, click 📁 **New Folder**.
-
-* To rename a folder, double-click the folder name.
-
-* To download a folder, click 📥 **Download**.
-
-* To upload a folder, click 📤 **Upload**. The default maximum file upload size is 100 MB.
-
-* To move a flow or component, drag and drop it into the desired folder.
-
-## Options menu
-
-The dropdown menu labeled with the project name offers several management and customization options for the current flow in the Langflow workspace.
-
-* **New**: Create a new flow from scratch.
-* **Settings**: Adjust settings specific to the current flow, such as its name, description, and endpoint name.
-* **Logs**: View logs for the current project, including execution history, errors, and other runtime events.
-* **Import**: Import a flow or component from a JSON file into the workspace.
-* **Export**: Export the current flow as a JSON file.
-* **Undo (⌘Z)**: Revert the last action taken in the project.
-* **Redo (⌘Y)**: Reapply a previously undone action.
-* **Refresh All**: Refresh all components and delete cache.
-
-## Settings
-
-Click ⚙️ **Settings** to access **Global variables**, **Langflow API**, **Shortcuts**, and **Messages**.
-
-
-
diff --git a/docs/docs/Workspace/workspace-playground.md b/docs/docs/Workspace/workspace-playground.md
deleted file mode 100644
index 7fb57652a912..000000000000
--- a/docs/docs/Workspace/workspace-playground.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: Playground
-slug: /workspace-playground
----
-
-import ReactPlayer from "react-player";
-
-The **Playground** is a dynamic interface designed for real-time interaction with AIs, allowing users to chat, access memories and monitor inputs and outputs. Here, users can directly prototype and their models, making adjustments and observing different outcomes.
-
-As long as you have an [Input or Output](/components-io) component working, you can open it up by clicking the **Playground** button.
-
-![](/img/playground.png)
-
-:::tip
-
-Notice how the **Playground's** window arrangement changes depending on what components are being used. Langflow can be used for applications that go beyond chat-based interfaces.
-
-:::
-
-## Memory Management
-
----
-
-When you send a message from the **Playground** interface, the interactions for that session are stored in the **Message Logs**.
-
-Langflow allows every chat message to be stored, and a single flow can have multiple chat sessions.
-
-Chat conversations store messages categorized by a Session ID. A single flow can host multiple Session IDs, and different flows can share the same Session ID.
-
-To view messages by session ID, from the Playground, click the Options menu of any session, and then select Message Logs.
-
-Individual messages in chat memory can be edited or deleted. Modifying these memories will influence the behavior of the chatbot responses.
-
-To learn more about chat memories in Langflow, see [Memory components](/components-memories).
-
-## Use custom Session IDs for multiple user interactions
-
-Session ID values are used to track user interactions in a flow. They can be configured in the Advanced Settings of the Chat Input and Chat Output components.
-
-By default, if the Session ID value is empty, it is set to the same value as the Flow ID. This means every API call will use the same Session ID, and you’ll effectively have one session.
-
-To have more than one session in a single flow, pass a specific Session ID to a flow with the `session_id` parameter in the URL. All the components in the flow will automatically use this `session_id` value.
-
-Post a message to a flow with a specific Session ID with curl:
-
-```bash
-curl -X POST \
-    "http://127.0.0.1:7860/api/v1/run/4017e9f2-1fec-4643-bb05-165a8b50c4b3?stream=false" \
-    -H 'Content-Type: application/json' \
-    -d '{"input_value": "message",
-    "output_type": "chat",
-    "input_type": "chat",
-    "session_id": "YOUR_SESSION_ID"
-}'
-```
-
-Check your flow's **Playground**. In addition to the messages stored for the Default Session, a new session is started with your new Session ID.
-
-**Chat Input** and **Chat Output** components can also store a `session_id` parameter as a **Tweak** for specific sessions. The Playground will still display all available sessions, but the flow will use the value stored in the `session_id` tweak.
-
-```bash
-curl -X POST \
-    "http://127.0.0.1:7860/api/v1/run/4017e9f2-1fec-4643-bb05-165a8b50c4b3?stream=false" \
-    -H 'Content-Type: application/json' \
-    -d '{"input_value": "message",
-    "output_type": "chat",
-    "input_type": "chat",
-    "tweaks": {
-        "session_id": "YOUR_SESSION_ID"
-    }
-}'
-```
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 7f2da1c72c18..09113abfd825 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -116,8 +116,9 @@ const config = {
             ],
           },
           {
-            to: "/workspace-overview",
+            to: "concepts-overview",
             from: [
+              "/workspace-overview",
               "/365085a8-a90a-43f9-a779-f8769ec7eca1",
               "/My-Collection",
               "/workspace",
@@ -125,16 +126,23 @@ const config = {
             ],
           },
           {
-            to: "/components-overview",
-            from: "/components",
-          },
+            to: "/concepts-components",
+            from: [
+              "/components",
+              "/components-overview"
+            ],
+            },
           {
             to: "/configuration-global-variables",
             from: "/settings-global-variables",
           },
           {
-            to: "/workspace-playground",
-            from: "/guides-chat-memory",
+            to: "/concepts-playground",
+            from: [
+              "/workspace-playground",
+              "/workspace-logs",
+              "/guides-chat-memory",
+            ],
           },
           {
             to: "/configuration-objects",
@@ -160,6 +168,10 @@ const config = {
             to: "/components-vector-stores",
             from: "/components-rag",
           },
+          {
+            to: "/concepts-api",
+            from: "/workspace-api",
+          },
           // add more redirects like this
           // {
           //   to: '/docs/anotherpage',
diff --git a/docs/sidebars.js b/docs/sidebars.js
index afabc8daa558..7f9158494181 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -31,20 +31,20 @@ module.exports = {
     },
     {
       type: "category",
-      label: "Workspace",
+      label: "Concepts",
       items: [
-        "Workspace/workspace-overview",
-        "Workspace/workspace-api",
-        "Workspace/workspace-logs",
-        "Workspace/workspace-playground",
+        "Concepts/concepts-overview",
+        "Concepts/concepts-playground",
+        "Concepts/concepts-components",
+        "Concepts/concepts-api",
       ],
     },
     {
       type: "category",
       label: "Components",
       items: [
-        "Components/components-overview",
         "Components/components-agents",
+        "Components/components-custom-components",
         "Components/components-data",
         "Components/components-embedding-models",
         "Components/components-helpers",
@@ -57,7 +57,6 @@ module.exports = {
         "Components/components-prompts",
         "Components/components-tools",
         "Components/components-vector-stores",
-        "Components/components-custom-components",
       ],
     },
     {
diff --git a/docs/static/img/workspace-basic-prompting.png b/docs/static/img/workspace-basic-prompting.png
new file mode 100644
index 000000000000..bcdf45766e3e
Binary files /dev/null and b/docs/static/img/workspace-basic-prompting.png differ
diff --git a/docs/static/img/workspace.png b/docs/static/img/workspace.png
new file mode 100644
index 000000000000..98b6ba7a5e90
Binary files /dev/null and b/docs/static/img/workspace.png differ


Code review comments:
diff_hunk: @@ -25,13 +25,68 @@ To make a component into a tool that an agent can use, enable **Tool mode** in t
 If the component you want to connect to an agent doesn't have a **Tool mode** option, you can modify the component's inputs to become a tool.
 For an example, see [Make any component a tool](/agents-tool-calling-agent-component#make-any-component-a-tool).
 
+## Astra DB Tool
+
+The `Astra DB Tool` allows agents to connect to and query data from Astra DB Collections.
+
+### Inputs
+
+| Name              | Type   | Description                                                                                                                      |
+|-------------------|--------|----------------------------------------------------------------------------------------------------------------------------------|
+| Tool Name         | String | The name used to reference the tool in the agent's prompt.                                                                       |
+| Tool Description  | String | A brief description of the tool. This helps the model decide when to use it.                                                     |
+| Collection Name   | String | The name of the Astra DB collection to query.                                                                                    |
+| Token             | SecretString | The authentication token for accessing Astra DB.                                                                                 |
+| API Endpoint      | String | The Astra DB API endpoint.                                                                                                       |
+| Projection Fields | String | The attributes to return, separated by commas. Default: "*".                                                                     |
+| Tool Parameters   | Dict   | Parameters the model needs to fill to execute the tool. For required parameters, use an exclamation mark (e.g., "!customer_id"). |
+| Static Filters    | Dict   | Attribute-value pairs used to filter query results.                                                                              |
+| Limit             | String | The number of documents to return.                                                                                               |
+
+### Outputs
+
+The Data output is primarily used when directly querying Astra DB, while the Tool output is used when integrating with LangChain agents or chains.
+
+| Name | Type | Description |
+|------|------|-------------|
+| Data | List[Data] | A list of Data objects containing the query results from Astra DB. Each Data object contains the document fields specified by the projection attributes. Limited by the `number_of_results` parameter. |
+| Tool | StructuredTool | A LangChain StructuredTool object that can be used in agent workflows. Contains the tool name, description, argument schema based on tool parameters, and the query function. |
+
+
+## Astra DB CQL Tool
+
+The `Astra DB CQL Tool` allows agents to query data from CQL Tables in Astra DB.
path: docs/docs/Components/components-tools.md
text: @user1:
```suggestion
The `Astra DB CQL Tool` allows agents to query data from CQL tables in Astra DB.
```

diff_hunk: @@ -0,0 +1,209 @@
+---
+title: Components
+slug: /concepts-components
+---
+
+import Icon from "@site/src/components/icon";
+
+# Langflow components overview
+
+A component is a single building block within a flow with inputs, outputs, functions, and parameters that define its functionality. A single component is like a class within a larger application.
+
+To add a component to a flow, drag it from the **Component** menu to the **Workspace**.
+
+Learn more about components and how they work on this page.
+
+## Component menu
+
+Each component is unique, but all have a menu bar at the top that looks something like this.
+
+<img src="/img/openai-model-component.png" alt="Open AI component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+Use these controls to do the following:
+
+- **Code** — Modify the component's Python code and save your changes.
+- **Controls** — Adjust all component parameters.
+- **Freeze Path** — After a component runs, lock its previous output state to prevent it from re-running.
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To view a component’s output and logs, click the <Icon name="View" aria-label="View icon" />**Visibility** icon.
+
+To run a single component, click ▶️ **Play**.
+
+A ✅**Check** indicates that the component ran successfully.
+
+Running a single component with the **Play** button is different from running the entire flow. In a single component run, the `build_vertex` function is called, which builds and runs only the single component with direct inputs provided through the UI (the `inputs_dict` parameter). The  `VertexBuildResult` data is passed to the `build_and_run` method, which calls the component's `build` method and runs it. Unlike running the full flow, running a single component does not automatically execute its upstream dependencies.
+
+## Component ports
+
+Handles (<Icon name="Circle" size="16" aria-label="A circle on the side of a component" />) on the side of a component indicate the types of inputs and outputs that can be connected at that port. Hover over a handle to see connection details.
+
+<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+### Component port data type colors
+
+The following table lists the handle colors and their corresponding data types:
+
+| Data Type | Handle Color | Hex Code |
+|-----------|--------------|----------|
+| BaseLanguageModel | Fuchsia | #c026d3 |
+| Data | Red | #dc2626 |
+| Document | Lime | #65a30d |
+| Embeddings | Emerald | #10b981 |
+| LanguageModel | Fuchsia | #c026d3 |
+| Message | Indigo | #4f46e5 |
+| Prompt | Violet | #7c3aed |
+| str | Indigo | #4F46E5 |
+| Text | Indigo | #4F46E5 |
+| unknown | Gray | #9CA3AF |
+
+## Component code
+
+A component inherits from a base `Component` class that defines its interface and behavior.
+
+For example, the [Recursive character text splitter](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/components/langchain_utilities/recursive_character.py) is a child of the [LCTextSplitterComponent](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/base/textsplitters/model.py) class.
+
+```python
+from typing import Any
+
+from langchain_text_splitters import RecursiveCharacterTextSplitter, TextSplitter
+
+from langflow.base.textsplitters.model import LCTextSplitterComponent
+from langflow.inputs.inputs import DataInput, IntInput, MessageTextInput
+from langflow.utils.util import unescape_string
+
+class RecursiveCharacterTextSplitterComponent(LCTextSplitterComponent):
+    display_name: str = "Recursive Character Text Splitter"
+    description: str = "Split text trying to keep all related text together."
+    documentation: str = "https://docs.langflow.org/components-processing"
+    name = "RecursiveCharacterTextSplitter"
+    icon = "LangChain"
+
+    inputs = [
+        IntInput(
+            name="chunk_size",
+            display_name="Chunk Size",
+            info="The maximum length of each chunk.",
+            value=1000,
+        ),
+        IntInput(
+            name="chunk_overlap",
+            display_name="Chunk Overlap",
+            info="The amount of overlap between chunks.",
+            value=200,
+        ),
+        DataInput(
+            name="data_input",
+            display_name="Input",
+            info="The texts to split.",
+            input_types=["Document", "Data"],
+        ),
+        MessageTextInput(
+            name="separators",
+            display_name="Separators",
+            info='The characters to split on.\nIf left empty defaults to ["\\n\\n", "\\n", " ", ""].',
+            is_list=True,
+        ),
+    ]
+
+    def get_data_input(self) -> Any:
+        return self.data_input
+
+    def build_text_splitter(self) -> TextSplitter:
+        if not self.separators:
+            separators: list[str] | None = None
+        else:
+            # check if the separators list has escaped characters
+            # if there are escaped characters, unescape them
+            separators = [unescape_string(x) for x in self.separators]
+
+        return RecursiveCharacterTextSplitter(
+            separators=separators,
+            chunk_size=self.chunk_size,
+            chunk_overlap=self.chunk_overlap,
+        )
+
+```
+
+Components include definitions for inputs and outputs, which will be represented in the UI with color-coded ports.
+
+**Input Definition:** Each input (like `IntInput` or `DataInput`) specifies an input's type, name, and display properties, which appear as configurable fields in the component's UI panel.
+
+**Methods:** Components have methods or functions that handle their functionality. This component has two methods.
+`get_data_input` retrieves the text data to be split from the component's input. This makes the data available to the class.
+`build_text_splitter` creates a `RecursiveCharacterTextSplitter` object by calling its parent class's `build` method. The text is split with the created splitter and passed to the next component.
+When used in a flow, this component:
+
+1. Displays its configuration options in the UI.
+2. Validates user inputs based on the input types.
+3. Processes data using the configured parameters.
+4. Passes results to the next component.
+
+## Freeze Path
+
+After a component runs, **Freeze Path** locks the component's previous output state to prevent it from re-running.
+
+If you’re expecting consistent output from a component and don’t need to re-run it, click **Freeze Path**. 
+
+Enabling **Freeze Path** freezes all components upstream of the selected component.
+
+If you only want to freeze a single component, select **Freeze** instead.
+
+A <Icon name="Snowflake" aria-label="Snowflake"/> icon appears on all frozen components.
+
+## Additional component options
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To modify a component's name or description, double-click in the **Name** or **Description** fields. Component descriptions accept markdown syntax.
+
+### Component shortcuts
+
+The following keyboard shortcuts are available when a component is selected.
+
+| Menu Item | Mac Shortcut | Description |
+|-----------|----------|-------------|
+| Code | ⌘ + C | Opens the code editor for the component. |
+| Advanced | ⌘ + A | Opens advanced settings for the component. |
+| Save | ⌘ + S | Saves the current state of the component to Saved components in the sidebar. |
+| Duplicate | ⌘ + D | Creates a duplicate of the component. |
+| Copy | ⌘ + C | Copies the selected component. Paste it in the workspace with ⌘ + V. |
+| Docs | ⌘ + D | Opens related documentation. |
+| Minimize | ⌘ + Q | Minimizes the current component. |
+| Freeze | ⌘ + F | Freezes the current component state. |
+| Freeze Path | ⌘ + Shift + F | Freezes the current component state and all upstream components. |
+| Download | ⌘ + D | Downloads the current component as a JSON file. |
+| Delete | ⌘ + ⌫ | Deletes the component. |
+
+## Group components in the workspace
+
+Multiple components can be grouped into a single component for reuse. This is useful when combining large flows into single components (like RAG with a vector database, for example) and saving space.
+
+1. Hold **Shift** and drag to select components.
+2. Select **Group**.
+3. The components merge into a single component.
path: docs/docs/Concepts/concepts-components.md
text: @user1:
The user does not perform this step so it should not be a numbered step. Make this a sentence below step 2.

diff_hunk: @@ -0,0 +1,209 @@
+---
+title: Components
+slug: /concepts-components
+---
+
+import Icon from "@site/src/components/icon";
+
+# Langflow components overview
+
+A component is a single building block within a flow with inputs, outputs, functions, and parameters that define its functionality. A single component is like a class within a larger application.
+
+To add a component to a flow, drag it from the **Component** menu to the **Workspace**.
+
+Learn more about components and how they work on this page.
+
+## Component menu
+
+Each component is unique, but all have a menu bar at the top that looks something like this.
+
+<img src="/img/openai-model-component.png" alt="Open AI component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+Use these controls to do the following:
+
+- **Code** — Modify the component's Python code and save your changes.
+- **Controls** — Adjust all component parameters.
+- **Freeze Path** — After a component runs, lock its previous output state to prevent it from re-running.
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To view a component’s output and logs, click the <Icon name="View" aria-label="View icon" />**Visibility** icon.
+
+To run a single component, click ▶️ **Play**.
+
+A ✅**Check** indicates that the component ran successfully.
+
+Running a single component with the **Play** button is different from running the entire flow. In a single component run, the `build_vertex` function is called, which builds and runs only the single component with direct inputs provided through the UI (the `inputs_dict` parameter). The  `VertexBuildResult` data is passed to the `build_and_run` method, which calls the component's `build` method and runs it. Unlike running the full flow, running a single component does not automatically execute its upstream dependencies.
+
+## Component ports
+
+Handles (<Icon name="Circle" size="16" aria-label="A circle on the side of a component" />) on the side of a component indicate the types of inputs and outputs that can be connected at that port. Hover over a handle to see connection details.
+
+<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+### Component port data type colors
+
+The following table lists the handle colors and their corresponding data types:
+
+| Data Type | Handle Color | Hex Code |
+|-----------|--------------|----------|
+| BaseLanguageModel | Fuchsia | #c026d3 |
+| Data | Red | #dc2626 |
+| Document | Lime | #65a30d |
+| Embeddings | Emerald | #10b981 |
+| LanguageModel | Fuchsia | #c026d3 |
+| Message | Indigo | #4f46e5 |
+| Prompt | Violet | #7c3aed |
+| str | Indigo | #4F46E5 |
+| Text | Indigo | #4F46E5 |
+| unknown | Gray | #9CA3AF |
+
+## Component code
+
+A component inherits from a base `Component` class that defines its interface and behavior.
+
+For example, the [Recursive character text splitter](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/components/langchain_utilities/recursive_character.py) is a child of the [LCTextSplitterComponent](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/base/textsplitters/model.py) class.
+
+```python
+from typing import Any
+
+from langchain_text_splitters import RecursiveCharacterTextSplitter, TextSplitter
+
+from langflow.base.textsplitters.model import LCTextSplitterComponent
+from langflow.inputs.inputs import DataInput, IntInput, MessageTextInput
+from langflow.utils.util import unescape_string
+
+class RecursiveCharacterTextSplitterComponent(LCTextSplitterComponent):
+    display_name: str = "Recursive Character Text Splitter"
+    description: str = "Split text trying to keep all related text together."
+    documentation: str = "https://docs.langflow.org/components-processing"
+    name = "RecursiveCharacterTextSplitter"
+    icon = "LangChain"
+
+    inputs = [
+        IntInput(
+            name="chunk_size",
+            display_name="Chunk Size",
+            info="The maximum length of each chunk.",
+            value=1000,
+        ),
+        IntInput(
+            name="chunk_overlap",
+            display_name="Chunk Overlap",
+            info="The amount of overlap between chunks.",
+            value=200,
+        ),
+        DataInput(
+            name="data_input",
+            display_name="Input",
+            info="The texts to split.",
+            input_types=["Document", "Data"],
+        ),
+        MessageTextInput(
+            name="separators",
+            display_name="Separators",
+            info='The characters to split on.\nIf left empty defaults to ["\\n\\n", "\\n", " ", ""].',
+            is_list=True,
+        ),
+    ]
+
+    def get_data_input(self) -> Any:
+        return self.data_input
+
+    def build_text_splitter(self) -> TextSplitter:
+        if not self.separators:
+            separators: list[str] | None = None
+        else:
+            # check if the separators list has escaped characters
+            # if there are escaped characters, unescape them
+            separators = [unescape_string(x) for x in self.separators]
+
+        return RecursiveCharacterTextSplitter(
+            separators=separators,
+            chunk_size=self.chunk_size,
+            chunk_overlap=self.chunk_overlap,
+        )
+
+```
+
+Components include definitions for inputs and outputs, which will be represented in the UI with color-coded ports.
+
+**Input Definition:** Each input (like `IntInput` or `DataInput`) specifies an input's type, name, and display properties, which appear as configurable fields in the component's UI panel.
+
+**Methods:** Components have methods or functions that handle their functionality. This component has two methods.
+`get_data_input` retrieves the text data to be split from the component's input. This makes the data available to the class.
+`build_text_splitter` creates a `RecursiveCharacterTextSplitter` object by calling its parent class's `build` method. The text is split with the created splitter and passed to the next component.
+When used in a flow, this component:
+
+1. Displays its configuration options in the UI.
+2. Validates user inputs based on the input types.
+3. Processes data using the configured parameters.
+4. Passes results to the next component.
+
+## Freeze Path
+
+After a component runs, **Freeze Path** locks the component's previous output state to prevent it from re-running.
+
+If you’re expecting consistent output from a component and don’t need to re-run it, click **Freeze Path**. 
+
+Enabling **Freeze Path** freezes all components upstream of the selected component.
+
+If you only want to freeze a single component, select **Freeze** instead.
+
+A <Icon name="Snowflake" aria-label="Snowflake"/> icon appears on all frozen components.
+
+## Additional component options
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To modify a component's name or description, double-click in the **Name** or **Description** fields. Component descriptions accept markdown syntax.
+
+### Component shortcuts
+
+The following keyboard shortcuts are available when a component is selected.
+
+| Menu Item | Mac Shortcut | Description |
path: docs/docs/Concepts/concepts-components.md
text: @user1:
Why are we only showing Mac shortcuts?

@author:
Added windows

diff_hunk: @@ -0,0 +1,209 @@
+---
+title: Components
+slug: /concepts-components
+---
+
+import Icon from "@site/src/components/icon";
+
+# Langflow components overview
+
+A component is a single building block within a flow with inputs, outputs, functions, and parameters that define its functionality. A single component is like a class within a larger application.
+
+To add a component to a flow, drag it from the **Component** menu to the **Workspace**.
+
+Learn more about components and how they work on this page.
+
+## Component menu
+
+Each component is unique, but all have a menu bar at the top that looks something like this.
+
+<img src="/img/openai-model-component.png" alt="Open AI component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+Use these controls to do the following:
+
+- **Code** — Modify the component's Python code and save your changes.
+- **Controls** — Adjust all component parameters.
+- **Freeze Path** — After a component runs, lock its previous output state to prevent it from re-running.
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To view a component’s output and logs, click the <Icon name="View" aria-label="View icon" />**Visibility** icon.
+
+To run a single component, click ▶️ **Play**.
+
+A ✅**Check** indicates that the component ran successfully.
+
+Running a single component with the **Play** button is different from running the entire flow. In a single component run, the `build_vertex` function is called, which builds and runs only the single component with direct inputs provided through the UI (the `inputs_dict` parameter). The  `VertexBuildResult` data is passed to the `build_and_run` method, which calls the component's `build` method and runs it. Unlike running the full flow, running a single component does not automatically execute its upstream dependencies.
+
+## Component ports
+
+Handles (<Icon name="Circle" size="16" aria-label="A circle on the side of a component" />) on the side of a component indicate the types of inputs and outputs that can be connected at that port. Hover over a handle to see connection details.
+
+<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+### Component port data type colors
+
+The following table lists the handle colors and their corresponding data types:
+
+| Data Type | Handle Color | Hex Code |
+|-----------|--------------|----------|
+| BaseLanguageModel | Fuchsia | #c026d3 |
+| Data | Red | #dc2626 |
+| Document | Lime | #65a30d |
+| Embeddings | Emerald | #10b981 |
+| LanguageModel | Fuchsia | #c026d3 |
+| Message | Indigo | #4f46e5 |
+| Prompt | Violet | #7c3aed |
+| str | Indigo | #4F46E5 |
+| Text | Indigo | #4F46E5 |
+| unknown | Gray | #9CA3AF |
+
+## Component code
+
+A component inherits from a base `Component` class that defines its interface and behavior.
+
+For example, the [Recursive character text splitter](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/components/langchain_utilities/recursive_character.py) is a child of the [LCTextSplitterComponent](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/base/textsplitters/model.py) class.
+
+```python
+from typing import Any
+
+from langchain_text_splitters import RecursiveCharacterTextSplitter, TextSplitter
+
+from langflow.base.textsplitters.model import LCTextSplitterComponent
+from langflow.inputs.inputs import DataInput, IntInput, MessageTextInput
+from langflow.utils.util import unescape_string
+
+class RecursiveCharacterTextSplitterComponent(LCTextSplitterComponent):
+    display_name: str = "Recursive Character Text Splitter"
+    description: str = "Split text trying to keep all related text together."
+    documentation: str = "https://docs.langflow.org/components-processing"
+    name = "RecursiveCharacterTextSplitter"
+    icon = "LangChain"
+
+    inputs = [
+        IntInput(
+            name="chunk_size",
+            display_name="Chunk Size",
+            info="The maximum length of each chunk.",
+            value=1000,
+        ),
+        IntInput(
+            name="chunk_overlap",
+            display_name="Chunk Overlap",
+            info="The amount of overlap between chunks.",
+            value=200,
+        ),
+        DataInput(
+            name="data_input",
+            display_name="Input",
+            info="The texts to split.",
+            input_types=["Document", "Data"],
+        ),
+        MessageTextInput(
+            name="separators",
+            display_name="Separators",
+            info='The characters to split on.\nIf left empty defaults to ["\\n\\n", "\\n", " ", ""].',
+            is_list=True,
+        ),
+    ]
+
+    def get_data_input(self) -> Any:
+        return self.data_input
+
+    def build_text_splitter(self) -> TextSplitter:
+        if not self.separators:
+            separators: list[str] | None = None
+        else:
+            # check if the separators list has escaped characters
+            # if there are escaped characters, unescape them
+            separators = [unescape_string(x) for x in self.separators]
+
+        return RecursiveCharacterTextSplitter(
+            separators=separators,
+            chunk_size=self.chunk_size,
+            chunk_overlap=self.chunk_overlap,
+        )
+
+```
+
+Components include definitions for inputs and outputs, which will be represented in the UI with color-coded ports.
+
+**Input Definition:** Each input (like `IntInput` or `DataInput`) specifies an input's type, name, and display properties, which appear as configurable fields in the component's UI panel.
+
+**Methods:** Components have methods or functions that handle their functionality. This component has two methods.
+`get_data_input` retrieves the text data to be split from the component's input. This makes the data available to the class.
+`build_text_splitter` creates a `RecursiveCharacterTextSplitter` object by calling its parent class's `build` method. The text is split with the created splitter and passed to the next component.
+When used in a flow, this component:
+
+1. Displays its configuration options in the UI.
+2. Validates user inputs based on the input types.
+3. Processes data using the configured parameters.
+4. Passes results to the next component.
+
+## Freeze Path
+
+After a component runs, **Freeze Path** locks the component's previous output state to prevent it from re-running.
+
+If you’re expecting consistent output from a component and don’t need to re-run it, click **Freeze Path**. 
+
+Enabling **Freeze Path** freezes all components upstream of the selected component.
+
+If you only want to freeze a single component, select **Freeze** instead.
+
+A <Icon name="Snowflake" aria-label="Snowflake"/> icon appears on all frozen components.
+
+## Additional component options
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To modify a component's name or description, double-click in the **Name** or **Description** fields. Component descriptions accept markdown syntax.
+
+### Component shortcuts
+
+The following keyboard shortcuts are available when a component is selected.
+
+| Menu Item | Mac Shortcut | Description |
+|-----------|----------|-------------|
+| Code | ⌘ + C | Opens the code editor for the component. |
+| Advanced | ⌘ + A | Opens advanced settings for the component. |
+| Save | ⌘ + S | Saves the current state of the component to Saved components in the sidebar. |
+| Duplicate | ⌘ + D | Creates a duplicate of the component. |
+| Copy | ⌘ + C | Copies the selected component. Paste it in the workspace with ⌘ + V. |
+| Docs | ⌘ + D | Opens related documentation. |
+| Minimize | ⌘ + Q | Minimizes the current component. |
+| Freeze | ⌘ + F | Freezes the current component state. |
+| Freeze Path | ⌘ + Shift + F | Freezes the current component state and all upstream components. |
+| Download | ⌘ + D | Downloads the current component as a JSON file. |
+| Delete | ⌘ + ⌫ | Deletes the component. |
+
+## Group components in the workspace
+
+Multiple components can be grouped into a single component for reuse. This is useful when combining large flows into single components (like RAG with a vector database, for example) and saving space.
path: docs/docs/Concepts/concepts-components.md
text: @user1:
```suggestion
Multiple components can be grouped into a single component for reuse. This is useful when combining large flows into single components, for example RAG with a vector database, and saving space.
```

diff_hunk: @@ -0,0 +1,209 @@
+---
+title: Components
+slug: /concepts-components
+---
+
+import Icon from "@site/src/components/icon";
+
+# Langflow components overview
+
+A component is a single building block within a flow with inputs, outputs, functions, and parameters that define its functionality. A single component is like a class within a larger application.
+
+To add a component to a flow, drag it from the **Component** menu to the **Workspace**.
+
+Learn more about components and how they work on this page.
+
+## Component menu
+
+Each component is unique, but all have a menu bar at the top that looks something like this.
+
+<img src="/img/openai-model-component.png" alt="Open AI component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+Use these controls to do the following:
+
+- **Code** — Modify the component's Python code and save your changes.
+- **Controls** — Adjust all component parameters.
+- **Freeze Path** — After a component runs, lock its previous output state to prevent it from re-running.
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To view a component’s output and logs, click the <Icon name="View" aria-label="View icon" />**Visibility** icon.
+
+To run a single component, click ▶️ **Play**.
+
+A ✅**Check** indicates that the component ran successfully.
+
+Running a single component with the **Play** button is different from running the entire flow. In a single component run, the `build_vertex` function is called, which builds and runs only the single component with direct inputs provided through the UI (the `inputs_dict` parameter). The  `VertexBuildResult` data is passed to the `build_and_run` method, which calls the component's `build` method and runs it. Unlike running the full flow, running a single component does not automatically execute its upstream dependencies.
+
+## Component ports
+
+Handles (<Icon name="Circle" size="16" aria-label="A circle on the side of a component" />) on the side of a component indicate the types of inputs and outputs that can be connected at that port. Hover over a handle to see connection details.
+
+<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+### Component port data type colors
+
+The following table lists the handle colors and their corresponding data types:
+
+| Data Type | Handle Color | Hex Code |
+|-----------|--------------|----------|
+| BaseLanguageModel | Fuchsia | #c026d3 |
+| Data | Red | #dc2626 |
+| Document | Lime | #65a30d |
+| Embeddings | Emerald | #10b981 |
+| LanguageModel | Fuchsia | #c026d3 |
+| Message | Indigo | #4f46e5 |
+| Prompt | Violet | #7c3aed |
+| str | Indigo | #4F46E5 |
+| Text | Indigo | #4F46E5 |
+| unknown | Gray | #9CA3AF |
+
+## Component code
+
+A component inherits from a base `Component` class that defines its interface and behavior.
+
+For example, the [Recursive character text splitter](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/components/langchain_utilities/recursive_character.py) is a child of the [LCTextSplitterComponent](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/base/textsplitters/model.py) class.
+
+```python
+from typing import Any
+
+from langchain_text_splitters import RecursiveCharacterTextSplitter, TextSplitter
+
+from langflow.base.textsplitters.model import LCTextSplitterComponent
+from langflow.inputs.inputs import DataInput, IntInput, MessageTextInput
+from langflow.utils.util import unescape_string
+
+class RecursiveCharacterTextSplitterComponent(LCTextSplitterComponent):
+    display_name: str = "Recursive Character Text Splitter"
+    description: str = "Split text trying to keep all related text together."
+    documentation: str = "https://docs.langflow.org/components-processing"
+    name = "RecursiveCharacterTextSplitter"
+    icon = "LangChain"
+
+    inputs = [
+        IntInput(
+            name="chunk_size",
+            display_name="Chunk Size",
+            info="The maximum length of each chunk.",
+            value=1000,
+        ),
+        IntInput(
+            name="chunk_overlap",
+            display_name="Chunk Overlap",
+            info="The amount of overlap between chunks.",
+            value=200,
+        ),
+        DataInput(
+            name="data_input",
+            display_name="Input",
+            info="The texts to split.",
+            input_types=["Document", "Data"],
+        ),
+        MessageTextInput(
+            name="separators",
+            display_name="Separators",
+            info='The characters to split on.\nIf left empty defaults to ["\\n\\n", "\\n", " ", ""].',
+            is_list=True,
+        ),
+    ]
+
+    def get_data_input(self) -> Any:
+        return self.data_input
+
+    def build_text_splitter(self) -> TextSplitter:
+        if not self.separators:
+            separators: list[str] | None = None
+        else:
+            # check if the separators list has escaped characters
+            # if there are escaped characters, unescape them
+            separators = [unescape_string(x) for x in self.separators]
+
+        return RecursiveCharacterTextSplitter(
+            separators=separators,
+            chunk_size=self.chunk_size,
+            chunk_overlap=self.chunk_overlap,
+        )
+
+```
+
+Components include definitions for inputs and outputs, which will be represented in the UI with color-coded ports.
+
+**Input Definition:** Each input (like `IntInput` or `DataInput`) specifies an input's type, name, and display properties, which appear as configurable fields in the component's UI panel.
+
+**Methods:** Components have methods or functions that handle their functionality. This component has two methods.
+`get_data_input` retrieves the text data to be split from the component's input. This makes the data available to the class.
+`build_text_splitter` creates a `RecursiveCharacterTextSplitter` object by calling its parent class's `build` method. The text is split with the created splitter and passed to the next component.
+When used in a flow, this component:
+
+1. Displays its configuration options in the UI.
+2. Validates user inputs based on the input types.
+3. Processes data using the configured parameters.
+4. Passes results to the next component.
+
+## Freeze Path
+
+After a component runs, **Freeze Path** locks the component's previous output state to prevent it from re-running.
+
+If you’re expecting consistent output from a component and don’t need to re-run it, click **Freeze Path**. 
+
+Enabling **Freeze Path** freezes all components upstream of the selected component.
+
+If you only want to freeze a single component, select **Freeze** instead.
+
+A <Icon name="Snowflake" aria-label="Snowflake"/> icon appears on all frozen components.
+
+## Additional component options
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To modify a component's name or description, double-click in the **Name** or **Description** fields. Component descriptions accept markdown syntax.
+
+### Component shortcuts
+
+The following keyboard shortcuts are available when a component is selected.
+
+| Menu Item | Mac Shortcut | Description |
+|-----------|----------|-------------|
+| Code | ⌘ + C | Opens the code editor for the component. |
+| Advanced | ⌘ + A | Opens advanced settings for the component. |
+| Save | ⌘ + S | Saves the current state of the component to Saved components in the sidebar. |
+| Duplicate | ⌘ + D | Creates a duplicate of the component. |
+| Copy | ⌘ + C | Copies the selected component. Paste it in the workspace with ⌘ + V. |
+| Docs | ⌘ + D | Opens related documentation. |
+| Minimize | ⌘ + Q | Minimizes the current component. |
+| Freeze | ⌘ + F | Freezes the current component state. |
+| Freeze Path | ⌘ + Shift + F | Freezes the current component state and all upstream components. |
+| Download | ⌘ + D | Downloads the current component as a JSON file. |
+| Delete | ⌘ + ⌫ | Deletes the component. |
+
+## Group components in the workspace
+
+Multiple components can be grouped into a single component for reuse. This is useful when combining large flows into single components (like RAG with a vector database, for example) and saving space.
+
+1. Hold **Shift** and drag to select components.
+2. Select **Group**.
+3. The components merge into a single component.
+4. Double-click the name and description to change them.
+5. Save your grouped component to in the sidebar for later use.
path: docs/docs/Concepts/concepts-components.md
text: @user1:
```suggestion
5. Save your grouped component to the sidebar for later use.
```

diff_hunk: @@ -0,0 +1,209 @@
+---
+title: Components
+slug: /concepts-components
+---
+
+import Icon from "@site/src/components/icon";
+
+# Langflow components overview
+
+A component is a single building block within a flow with inputs, outputs, functions, and parameters that define its functionality. A single component is like a class within a larger application.
+
+To add a component to a flow, drag it from the **Component** menu to the **Workspace**.
+
+Learn more about components and how they work on this page.
+
+## Component menu
+
+Each component is unique, but all have a menu bar at the top that looks something like this.
+
+<img src="/img/openai-model-component.png" alt="Open AI component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+Use these controls to do the following:
+
+- **Code** — Modify the component's Python code and save your changes.
+- **Controls** — Adjust all component parameters.
+- **Freeze Path** — After a component runs, lock its previous output state to prevent it from re-running.
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To view a component’s output and logs, click the <Icon name="View" aria-label="View icon" />**Visibility** icon.
+
+To run a single component, click ▶️ **Play**.
+
+A ✅**Check** indicates that the component ran successfully.
+
+Running a single component with the **Play** button is different from running the entire flow. In a single component run, the `build_vertex` function is called, which builds and runs only the single component with direct inputs provided through the UI (the `inputs_dict` parameter). The  `VertexBuildResult` data is passed to the `build_and_run` method, which calls the component's `build` method and runs it. Unlike running the full flow, running a single component does not automatically execute its upstream dependencies.
+
+## Component ports
+
+Handles (<Icon name="Circle" size="16" aria-label="A circle on the side of a component" />) on the side of a component indicate the types of inputs and outputs that can be connected at that port. Hover over a handle to see connection details.
+
+<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+### Component port data type colors
+
+The following table lists the handle colors and their corresponding data types:
+
+| Data Type | Handle Color | Hex Code |
+|-----------|--------------|----------|
+| BaseLanguageModel | Fuchsia | #c026d3 |
+| Data | Red | #dc2626 |
+| Document | Lime | #65a30d |
+| Embeddings | Emerald | #10b981 |
+| LanguageModel | Fuchsia | #c026d3 |
+| Message | Indigo | #4f46e5 |
+| Prompt | Violet | #7c3aed |
+| str | Indigo | #4F46E5 |
+| Text | Indigo | #4F46E5 |
+| unknown | Gray | #9CA3AF |
+
+## Component code
+
+A component inherits from a base `Component` class that defines its interface and behavior.
+
+For example, the [Recursive character text splitter](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/components/langchain_utilities/recursive_character.py) is a child of the [LCTextSplitterComponent](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/base/textsplitters/model.py) class.
+
+```python
+from typing import Any
+
+from langchain_text_splitters import RecursiveCharacterTextSplitter, TextSplitter
+
+from langflow.base.textsplitters.model import LCTextSplitterComponent
+from langflow.inputs.inputs import DataInput, IntInput, MessageTextInput
+from langflow.utils.util import unescape_string
+
+class RecursiveCharacterTextSplitterComponent(LCTextSplitterComponent):
+    display_name: str = "Recursive Character Text Splitter"
+    description: str = "Split text trying to keep all related text together."
+    documentation: str = "https://docs.langflow.org/components-processing"
+    name = "RecursiveCharacterTextSplitter"
+    icon = "LangChain"
+
+    inputs = [
+        IntInput(
+            name="chunk_size",
+            display_name="Chunk Size",
+            info="The maximum length of each chunk.",
+            value=1000,
+        ),
+        IntInput(
+            name="chunk_overlap",
+            display_name="Chunk Overlap",
+            info="The amount of overlap between chunks.",
+            value=200,
+        ),
+        DataInput(
+            name="data_input",
+            display_name="Input",
+            info="The texts to split.",
+            input_types=["Document", "Data"],
+        ),
+        MessageTextInput(
+            name="separators",
+            display_name="Separators",
+            info='The characters to split on.\nIf left empty defaults to ["\\n\\n", "\\n", " ", ""].',
+            is_list=True,
+        ),
+    ]
+
+    def get_data_input(self) -> Any:
+        return self.data_input
+
+    def build_text_splitter(self) -> TextSplitter:
+        if not self.separators:
+            separators: list[str] | None = None
+        else:
+            # check if the separators list has escaped characters
+            # if there are escaped characters, unescape them
+            separators = [unescape_string(x) for x in self.separators]
+
+        return RecursiveCharacterTextSplitter(
+            separators=separators,
+            chunk_size=self.chunk_size,
+            chunk_overlap=self.chunk_overlap,
+        )
+
+```
+
+Components include definitions for inputs and outputs, which will be represented in the UI with color-coded ports.
+
+**Input Definition:** Each input (like `IntInput` or `DataInput`) specifies an input's type, name, and display properties, which appear as configurable fields in the component's UI panel.
+
+**Methods:** Components have methods or functions that handle their functionality. This component has two methods.
+`get_data_input` retrieves the text data to be split from the component's input. This makes the data available to the class.
+`build_text_splitter` creates a `RecursiveCharacterTextSplitter` object by calling its parent class's `build` method. The text is split with the created splitter and passed to the next component.
+When used in a flow, this component:
+
+1. Displays its configuration options in the UI.
+2. Validates user inputs based on the input types.
+3. Processes data using the configured parameters.
+4. Passes results to the next component.
+
+## Freeze Path
+
+After a component runs, **Freeze Path** locks the component's previous output state to prevent it from re-running.
+
+If you’re expecting consistent output from a component and don’t need to re-run it, click **Freeze Path**. 
+
+Enabling **Freeze Path** freezes all components upstream of the selected component.
+
+If you only want to freeze a single component, select **Freeze** instead.
+
+A <Icon name="Snowflake" aria-label="Snowflake"/> icon appears on all frozen components.
+
+## Additional component options
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To modify a component's name or description, double-click in the **Name** or **Description** fields. Component descriptions accept markdown syntax.
path: docs/docs/Concepts/concepts-components.md
text: @user1:
```suggestion
To modify a component's name or description, double-click in the **Name** or **Description** fields. Component descriptions accept Markdown syntax.
```

diff_hunk: @@ -0,0 +1,209 @@
+---
+title: Components
+slug: /concepts-components
+---
+
+import Icon from "@site/src/components/icon";
+
+# Langflow components overview
+
+A component is a single building block within a flow with inputs, outputs, functions, and parameters that define its functionality. A single component is like a class within a larger application.
+
+To add a component to a flow, drag it from the **Component** menu to the **Workspace**.
+
+Learn more about components and how they work on this page.
+
+## Component menu
+
+Each component is unique, but all have a menu bar at the top that looks something like this.
+
+<img src="/img/openai-model-component.png" alt="Open AI component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+Use these controls to do the following:
+
+- **Code** — Modify the component's Python code and save your changes.
+- **Controls** — Adjust all component parameters.
+- **Freeze Path** — After a component runs, lock its previous output state to prevent it from re-running.
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To view a component’s output and logs, click the <Icon name="View" aria-label="View icon" />**Visibility** icon.
+
+To run a single component, click ▶️ **Play**.
+
+A ✅**Check** indicates that the component ran successfully.
+
+Running a single component with the **Play** button is different from running the entire flow. In a single component run, the `build_vertex` function is called, which builds and runs only the single component with direct inputs provided through the UI (the `inputs_dict` parameter). The  `VertexBuildResult` data is passed to the `build_and_run` method, which calls the component's `build` method and runs it. Unlike running the full flow, running a single component does not automatically execute its upstream dependencies.
+
+## Component ports
+
+Handles (<Icon name="Circle" size="16" aria-label="A circle on the side of a component" />) on the side of a component indicate the types of inputs and outputs that can be connected at that port. Hover over a handle to see connection details.
+
+<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
+
+### Component port data type colors
+
+The following table lists the handle colors and their corresponding data types:
+
+| Data Type | Handle Color | Hex Code |
+|-----------|--------------|----------|
+| BaseLanguageModel | Fuchsia | #c026d3 |
+| Data | Red | #dc2626 |
+| Document | Lime | #65a30d |
+| Embeddings | Emerald | #10b981 |
+| LanguageModel | Fuchsia | #c026d3 |
+| Message | Indigo | #4f46e5 |
+| Prompt | Violet | #7c3aed |
+| str | Indigo | #4F46E5 |
+| Text | Indigo | #4F46E5 |
+| unknown | Gray | #9CA3AF |
+
+## Component code
+
+A component inherits from a base `Component` class that defines its interface and behavior.
+
+For example, the [Recursive character text splitter](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/components/langchain_utilities/recursive_character.py) is a child of the [LCTextSplitterComponent](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/base/textsplitters/model.py) class.
+
+```python
+from typing import Any
+
+from langchain_text_splitters import RecursiveCharacterTextSplitter, TextSplitter
+
+from langflow.base.textsplitters.model import LCTextSplitterComponent
+from langflow.inputs.inputs import DataInput, IntInput, MessageTextInput
+from langflow.utils.util import unescape_string
+
+class RecursiveCharacterTextSplitterComponent(LCTextSplitterComponent):
+    display_name: str = "Recursive Character Text Splitter"
+    description: str = "Split text trying to keep all related text together."
+    documentation: str = "https://docs.langflow.org/components-processing"
+    name = "RecursiveCharacterTextSplitter"
+    icon = "LangChain"
+
+    inputs = [
+        IntInput(
+            name="chunk_size",
+            display_name="Chunk Size",
+            info="The maximum length of each chunk.",
+            value=1000,
+        ),
+        IntInput(
+            name="chunk_overlap",
+            display_name="Chunk Overlap",
+            info="The amount of overlap between chunks.",
+            value=200,
+        ),
+        DataInput(
+            name="data_input",
+            display_name="Input",
+            info="The texts to split.",
+            input_types=["Document", "Data"],
+        ),
+        MessageTextInput(
+            name="separators",
+            display_name="Separators",
+            info='The characters to split on.\nIf left empty defaults to ["\\n\\n", "\\n", " ", ""].',
+            is_list=True,
+        ),
+    ]
+
+    def get_data_input(self) -> Any:
+        return self.data_input
+
+    def build_text_splitter(self) -> TextSplitter:
+        if not self.separators:
+            separators: list[str] | None = None
+        else:
+            # check if the separators list has escaped characters
+            # if there are escaped characters, unescape them
+            separators = [unescape_string(x) for x in self.separators]
+
+        return RecursiveCharacterTextSplitter(
+            separators=separators,
+            chunk_size=self.chunk_size,
+            chunk_overlap=self.chunk_overlap,
+        )
+
+```
+
+Components include definitions for inputs and outputs, which will be represented in the UI with color-coded ports.
+
+**Input Definition:** Each input (like `IntInput` or `DataInput`) specifies an input's type, name, and display properties, which appear as configurable fields in the component's UI panel.
+
+**Methods:** Components have methods or functions that handle their functionality. This component has two methods.
+`get_data_input` retrieves the text data to be split from the component's input. This makes the data available to the class.
+`build_text_splitter` creates a `RecursiveCharacterTextSplitter` object by calling its parent class's `build` method. The text is split with the created splitter and passed to the next component.
+When used in a flow, this component:
+
+1. Displays its configuration options in the UI.
+2. Validates user inputs based on the input types.
+3. Processes data using the configured parameters.
+4. Passes results to the next component.
+
+## Freeze Path
+
+After a component runs, **Freeze Path** locks the component's previous output state to prevent it from re-running.
+
+If you’re expecting consistent output from a component and don’t need to re-run it, click **Freeze Path**. 
+
+Enabling **Freeze Path** freezes all components upstream of the selected component.
+
+If you only want to freeze a single component, select **Freeze** instead.
+
+A <Icon name="Snowflake" aria-label="Snowflake"/> icon appears on all frozen components.
+
+## Additional component options
+
+Click <Icon name="Ellipsis" aria-label="Horizontal ellipsis" /> **All** to see additional options for a component.
+
+To modify a component's name or description, double-click in the **Name** or **Description** fields. Component descriptions accept markdown syntax.
+
+### Component shortcuts
+
+The following keyboard shortcuts are available when a component is selected.
+
+| Menu Item | Mac Shortcut | Description |
path: docs/docs/Concepts/concepts-components.md
text: @user1:
```suggestion
| Menu item | Mac shortcut | Description |
```