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/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?")