docs: Rewrite Getting Started pages

docs/docs/getting-started/install-langflow.mdx

@@ -46,12 +46,14 @@ python -m langflow run
 
 2. Confirm that a local Langflow instance starts by visiting `http://127.0.0.1:7860` in a Chromium-based browser.
 
-```bash
+<ZoomableImage
-│ Welcome to ⛓ Langflow                             │
+  alt="Instructions for duplicating Langflow space on HuggingFace"
-│                                                   │
+  sources={{
-│ Access http://127.0.0.1:7860                      │
+    light: "img/welcome-to-langflow.png",
-│ Collaborate, and contribute at our GitHub Repo 🚀 │
+    dark: "img/welcome-to-langflow.png",
-```
+  }}
+  style={{ width: "80%", maxWidth: "800px", margin: "0 auto" }}
+/>
 
 3. Continue on to the [Quickstart](./quickstart).
 
@@ -61,7 +63,7 @@ HuggingFace provides a great alternative for running Langflow in their Spaces en
 
 1. **Access Langflow Space**: Open a Chromium-based browser and navigate to the [Langflow Space](https://huggingface.co/spaces/Langflow/Langflow?duplicate=true). This link directs you to a pre-configured environment for Langflow.
 
-2. **Duplicate the Space**: Upon arrival, you'll encounter an option to duplicate the Langflow space. This step involves a few simple decisions:
+2. **Duplicate the Space**: You'll encounter an option to duplicate the Langflow space. This step involves a few simple decisions:
    - **Naming Your Space**: Assign a unique name to your new Space.
    - **Visibility Settings**: Choose between Public or Private visibility for your Space.
    - After setting these parameters, click on **Duplicate Space** to initiate the setup.

docs/docs/getting-started/new-to-llms.mdx

@@ -4,7 +4,9 @@ Large Language Models, or LLMs, are part of an exciting new world in computing.
 
 We made Langflow for anyone to create with LLMs, and hope you'll feel comfortable installing Langflow and [getting started](./quickstart).
 
-If you want to learn more about LLMs, prompt engineering, and AI models, Langflow recommends [promptingguide.ai](https://promptingguide.ai), an open-source repository of prompt engineering content maintained by AI experts.
+If you want to learn the basics of LLMs, prompt engineering, and AI models, Langflow recommends [promptingguide.ai](https://promptingguide.ai), an open-source repository of prompt engineering content maintained by AI experts.
 PromptingGuide offers content for [beginners](https://www.promptingguide.ai/introduction/basics) and [experts](https://www.promptingguide.ai/techniques/cot), as well as the latest [research papers](https://www.promptingguide.ai/papers) and [test results](https://www.promptingguide.ai/research) fueling AI's progress.
 
-Wherever you are on your AI journey, it's helpful to keep Prompting Guide open in a tab.
+For an in depth readings, we recommend [Awesome LLM Books](https://github.com/Hannibal046/Awesome-LLM?tab=readme-ov-file#llm-books), a curated list of resources for learning about LLMs and their applications.
+
+{/* Wherever you are on your AI journey, it's helpful to keep Prompting Guide open in a tab. */}

docs/docs/getting-started/quickstart.mdx

@@ -6,7 +6,7 @@ import Admonition from "@theme/Admonition";
 
 # ⚡️ Quickstart
 
-This guide demonstrates how to build a basic prompt flow and modify that prompt for different outcomes.
+This guide demonstrates how to build a basic flow and modify the prompt for different outcomes.
 
 ## Prerequisites
 
@@ -16,13 +16,6 @@ This guide demonstrates how to build a basic prompt flow and modify that prompt
 
 - [OpenAI API key](https://platform.openai.com)
 
-<Admonition type="info">
-  Langflow is also available in HuggingFace Spaces. [Clone the space
-  using this
-  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
-  to create your own Langflow workspace in minutes.
-</Admonition>
-
 ## Hello World - Basic Prompting
 
 Let's start with a Prompt component to instruct an OpenAI Model.
@@ -79,7 +72,7 @@ By creating an environment variable, you keep your API key secure and make it ea
 
 Well done! You've built your first prompt in Langflow. 🎉
 
-By adding Langflow components to your flow, you can create all sorts of interesting behaviors. Here are a couple of examples:
+By dragging Langflow components to your workspace, you can create all sorts of interesting behaviors. Here are a couple of examples:
 
 - [Memory Chatbot](/starter-projects/memory-chatbot)
 - [Blog Writer](/starter-projects/blog-writer)

docs/docs/getting-started/workspace.mdx

@@ -4,11 +4,11 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 import ReactPlayer from "react-player";
 import Admonition from "@theme/Admonition";
 
-# 🖥️ Langflow Workspace
+# 🎨 Langflow Workspace
 
 ## The Langflow Workspace Interface
 
-The Langflow Workspace interface is designed to facilitate the creation, management, and execution of flows. It features a minimalistic design with various menus and options that are accessible for building and customizing a chatbot.
+The **Langflow Workspace** is where you assemble new flows and create AIs by connecting and running components. To get started, click on **New Project**. You can either build a flow from scratch (Blank Flow) or choose from pre-built starter examples.
 
 ### Sidebar Menu
 
@@ -27,43 +27,35 @@ The large central area where users can visually assemble and connect components
 In the top navigation bar, the dropdown menu labeled with the project name offers several management and customization options for the current flow in the Langflow Workspace.
 
 <ZoomableImage
-  alt="Docusaurus themed image"
+  alt="Options Dropdown"
   sources={{
-    light: useBaseUrl("img/topnav.png"),
+    light: useBaseUrl("img/menu-options.png"),
-    dark: useBaseUrl("img/topnav.png"),
+    dark: useBaseUrl("img/menu-options.png"),
   }}
-  style={{ width: "40%", margin: "20px auto" }}
+  style={{ width: "100%", margin: "20px auto" }}
 />
 
-* **New**: Create a new flow from scratch.
+- **New**: Create a new flow from scratch.
 
-* **Settings**: Adjust settings specific to the current flow, such as its Name, Description, and Endpoint Name.
+- **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.
+- **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.
+- **Import**: Import a flow or component from a JSON file into the Workspace.
 
-* **Export**: Export the current flow as a JSON file.
+- **Export**: Export the current flow as a JSON file.
 
-* **Undo (⌘Z)**: Revert the last action taken in the project.
+- **Undo (⌘Z)**: Revert the last action taken in the project.
 
-* **Redo (⌘Y)**: Reapply a previously undone action.
+- **Redo (⌘Y)**: Reapply a previously undone action.
 
-* **Refresh All**: Refresh all components and data within the Workspace.
+- **Refresh All**: Refresh all components and delete cache.
 
 ## Control Panel
 
-- **Star**: Located in the top-right corner, allowing users to star or favorite the project for easy access.
 - **Playground**: Button that executes the current flow in the workspace.
 - **API**: Provides API access details and integration options for the current flow.
-- **Share**: Allows users to share their project or flow with others, providing options for collaboration and review.
+- **Share**: Allows users to share their AI with others.
-
-## Utility Buttons
-
-- **Plus (+)**: Located at the bottom of the sidebar, used to add new components to the workspace.
-- **Settings (gear icon)**: Provides access to settings for the Langflow Workspace, where users can customize their experience or manage account settings.
-
-The **Langflow Workspace** is where you assemble new flows by connecting components and run them. To get started, click on **New Project**. You can either build a flow from scratch (Blank Flow) or choose from pre-built starter examples.
 
 ## Flows & Components
 
@@ -85,14 +77,16 @@ For example, the [Basic Prompting](../starter-projects/basic-prompting) flow is
     light: useBaseUrl("img/basic-prompting.png"),
     dark: useBaseUrl("img/basic-prompting.png"),
   }}
-  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+  style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
 />
 
+{" "}
+
 In this flow, the **OpenAI Model** receives input (left side) and produces output (right side) - in this case, receiving input from the **Chat Input** and **Prompt** components and passing the output to the **Chat Output** component.
 
 ## Component
 
-Components are the building blocks of flows. They consist of inputs, outputs, and parameters that define their functionality. These elements provide a convenient and straightforward way to compose LLM-based applications. Learn more about components and how they work in the [Components Section](../components).
+Components are the building blocks of flows. They consist of inputs, outputs, and parameters that define their functionality. These elements provide a convenient and straightforward way to compose LLM-based applications. Learn more about components and how they work below.
 
 <div style={{ marginBottom: "20px" }}>
   During the flow creation process, you will notice handles (colored circles)
@@ -101,57 +95,66 @@ Components are the building blocks of flows. They consist of inputs, outputs, an
   Hover over a handle to see connection details.
 </div>
 
-<div style={{ marginBottom: "20px" }}>
-For example, if you select a <code>ConversationChain</code> component, you
-will see orange <span style={{ color: "orange" }}>o</span> and purple{" "}
-
-  <span style={{ color: "purple" }}>o</span> input handles. They indicate that
-  this component accepts an LLM and a Memory component as inputs. The red
-  asterisk <span style={{ color: "red" }}>*</span> means that at least one input
-  of that type is required.
-</div>
-
 {" "}
 
 <ZoomableImage
-  alt="Docusaurus themed image"
+  alt="Single Component"
   sources={{
-    light: useBaseUrl("img/single-component-light.png"),
+    light: useBaseUrl("img/single-component.png"),
-    dark: useBaseUrl("img/single-component-dark.png"),
+    dark: useBaseUrl("img/single-component.png"),
   }}
-  style={{ width: "40%", margin: "20px auto" }}
+  style={{ width: "100%", margin: "20px auto" }}
 />
 
 <div style={{ marginBottom: "20px" }}>
 
-In the top right corner of the component, you'll find the component status icon (![Status icon](/logos/playbutton.svg)).
+{/\* On the top right corner of the component, you'll find the component status icon (![Status icon](/logos/playbutton.svg)).
 Build the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** at the bottom right of the workspace.
 
 Once the validation is complete, the status of each validated component should turn green (![Status icon](/logos/greencheck.svg)).
-To debug, hover over the component status to see the outputs.
+To debug, hover over the component status to see the outputs. \*/}
 
 </div>
 
-### Multiple outputs
+{/\* ### Multiple outputs
 
-A component can have multiple outputs. For example, this one Chat Input component routes through three prompt chains, and returns three different responses to a single question in the Playground.
+A component can have multiple outputs. For example, this one Chat Input component routes through three prompt chains, and returns three different responses to a single question in the Playground. \*/}
-
-<ZoomableImage
-  alt="Docusaurus themed image"
-  sources={{
-    light: useBaseUrl("img/multiple-outputs.png"),
-    dark: useBaseUrl("img/multiple-outputs.png"),
-  }}
-  style={{ width: "40%", margin: "20px auto" }}
-/>
 
 ### Output Preview
 
-Langflow now 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.
+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.
 
-### Component Parameters
+<ZoomableImage
+  alt="Single Component"
+  sources={{
+    light: useBaseUrl("img/inspect-output.png"),
+    dark: useBaseUrl("img/inspect-output.png"),
+  }}
+  style={{ width: "60%", margin: "20px auto" }}
+/>
 
-Langflow components can be edited by clicking the component settings button.
+### Component Menu
+
+Each component is a little unique, but they will all have a menu bar on top that looks something like this.
+
+<ZoomableImage
+  alt="Component Menu"
+  sources={{
+    light: useBaseUrl("img/component-menu.png"),
+    dark: useBaseUrl("img/component-menu.png"),
+  }}
+  style={{ width: "70%", margin: "10px auto" }}
+/>
+
+It consists of options such as:
+
+**Code** - displays 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.
+
+Click **All** (the "..." button) to see all options.
 
 <div
   style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
@@ -159,67 +162,34 @@ Langflow components can be edited by clicking the component settings button.
   <ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
 </div>
 
+### Advanced Settings
+
+Langflow components can be edited by clicking the **Advanced Settings** button.
+
+<div
+  style={{
+    marginBottom: "30px",
+    marginTop: "30px",
+    display: "flex",
+    justifyContent: "center",
+  }}
+>
+  <ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
+</div>
+
 Hide parameters with the **SHOW** button to reduce complexity and keep the workspace clean and intuitive for experimentation.
 
-Double-click the component name to rename it.
+You can also double-click a component's name and description to modify those. Component descriptions accept markdown syntax.
 
-### Component menu
+### Group Components
 
-Each component is a little unique, but they will all have a menu bar on top that looks something like this.
+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.
-The menu options are **Code**, **Advanced Settings**, **Freeze**, and **More**.
 
-<ZoomableImage
+1. Hold **Shift** and drag to select components.
-  alt="Docusaurus themed image"
-  sources={{
-    light: useBaseUrl("img/chat-input-light.png"),
-    dark: useBaseUrl("img/chat-input-dark.png"),
-  }}
-  style={{ width: "40%", margin: "20px auto" }}
-/>
-
-### Code menu
-
-The **Code** button displays your component's Python code.
-You can modify the code and save it.
-
-### Advanced Settings
-
-Modify the parameters of your component.
-
-#### Freeze
-
-After a component runs, lock its previous output state to prevent it from re-running.
-
-This avoids spending tokens when consistent output is expected.
-
-#### More
-
-**Code** - Modify your component's Python code.
-**Advanced** - modify the parameters of your component.
-
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
-</div>
-
-**Copy** - copy your component.
-
-**Share** - share your component to the Langflow store.
-
-**Docs** - view documentation for your component.
-
-**Delete** - delete your component.
-
-### Group multiple components
-
-Components without input or output nodes can be grouped into a single component for reuse.
-This is useful for combining large flows into single components (like RAG with a vector database, for example) and saving space.
-
-1. Hold **Shift** and drag to select the **Prompt** and **OpenAI** components.
 2. Select **Group**.
 3. The components merge into a single component.
-4. To save the new component, select **Save**. It can now be reused from the **Saved** components folder.
+4. Double click name and description to change them.
+5. Save your grouped component to in the sidebar for later use!
 
 ### Update component version
 
@@ -227,19 +197,29 @@ A component's state is stored in a database, while sidebar components are like s
 
 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 initilized to the workspace with. Click the **Update Component** icon to bring the component up to the `latest` version.
+The component will keep the version number it was initilized 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.
+
+<ZoomableImage
+  alt="Update Component"
+  sources={{
+    light: useBaseUrl("img/component-update.png"),
+    dark: useBaseUrl("img/component-update.png"),
+  }}
+  style={{ width: "80%", margin: "20px auto" }}
+/>
 
 ## Playground
 
-Run your flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** button.
+Run your AI by clicking the **![Playground icon](/logos/botmessage.svg)Playground** button.
 
 For more, see [Playground](../administration/playground).
 
 ## API
 
-The **API** button opens the API window, where Langflow presents code for integrating your flow into external applications.
+{/* rsn */}
+The **API** session presents code templates for integrating your flow into external applications.
 
-Modify the call's parameters in the **Tweaks** window, click the **Copy Code** or **Download** buttons, and paste your code where you want to use it.
+{/* Modify parameters in the **Tweaks** window, click **Copy Code** or **Download** buttons, and paste your code where you want to use it. */}
 
 <ZoomableImage
   alt="Docusaurus themed image"
@@ -250,9 +230,9 @@ Modify the call's parameters in the **Tweaks** window, click the **Copy Code** o
   style={{ width: "60%", margin: "20px auto" }}
 />
 
-### curl
+### cURL
 
-The **curl** tab displays sample code for posting a query to your flow.
+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.
 
@@ -300,4 +280,4 @@ For example, changing the **Chat Input** component's `input_value` will change t
   style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
 >
   <ReactPlayer playing controls url="/videos/langflow_api.mp4" />
-</div>
+</div>

docs/docs/index.mdx

@@ -5,14 +5,15 @@ import Admonition from "@theme/Admonition";
 
 # 👋 Welcome to Langflow
 
-Langflow is a new, visual way to build, iterate, and deploy AI applications.
+Langflow is a new, visual framework for building multi-agent and RAG applications. It is open-source, Python-powered, fully customizable, LLM and vector store agnostic.
 
 Its intuitive interface allows for easy manipulation of AI building blocks, enabling developers to quickly prototype and turn their ideas into powerful, real-world solutions.
 
 {" "}
+{/* rsn */}
 
 <ZoomableImage
-  alt="Docusaurus themed image"
+  alt="Interactive guide on using LangFlow"
   sources={{
     light: "img/langflow_basic_howto.gif",
     dark: "img/langflow_basic_howto.gif",
@@ -26,18 +27,19 @@ Its intuitive interface allows for easy manipulation of AI building blocks, enab
 
 - [Quickstart](/getting-started/quickstart) - Create a flow and run it.
 
-- [Langflow Workspace](/getting-started/workspace) - Learn more about the Langflow workspace.
+- [Langflow Workspace](/getting-started/workspace) - Learn more about the Langflow Workspace.
 
 <Admonition type="info">
-  Langflow is also available in HuggingFace Spaces. [Clone the space
+  Langflow is also available in HuggingFace Spaces. [Clone the space using this
-  using this
   link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
-  to create your own Langflow workspace in minutes.
+  to run your own Langflow instance in minutes.
 </Admonition>
 
 ## Learn more about Langflow 1.0
 
 Learn more about the exciting changes in Langflow 1.0, and how to migrate your existing Langflow projects.
 
+{/* rsn */}
+
 - [A new chapter for Langflow](/whats-new/a-new-chapter-langflow)
 - [Migration guides](/migration/migrating-to-one-point-zero)