Docs: update screenshots with new UI changes (#4579)

* remove-images

* logs-pane

* logs

* more-logs

* langsmith-langwatch

* guides-folder

* quickstart

* follow-image

* getting-started-folder

* share-store-change

* workspace-old-images

* component-folder

* deployment-folder

* configuration-folder

* delete-venv

* favicon-footer-header

* favicon-bw-and-replace-gif

* docs: Update prerequisites and terminology in Getting Started and Workspace documentation

* docs: Update terminology from "New Project" to "New Flow" in starter project documentation

* Apply suggestions from code review

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* docs: Update terminology from "project" to "flow" in starter project documentation

* docs: Update terminology from "project" to "flow" in starter project documentation

---------

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

docs/docs/Components/components-custom-components.md

@@ -90,8 +90,6 @@ class CustomComponent(Component):
 8. Click **Check & Save** to confirm your component works.
 You now have an operational custom component.
 
-![](./238089171.png)
-
 
 ## Add inputs and modify output methods
 
@@ -161,8 +159,6 @@ Since the component outputs a `Message`, you can wire it into a chat and pass me
 
 Your Custom Component accepts the Chat Input message through `MessageTextInput`, fills in the variables with the `process_inputs` method, and finally passes the message `User Username (Age: 49, Gender: Male) sent the following special message: Hello!` to Chat Output.
 
-![](./custom-component-chat.png)
-
 By defining inputs this way, Langflow can automatically handle the validation and display of these fields in the user interface, making it easier to create robust and user-friendly custom components.
 
 All of the types detailed above derive from a general class that can also be accessed through the generic `Input` class.
@@ -427,8 +423,6 @@ The component performs basic text analysis, including character count and senten
 
 Since the component inputs and outputs a `Message`, you can wire the component into a chat and see how the basic custom component logic interacts with your input.
 
-![](./custom-component-inputs-chat.png)
-
 ## Create a Custom Component with Multiple Outputs {#6f225be8a142450aa19ee8e46a3b3c8c}
 
 ---

docs/docs/Components/components-overview.md

@@ -10,7 +10,7 @@ A component is a single building block within a flow. It consists of inputs, o
 During the flow creation process, you will notice handles (colored circles) attached to one or both sides of a component. These handles use distinct colors to indicate the types of inputs and outputs that can be interconnected. Hover over a handle to see connection details.
 
 
-![](./565424296.png)
+<img src="/img/prompt-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
 
 
 On the top right corner of the component, you'll find the a play button to run a component. Once it runs, a status icon appears and you can hover over that to visualize success or error messages. Start interacting with your AI by clicking the **Playground** at the bottom right of the workspace.
@@ -22,14 +22,14 @@ On the top right corner of the component, you'll find the a play button to run a
 Each component is unique, but they all have a menu bar at the top that looks something like this.
 
 
-![](./938852908.png)
+<img src="/img/openai-model-component.png" alt="Prompt component" style={{display: 'block', margin: 'auto', width: 300}} />
 
 
 It consists of options such as:
 
-- **Code** — displays the component's Python code. You can modify the code and save it.
-- **Advanced** — See and adjust all parameters of a component.
-- **Freeze** — After a component runs, lock its previous output state to prevent it from re-running.
+- **Code** — Modify the component's Python code and save it.
+- **Controls** — Adjust all parameters of a component.
+- **Freeze Path** — After a component runs, lock its previous output state to prevent it from re-running.
 
 Click **All** (the "..." button) to see all options.
 
@@ -40,9 +40,6 @@ Click **All** (the "..." button) to see all options.
 Langflow includes an output visualizer for components that opens a pop-up screen. This allows you to easily inspect and monitor transmissions between components, providing instant feedback on your workflows.
 
 
-![](./987204819.png)
-
-
 ## Advanced settings {#b6430d4903df44f0ba4618a558c83d7b}
 
 
@@ -66,17 +63,9 @@ Multiple components can be grouped into a single component for reuse. This is us
 4. Double-click the name and description to change them.
 5. Save your grouped component to in the sidebar for later use!
 
-[group video here]
-
-
 ## Component version {#887fd587589448dc8c27336d1c235b9b}
 
-
 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.
-
-
-![](./263391508.png)
-

docs/docs/Configuration/configuration-auto-saving.md

@@ -4,48 +4,45 @@ sidebar_position: 6
 slug: /configuration-auto-save
 ---
 
-Langflow currently supports both manual and auto-saving functionality.
+Langflow supports both manual and auto-saving functionality.
 
 ## Auto-saving {#auto-saving}
 
-When Langflow is in Auto-saving mode, all changes are saved automatically. Auto-save progress is indicated in the left side of the top bar: when a flow is being saved, a Loading icon indicates that the flow is being saved in the database.
+When Langflow is in auto-saving mode, all changes are saved automatically. Auto-save progress is indicated in the left side of the top bar.
 
-![](./saving-header.png)
+* When a flow is being saved, a loading icon indicates that the flow is being saved in the database.
 
-If you try to exit the flow page before auto-save completes, a dialog will appear to confirm you want to exit before the flow has saved.
+* If you try to exit the flow page before auto-save completes, you are prompted to confirm you want to exit before the flow has saved.
 
-![](./flow-saving.png)
+* When the flow has successfully saved, click **Exit**.
 
-When the flow has successfully saved, you can click the 'Exit' button.
+## Disable auto-saving {#environment}
 
-![](./flow-saved.png)
+To disable auto-saving, 
 
-## Manual Saving {#manual-saving}
-
-When auto-saving is disabled, you need to manually save your flow when making changes. You can still run the flow without saving, for testing purposes.
-
-If you make any changes and Langflow detects that the saved flow is different from the current flow, a Save button will be enabled and the last time saved will appear at the left side of the topbar. To save the flow, click the Save button, or hit Ctrl+S or Command+S.
-
-![](./manual-save-button.png)
-
-If you try to exit after making changes and not saving, a confirmation dialog will appear. You can choose to exit anyway or save and exit.
-
-![](./flow-unsaved.png)
-
-## Disable Auto Saving {#environment}
-
-In Langflow, all changes made in the flows are saved automatically. However, you may prefer to disable this functionality, if you want a quick way to prototype and test changes before they are actually saved to the database.
-
-If you wish to disable this functionality, you can run Langflow with an environment variable to tell Langflow to use manual saving.
-
-```shell
-langflow --no-auto-saving
-# or
-python -m langflow --no-auto-saving
-```
-
-If you installed the local version of Langflow, you can set an environment variable and load it automatically by inserting this line into the `.env` file inside the directory.
+1. Set an environment variable in your `.env` file.
 
 ```env
 LANGFLOW_AUTO_SAVING=false
 ```
+
+2. Start Langflow with the values from your `.env` file.
+
+```shell
+python -m langflow run --env-file .env
+```
+
+Alternatively, disable auto-saving by passing the `--no-auto-saving` flag at startup.
+
+```shell
+python -m langflow --no-auto-saving
+```
+
+## Save a flow manually {#manual-saving}
+
+When auto-saving is disabled, you will need to manually save your flow when making changes.
+
+To manually save your flow, click the **Save** button or enter Ctrl+S or Command+S.
+
+If you try to exit after making changes and not saving, a confirmation dialog appears.
+

docs/docs/Configuration/configuration-global-variables.md

@@ -41,8 +41,6 @@ Because values are encrypted, you can't view the actual values of your global va
 In **Settings > Global Variables**, the **Value** column shows the encrypted hash for **Generic** type variables, and shows nothing for **Credential** type variables.
 :::
 
-<ReactPlayer controls url="https://youtu.be/RedPOCsYNAM" />
-
 ## Edit a global variable
 
 1. In the Langflow UI, click your profile icon, and then select **Settings**.

docs/docs/Deployment/deployment-gcp.md

@@ -18,7 +18,7 @@ The script will guide you through setting up a Debian-based VM with the Langflow
 
 1. Click below to launch Cloud Shell.
 
-[![GCP Deploy](./cloud_deploy.svg) Deploy to Google Cloud](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/langflow-ai/langflow&working_dir=scripts/gcp&shellonly=true&tutorial=walkthroughtutorial.md)
+[![GCP Deploy](/logos/cloud_deploy.svg) Deploy to Google Cloud](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/langflow-ai/langflow&working_dir=scripts/gcp&shellonly=true&tutorial=walkthroughtutorial.md)
 
 2. Click **Trust repo**. Some gcloud commands might not run in an ephemeral Cloud Shell environment.
 3. Click **Start** and follow the tutorial to deploy Langflow.

docs/docs/Deployment/deployment-hugging-face-spaces.md

@@ -1,5 +1,5 @@
 ---
-title: 🤗 Spaces
+title: HuggingFace Spaces
 sidebar_position: 0
 slug: /deployment-hugging-face-spaces
 ---
@@ -24,8 +24,7 @@ HuggingFace provides a great alternative for running Langflow in their Spaces en
 	- **Visibility Settings**: Choose between Public or Private visibility for your Space.
 	- After setting these parameters, click on **Duplicate Space** to initiate the setup.
 
-![](./257215214.png)
-
+![](/img/hugging-face-deployment.png)
 
 3. **Complete Installation**: The duplication and setup process begins immediately after you click **Duplicate Space**. Once completed, you will be automatically redirected to the main page of your new Space.
 

docs/docs/Deployment/deployment-railway.md

@@ -14,10 +14,8 @@ Deploying Langflow to Railway involves a few simple steps:
 
 1. **Click the Button Below**: Start by clicking the deployment button provided below. This will redirect you to the Railway platform.
 
-   [![Deploy on Railway](./railway-deploy.svg)](https://railway.app/template/JMXEWp?referralCode=MnPSdg)
+   [![Deploy on Railway](/logos/railway-deploy.svg)](https://railway.app/template/JMXEWp?referralCode=MnPSdg)
 
 2. **Deploy**: Proceed to deploy your Langflow instance. Click Deploy Now to deploy the instance. Railway will handle the rest, including setting up the infrastructure, deploying the Langflow instance, and starting the application.
 
-   ![](./1098199232.png)
-
 By following these steps, your Langflow instance will be successfully deployed on Railway.

docs/docs/Deployment/deployment-render.md

@@ -14,15 +14,11 @@ Deploying Langflow to Render is a straightforward process that can be completed
 
 1. **Click the Button Below**: Start by clicking the deployment button provided below. This will redirect you to the Render platform.
 
-   [![Deploy to Render](./render-deploy.svg)](https://render.com/deploy?repo=https%3A%2F%2Fgithub.com%2Flangflow-ai%2Flangflow%2Ftree%2Fdev)
+   [![Deploy to Render](/logos/render-deploy.svg)](https://render.com/deploy?repo=https%3A%2F%2Fgithub.com%2Flangflow-ai%2Flangflow%2Ftree%2Fdev)
 
 2. **Select the Blueprint Configuration**: Once on the Render platform, you will be prompted to provide a blueprint name and to select the branch for your `render.yaml` file in Langflow. This configuration file includes all the necessary settings and resources to deploy Langflow in Render. The default is `main`.
 3. The `render.yaml` file specifies a `standard` Render instance, because Langflow requires at least 2 GB of RAM to run. This may require a credit card to sign up. Review the pricing details on the Render platform to understand any costs involved before proceeding. If you need to change your plan later, from the Render dashboard, go to **Settings** > **Instance Type**.
 
-   ![](./render-deploy-plan.png)
-
 4. Click **Deploy Blueprint** to deploy Langflow. Render will handle the rest, including setting up the database, deploying the Langflow instance, and starting the application.
 
-   ![](./render-deployed-overview.png)
-
 By following these steps, your Langflow instance will be successfully deployed on Render.

docs/docs/Getting-Started/getting-started-quickstart.md

@@ -9,25 +9,14 @@ slug: /getting-started-quickstart
 ## Prerequisites {#b5f154a3a1d242c7bdf57acf0a552732}
 
 
----
+* [Python 3.10 to 3.12](https://www.python.org/downloads/release/python-3100/) installed
+* [pip](https://pypi.org/project/pip/) or [pipx](https://pipx.pypa.io/stable/installation/) installed
+* Before installing Langflow, we recommend creating a virtual environment to isolate your Python dependencies with [venv](https://docs.python.org/3/library/venv.html) or [conda](https://anaconda.org/anaconda/conda)
 
-- [Python >=3.10](https://www.python.org/downloads/release/python-3100/) and [pip](https://pypi.org/project/pip/) or [pipx](https://pipx.pypa.io/stable/installation/)
-- [OpenAI API key](https://platform.openai.com/)
-- [Langflow installed and running](/getting-started-installation)
-
-## Basic Prompting {#67e7cd59d0fa43e3926bdc75134f7472}
+## Create the basic prompting flow
 
 
----
-
-
-### Create the basic prompting project {#c029603ddb1f42f5b28df92e58426ab3}
-
-
-1. From the Langflow dashboard, click **New Project**. 
-
-
-![](./1835734464.png)
+1. From the Langflow dashboard, click **New Flow**.
 
 
 2. Select **Basic Prompting**.
@@ -36,37 +25,41 @@ slug: /getting-started-quickstart
 3. The **Basic Prompting** flow is created.
 
 
-![](./487525520.png)
+![](/img/starter-flow-basic-prompting.png)
 
 
-This flow allows you to chat with the **OpenAI** component through the **Prompt** component. 
+This flow allows you to chat with the **OpenAI** component through the **Prompt** component.
 
+4. To examine the flow's **Prompt** component, click on the **Template** field of the **Prompt** component.
 
-Examine the **Prompt** component. The **Template** field instructs the LLM to `Answer the user as if you were a pirate.` This should be interesting...
+```plain
+Answer the user as if you were a pirate.
 
+User: {user_input}
 
-![](./690736575.png)
+Answer:
+```
 
+The **Template** instructs the LLM to accept `{user_input}` and `Answer the user as if you were a pirate.`.
 
-4. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
+5. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
 
 	1. In the **Variable Name** field, enter `openai_api_key`.
 	2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
 	3. Click **Save Variable**.
 
-![](./1390293355.png)
 
+## Run the Basic Prompting flow {#ef0e8283bfb646f99bbb825462d8cbab}
 
-### Run {#ef0e8283bfb646f99bbb825462d8cbab}
-
-1. Click the **Playground** button on the control panel (bottom right side of the workspace). This is where you can interact with your AI.
+1. To open the **Playground** pane, click **Playground**.
+This is where you can interact with your AI.
 2. Type a message and press Enter. The bot should respond in a markedly piratical manner!
 
-### Modify the prompt for a different result {#dcea9df0cd51434db76717c78b1e9a94}
+## Modify the prompt for a different result {#dcea9df0cd51434db76717c78b1e9a94}
 
 1. To modify your prompt results, in the **Prompt** template, click the **Template** field. The **Edit Prompt** window opens.
 2. Change `Answer the user as if you were a pirate` to a different character, perhaps `Answer the user as if you were Hermione Granger.`
-3. Run the workflow again. The response will be markedly different.
+3. Run the workflow again. The response will be very different.
 
 ## Next steps {#63b6db6cb571489c86b3ae89051f1a4f}
 

docs/docs/Getting-Started/welcome-to-langflow.md

@@ -14,7 +14,7 @@ Langflow empowers developers to rapidly prototype and build AI applications with
 
 Langflow is an intuitive visual flow builder. This drag-and-drop interface allows developers to create complex AI workflows without writing extensive code. You can easily connect different components, such as prompts, language models, and data sources, to build sophisticated AI applications.
 
-![Langflow in action](./1160086633.gif)
+![Langflow in action](/img/playground-response.png)
 
 ## Use cases
 

docs/docs/Guides/guides-chat-memory.md

@@ -15,22 +15,21 @@ In any project, as long as there are [**Chat**](/components-io) being used, memo
 To see and access this history of messages, Langflow features a component called **Chat Memory**. It retrieves previous messages and outputs them in structured format or parsed.
 
 
-![](./403427222.png)
-
-
-To learn the basics about memory in Langflow, check out the [Memory Chatbot ](/starter-projects-memory-chatbot)starter example.
+To learn the basics about memory in Langflow, check out the [Memory Chatbot](/starter-projects-memory-chatbot) starter example.
 
 
 Memories can be visualized and managed directly from the **Playground**. You can edit and remove previous messages to inspect and validate the AI’s response behavior. You can remove or edit previous messages to get your models acting just right.
 
 
-![](./1988919422.png)
+![](/img/playground.png)
 
 
 Modifying these memories will influence the behavior of the chatbot responses, as long as an agent uses them. Here you have the ability to remove or edit previous messages, allowing them to manipulate and explore how these changes affect model responses.
 
+To modify chat memories, click your **Flow Name**, and then click **Logs**.
 
-![](./948333764.png)
+
+![](/img/logs.png)
 
 
 ## Session ID {#4ee86e27d1004e8288a72c633c323703}
@@ -42,20 +41,13 @@ Modifying these memories will influence the behavior of the chatbot responses, a
 Chat conversations store messages categorized by a `Session ID`. A a single flow can host multiple session IDs, and different flows can also share the same one.
 
 
-The **Chat Memory** component also retrieves message histories by `Session ID` which users can change in the advanced settings.
-
-
-![](./207457678.png)
-
-
- 
+The **Chat Memory** component also retrieves message histories by `Session ID`, which users can change in the component's **Controls** pane.
 
+![](/img/chat-input-controls-pane.png)
 
 By default, if the `Session ID`  value is empty, it is set to match the the same value as the `Flow ID`. 
 
-
 You can also display all messages stored across every flow and session by going to **Settings** > **Messages**.
 
-
-![](./1313358839.png)
+![](/img/settings-messages.png)
 

docs/docs/Integrations/integrations-langsmith.md

@@ -25,11 +25,9 @@ or export the environment variables in your terminal:
 
 `export LANGCHAIN_API_KEY="your-api-key"export LANGCHAIN_PROJECT="your-project-name"`
 
-1. Restart Langflow using `langflow run --env-file .env`
-2. Run any project and check the LangSmith dashboard for monitoring and observability.
+3. Restart Langflow using `langflow run --env-file .env`
+4. Run a project in Langflow.
+5. View the Langsmith dashboard for monitoring and observability.
 
-![](./965098683.png)
-
-
-![](./1641825585.png)
+![](/img/langsmith-dashboard.png)
 

docs/docs/Integrations/integrations-langwatch.md

@@ -32,11 +32,9 @@ or export it in your terminal:
 export LANGWATCH_API_KEY="your-api-key"
 ```
 
-1. Restart Langflow using `langflow run --env-file .env`
-2. Run any project and check the LangWatch dashboard for monitoring and observability.
+3. Restart Langflow using `langflow run --env-file .env`
+4. Run a project in Langflow.
+5. View the LangWatch dashboard for monitoring and observability.
 
-![](./505849097.png)
-
-
-![](./1503538843.png)
+![](/img/langwatch-dashboard.png)
 

docs/docs/Starter-Projects/starter-projects-basic-prompting.md

@@ -23,19 +23,10 @@ This article demonstrates how to use Langflow's prompt tools to issue basic prom
 - [Langflow installed and running](/getting-started-installation)
 - [OpenAI API key created](https://platform.openai.com/)
 
-## Basic Prompting {#1fae0e83ef08453fba017870d6d981bc}
+## Create the basic prompting flow {#19d5305239c841548a695e2bf7839e7a}
 
 
----
-
-
-### Create the basic prompting project {#19d5305239c841548a695e2bf7839e7a}
-
-
-1. From the Langflow dashboard, click **New Project**. 
-
-
-![](./1835734464.png)
+1. From the Langflow dashboard, click **New Flow**.
 
 
 2. Select **Basic Prompting**.
@@ -44,7 +35,7 @@ This article demonstrates how to use Langflow's prompt tools to issue basic prom
 3. The **Basic Prompting** flow is created.
 
 
-![](./487525520.png)
+![](/img/starter-flow-basic-prompting.png)
 
 
 This flow allows you to chat with the **OpenAI** component through the **Prompt** component. 
@@ -53,24 +44,19 @@ This flow allows you to chat with the **OpenAI** component through the **Prom
 Examine the **Prompt** component. The **Template** field instructs the LLM to `Answer the user as if you were a pirate.` This should be interesting...
 
 
-![](./690736575.png)
-
-
 4. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
 
 	1. In the **Variable Name** field, enter `openai_api_key`.
 	2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
 	3. Click **Save Variable**.
 
-![](./1390293355.png)
 
-
-### Run {#ce52f8e6b491452a9dfb069feb962eed}
+## Run the basic prompting flow {#ce52f8e6b491452a9dfb069feb962eed}
 
 1. Click the **Playground** button on the control panel (bottom right side of the workspace). This is where you can interact with your AI.
 2. Type a message and press Enter. The bot should respond in a markedly piratical manner!
 
-### Modify the prompt for a different result {#3ab045fcbe774c8fb3adc528f9042ba0}
+## Modify the prompt for a different result {#3ab045fcbe774c8fb3adc528f9042ba0}
 
 1. To modify your prompt results, in the **Prompt** template, click the **Template** field. The **Edit Prompt** window opens.
 2. Change `Answer the user as if you were a pirate` to a different character, perhaps `Answer the user as if you were Hermione Granger.`

docs/docs/Starter-Projects/starter-projects-blog-writer.md

@@ -4,9 +4,11 @@ sidebar_position: 1
 slug: /starter-projects-blog-writer
 ---
 
+Build a Blog Writer flow for a one-shot application using OpenAI.
 
+This flow extends the Basic Prompting flow with the **URL** and **Parse data** components that fetch content from multiple URLs and convert the loaded data into plain text.
 
-Build a blog writer with OpenAI that uses URLs for reference content.
+OpenAI uses this loaded data to generate a blog post, as instructed by the **Text input** component.
 
 
 ## Prerequisites {#899268e6c12c49b59215373a38287507}
@@ -17,43 +19,41 @@ Build a blog writer with OpenAI that uses URLs for reference content.
 - [Langflow installed and running](/getting-started-installation)
 - [OpenAI API key created](https://platform.openai.com/)
 
-## Blog Writer {#ef6e7555a96d4cbab169fbd2d8578bdc}
 
+## Create the blog writer flow {#0c1a9c65b7d640f693ec3aad963416ff}
+
+1. From the Langflow dashboard, click **New Flow**.
+2. Select **Blog Writer**.
+3. The **Blog Writer** flow is created.
+
+![](/img/starter-flow-blog-writer.png)
+
+
+This flow creates a one-shot article generator with **Prompt**, **OpenAI**, and **Chat Output** components, augmented with reference content and instructions from the **URL** and **Text Input** components.
+
+The **URL** component extracts raw text and metadata from one or more web links.
+The **Parse Data** component converts the data coming from the **URL** component into plain text to feed the prompt.
+
+To examine the flow's prompt, click the **Template** field of the **Prompt** component.
+
+```plain
+Reference 1:
+
+{references}
 
 ---
 
+{instructions}
 
-### Create the Blog Writer project {#0c1a9c65b7d640f693ec3aad963416ff}
+Blog:
+```
 
-1. From the Langflow dashboard, click **New Project**.
-2. Select **Blog Writer**.
-3. A workspace for the **Blog Writer** is displayed.
-
-![](./1190998947.png)
+The `{instructions}` value is received from the **Text input** component, and one or more `{references}` are received from a list of URLs parsed from the **URL** component.
 
 
-This flow creates a one-shot article generator with **Prompt**, **OpenAI**, and **Chat Output** components, augmented with reference content and instructions from the **URL** and **Instructions** components.
-
-
-The **Template** field of the **Prompt** looks like this:
-
-
-![](./257920618.png)
-
-
-The `{instructions}` value is received from the **Instructions** component. One or more `{references}`  are received from a list of URLs.
-
-- **URL** extracts raw text and metadata from one or more web links.
-- **Parse Data** converts the data coming from the **URL** component into plain text to feed a prompt.
-
-![](./25156979.png)
-
-
-### Run the Blog Writer {#b93be7a567f5400293693b31b8d0f81a}
+### Run the blog writer flow {#b93be7a567f5400293693b31b8d0f81a}
 
 1. Click the **Playground** button. Here you can chat with the AI that has access to the **URL** content.
 2. Click the **Lighting Bolt** icon to run it.
 3. To write about something different, change the values in the **URL** component and adjust the instructions on the left side bar of the **Playground**. Try again and see what the LLM constructs.
 
-![](./447530731.png)
-

docs/docs/Starter-Projects/starter-projects-document-qa.md

@@ -17,36 +17,24 @@ Build a question-and-answer chatbot with a document loaded from local memory.
 - [Langflow installed and running](/getting-started-installation)
 - [OpenAI API key created](https://platform.openai.com/)
 
-## Document QA {#acc90b19d4634c279b3e4e19e4e7ab1d}
 
+## Create the document QA flow {#204500104f024553aab2b633bb99f603}
 
----
-
-
-### Create the Document QA project {#204500104f024553aab2b633bb99f603}
-
-1. From the Langflow dashboard, click **New Project**.
+1. From the Langflow dashboard, click **New Flow**.
 2. Select **Document QA**.
-3. The **Document QA** project is created.
+3. The **Document QA** flow is created.
 
-![](./626991262.png)
+![](/img/starter-flow-document-qa.png)
 
 
 This flow is composed of a standard chatbot with the **Chat Input**, **Prompt**, **OpenAI**, and **Chat Output** components, but it also incorporates a **File** component, which loads a file from your local machine. **Parse Data** is used to convert the data from **File** into the **Prompt** component as `{Document}`. The **Prompt** component is instructed to answer questions based on the contents of `{Document}`. This gives the **OpenAI** component context it would not otherwise have access to.
 
 
-![](./1140665127.png)
-
-
-### Run the Document QA {#f58fcc2b9e594156a829b1772b6a7191}
+### Run the document QA flow {#f58fcc2b9e594156a829b1772b6a7191}
 
 
 1. To select a document to load, in the **File** component, click the **Path** field. Select a local file, and then click **Open**. The file name appears in the field.
 
-
-![](./1073956357.png)
-
-
 2. Click the **Playground** button. Here you can chat with the AI that has access to your document's content.
 
 

docs/docs/Starter-Projects/starter-projects-dynamic-agent.md

@@ -18,11 +18,11 @@ This flow is "dynamic" because it uses the **Chat input** component's text to de
 
 To use this flow, you need an [OpenAI API key](https://platform.openai.com/) and a [Search API key](https://www.searchapi.io/).
 
-## Open Langflow and start a new project
+## Open Langflow and start a new flow
 
-Click **New Project**, and then select the **Dynamic Agent** project.
+Click **New Flow**, and then select the **Dynamic Agent** flow.
 
-This opens a starter project with the necessary components to run an agentic application using CrewAI.
+This opens a starter flow with the necessary components to run an agentic application using CrewAI.
 
 The **Dynamic Agent** flow consists of these components:
 

docs/docs/Starter-Projects/starter-projects-memory-chatbot.md

@@ -6,7 +6,7 @@ slug: /starter-projects-memory-chatbot
 
 
 
-This flow extends the [Basic Prompting](http://localhost:3000/starter-projects/basic-prompting) flow to include a chat memory. This makes the AI remember previous user inputs.
+This flow extends the [basic prompting](/starter-projects-basic-prompting) flow to include a chat memory. This makes the AI remember previous user inputs.
 
 
 ## Prerequisites {#a71d73e99b1543bbba827207503cf31f}
@@ -17,19 +17,14 @@ This flow extends the [Basic Prompting](http://localhost:3000/starter-projects/
 - [Langflow installed and running](/getting-started-installation)
 - [OpenAI API key created](https://platform.openai.com/)
 
-## Memory Chatbot {#54073bf7eb1b4ff490c313f5612f0842}
 
+## Create the memory chatbot flow
 
----
-
-
-### Create the memory chatbot project {#70ce99381b7043a1b417a81e9ae74c72}
-
-1. From the Langflow dashboard, click **New Project**.
+1. From the Langflow dashboard, click **New Flow**.
 2. Select **Memory Chatbot**.
-3. The **Memory Chatbot** flow is created .
+3. The **Memory Chatbot** flow is created.
 
-![](./1511598495.png)
+![](/img/starter-flow-memory-chatbot.png)
 
 
 This flow uses the same components as the Basic Prompting one, but extends it with a **Chat Memory** component. This component retrieves previous messages and sends them to the **Prompt** component to fill a part of the **Template** with context.
@@ -38,13 +33,10 @@ This flow uses the same components as the Basic Prompting one, but extends it wi
 By clicking the template, you'll see the prompt editor like below:
 
 
-![](./450254819.png)
-
-
 This gives the **OpenAI** component a memory of previous chat messages.
 
 
-### Run {#a110cad860584c98af1aead006035378}
+## Run the memory chatbot flow
 
 1. Open the Playground.
 2. Type multiple questions. In the **Memories** tab, your queries are logged in order. Up to 100 queries are stored by default. Try telling the AI your name and asking `What is my name?` on a second message, or `What is the first subject I asked you about?` to validate that previous knowledge is taking effect.
@@ -57,11 +49,7 @@ Check and adjust advanced parameters by opening the Advanced Settings of the **
 
 
 
-
-![](./1079168789.png)
-
-
-## Session ID {#4e68c3c0750942f98c45c1c45d7ffbbe}
+## Use Session ID in with the memory chatbot flow {#4e68c3c0750942f98c45c1c45d7ffbbe}
 
 
 ---

docs/docs/Starter-Projects/starter-projects-simple-agent.md

@@ -14,15 +14,15 @@ In this flow, the **Tool-calling agent** reasons using an **Open AI** LLM to sol
 
 To use this flow, you need an OpenAI API key.
 
-## Open Langflow and start a new project
+## Open Langflow and start a new flow
 
-Click **New Project**, and then select the **Simple Agent** project.
+Click **New Flow**, and then select the **Simple Agent** flow.
 
-This opens a starter project with the necessary components to run an agentic application using the Tool-calling agent.
+This opens a starter flow with the necessary components to run an agentic application using the Tool-calling agent.
 
 ## Simple Agent flow
 
-![](./starter-flow-simple-agent.png)
+![](/img/starter-flow-simple-agent.png)
 
 The **Simple Agent** flow consists of these components:
 

docs/docs/Starter-Projects/starter-projects-travel-planning-agent.md

@@ -18,15 +18,15 @@ All agents have access to the **Search API** and **URL Content Fetcher** compone
 
 To use this flow, you need an [OpenAI API key](https://platform.openai.com/) and a [Search API key](https://www.searchapi.io/).
 
-## Open Langflow and start a new project
+## Open Langflow and start a new flow
 
-Click **New Project**, and then select the **Travel Planning Agent** project.
+Click **New Flow**, and then select the **Travel Planning Agent** flow.
 
-This opens a starter project with the necessary components to run an agentic application using multiple Tool-calling agents.
+This opens a starter flow with the necessary components to run an agentic application using multiple Tool-calling agents.
 
-## Travel Planning Agent flow
+## Create the travel planning agent flow
 
-![](./starter-flow-travel-planning-agent.png)
+![](/img/starter-flow-travel-agent.png)
 
 The **Travel Planning Agent** flow consists of these components:
 
@@ -37,7 +37,7 @@ The **Travel Planning Agent** flow consists of these components:
 * The **Chat Output** component prints the flow's output to the chat.
 * The **OpenAI** model component sends the user input and prompt to the OpenAI API and receives a response.
 
-## Run the Travel Planning Agent flow
+## Run the travel planning agent flow
 
 1. Add your credentials to the Open AI and Search API components.
 2. In the **Chat output** component, click ▶️ Play to start the end-to-end application flow.

docs/docs/Starter-Projects/starter-projects-vector-store-rag.md

@@ -15,7 +15,7 @@ RAG is backed by a **vector store**, a vector database which stores embeddings
 This enables **vector search**, a more powerful and context-aware search.
 
 
-We've chosen [Astra DB](https://astra.datastax.com/signup?utm_source=langflow-pre-release&utm_medium=referral&utm_campaign=langflow-announcement&utm_content=create-a-free-astra-db-account) as the vector database for this starter project, but you can follow along with any of Langflow's vector database options.
+We've chosen [Astra DB](https://astra.datastax.com/signup?utm_source=langflow-pre-release&utm_medium=referral&utm_campaign=langflow-announcement&utm_content=create-a-free-astra-db-account) as the vector database for this starter flow, but you can follow along with any of Langflow's vector database options.
 
 
 ## Prerequisites {#6aa2c6dff6894eccadc39d4903d79e66}
@@ -29,25 +29,17 @@ We've chosen [Astra DB](https://astra.datastax.com/signup?utm_source=langflow-p
 	- Application Token
 	- API Endpoint
 
-![](./648489928.png)
 
+## Create the vector store RAG flow
 
-## Vector Store RAG {#1c37d15332f94cfe8f6e11dc6cc8a4ea}
-
-
----
-
-
-### Create the vector store RAG project {#e3ed64193e5e448f81279e1d54ba43cf}
-
-1. From the Langflow dashboard, click **New Project**.
+1. From the Langflow dashboard, click **New Flow**.
 2. Select **Vector Store RAG**.
-3. The **Vector Store RAG** project is created.
+3. The **Vector Store RAG** flowis created.
 
-![](./1946624394.png)
+![](/img/starter-flow-vector-rag.png)
 
 
-The vector store RAG flow is built of two separate flows. Ingestion and query.
+The vector store RAG flow is built of two separate flows for ingestion and query.
 
 
 The **ingestion** part (bottom of the screen) populates the vector store with data from a local file. It ingests data from a file (**File**), splits it into chunks (**Split Text**), indexes it in Astra DB (**Astra DB**), and computes embeddings for the chunks using an embedding model (**OpenAI Embeddings**). 
@@ -86,7 +78,7 @@ The **query** part (top of the screen) allows users to retrieve embedded vecto
 	5. Repeat the above steps for the **API Endpoint** field, pasting your Astra API Endpoint instead (`https://ASTRA_DB_ID-ASTRA_DB_REGION.apps.astra.datastax.com`).
 	6. Add the global variable to both the **Astra DB** and **Astra DB Search** components.
 
-### Run the Vector Store RAG {#815a6536d2d548d987f0f4e375a58b15}
+## Run the Vector Store RAG flow
 
 1. Click the **Playground** button. Here you can chat with the AI that uses context from the database you created.
 2. Type a message and press Enter. (Try something like "What topics do you know about?")

docs/docs/Workspace/workspace-api.md

@@ -9,7 +9,7 @@ import ReactPlayer from "react-player";
 The **API** section presents code templates for integrating your flow into external applications.
 
 
-![](./1862729633.png)
+![](/img/api-pane.png)
 
 
 ### cURL {#4eb287a8424349c4b0b436a6703de5f3}
@@ -36,9 +36,6 @@ The **Python Code** tab displays code to interact with your flow's `.json` f
 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.
 
 
-<ReactPlayer controls url="https://youtu.be/ISGKvHzJG8o" />
-
-
 ## Chat Widget {#48f121a6cb3243979a341753da0c2700}
 
 
@@ -57,18 +54,12 @@ You can get the HTML code embedded with the chat by clicking the Code button at
 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.
 
 
-![](./566212295.png)
-
-
 ### Embed your flow into HTML {#6e84db2f2a0d451db6fa03c57e9bf9a4}
 
 
 The Chat Widget can be embedded into any HTML page, inside a `<body>` tag, as demonstrated in the video below.
 
 
-<ReactPlayer controls url="https://youtu.be/cVpNc-osfxQ" />
-
-
 ### Embed your flow with React {#fe5d3b1c42e74e4c84ebc9d1799b7665}
 
 
@@ -80,7 +71,6 @@ To embed the Chat Widget using React, insert this `<script>` tag into the Reac
 ```
 
 
-
 Declare your Web Component and encapsulate it in a React component.
 
 

docs/docs/Workspace/workspace-logs.md

@@ -5,12 +5,12 @@ 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.
 
-The **Logs** page 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.
 
 
-![](./816620192.png)
-
-
-Double click the cells on that table for a detailed view.
-

docs/docs/Workspace/workspace-overview.md

@@ -18,6 +18,8 @@ To connect components, drag a line from the output handle (⚪) of one component
 
 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.
@@ -28,23 +30,25 @@ Any input or output component can be opened in the **Playground** and tested in
 
 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).
 
-## Collections, folders, and projects
+![](/img/api-pane.png)
 
-The **My Collection** page displays all the flows and components you've created in the Langflow workspace.
+## Projects and folders
 
-Your **collection** is the top-level categorization for all of your projects.
+The **My Projects** page displays all the flows and components you've created in the Langflow workspace.
 
-### My projects
+![](/img/my-projects.png)
 
 **My Projects** is the default folder where all new projects and components are initially stored.
 
-Collections, folders, projects, and flows are exchanged as JSON objects
+Projects, folders, and flows are exchanged as JSON objects.
 
 * To create a new folder, click 📁 **New Folder**.
 

docs/docs/Workspace/workspace-playground.md

@@ -12,7 +12,7 @@ The **Playground** is a dynamic interface designed for real-time interaction w
 As long as you have an [Input or Output](/components-io) component working, you can open it up by clicking the **Playground** button.
 
 
-![](./1109547993.png)
+![](/img/playground.png)
 
 
 :::tip
@@ -22,14 +22,9 @@ Notice how the **Playground's** window arrangement changes depending on what com
 :::
 
 
-
-
 You can also open a flow's **Playground** without entering its workspace. From **My Collections** or **Langflow Store**, click the **Playground** in one of the projects card.
 
 
-<ReactPlayer controls url="https://youtu.be/guaN0DOTxfo" />
-
-
 ## Memory Management {#821a5ee2a8a44d35b49943cba630511c}
 
 

docs/docusaurus.config.js

@@ -131,7 +131,7 @@ const config = {
         title: "Langflow",
         logo: {
           alt: "Langflow",
-          src: "img/chain.png",
+          src: "/img/logo.svg",
         },
         items: [
           // right

docs/src/theme/Footer.js

@@ -7,7 +7,7 @@ export default function FooterWrapper(props) {
   const iconSpan1 = React.createElement(
     "img",
     {
-      src: "/img/chain.png",
+      src: "/img/logo.svg",
       style: { width: "40px" },
     },
     null