docs: Promote MCP content in the left nav and revise the MCP connection component docs

docs/docs/Components/components-tools.md

@@ -311,92 +311,12 @@ This component allows you to call the Serper.dev Google Search API.
 
 ## MCP connection
 
-The **MCP connection** component connects to a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server and exposes the MCP server's tools as tools for Langflow agents.
+The **MCP connection** component exposes Model Context Protocol (MCP) servers, including your other flows, as tools for Langflow agents. For information about this component, see [Use Langflow as an MCP client](/mcp-client).
 
-In addition to being an MCP client that can leverage MCP servers, the **MCP connection** component's [SSE mode](#mcp-sse-mode) allows you to connect your flow to the Langflow MCP server at the `/api/v1/mcp/sse` API endpoint, exposing all flows within your [project](/concepts-overview#projects) as tools within a flow.
+### MCP Tools (deprecated)
 
-To use the **MCP connection** component with an agent component, follow these steps:
-
-1. Add the **MCP connection** component to your workflow.
-
-2. In the **MCP connection** component, in the **MCP Command** field, enter the command to start your MCP server. For example, to start a [Fetch](https://github.com/modelcontextprotocol/servers/tree/main/src/fetch) server, the command is:
-
-    ```bash
-    uvx mcp-server-fetch
-    ```
-
-    `uvx` is included with `uv` in the Langflow package.
-    To use `npx` server commands, you must first install an LTS release of [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
-    For an example of starting `npx` MCP servers, see [Connect an Astra DB MCP server to Langflow](/mcp-component-astra).
-
-    To include environment variables with your server command, add them to the **Env** field like this:
-
-    ```bash
-    ASTRA_DB_APPLICATION_TOKEN=AstraCS:...
-    ```
-
-    :::important
-    Langflow passes environment variables from the `.env` file to MCP, but not global variables declared in the UI.
-    To add a value for an environment variable as a global variable, add it to Langflow's `.env` file at startup.
-    For more information, see [global variables](/configuration-global-variables).
-    :::
-
-3. Click <Icon name="RefreshCw" aria-label="Refresh"/> to get the server's list of **Tools**.
-
-4. In the **Tool** field, select the server tool you want the component to use.
-The available fields change based on the selected tool.
-For information on the parameters, see the MCP server's documentation.
-
-5. In the **MCP connection** component, enable **Tool mode**.
-Connect the **MCP connection** component's **Toolset** port to an **Agent** component's **Tools** port.
-
-    The flow looks similar to this:
-    ![MCP connection component](/img/component-mcp-stdio.png)
-
-6. Open the **Playground**.
-Ask the agent to summarize recent tech news. The agent calls the MCP server function `fetch` and returns the summary.
-This confirms the MCP server is connected, and its tools are being used in Langflow.
-
-For more information, see [MCP server](/mcp-server).
-
-### MCP Server-Sent Events (SSE) mode {#mcp-sse-mode}
-
-:::important
-If you're using **Langflow for Desktop**, the default address is `http://localhost:7868/`.
-:::
-
-The MCP component's SSE mode connects your flow to the Langflow MCP server through the component.
-This allows you to use all flows within your [project](/concepts-overview#projects) as tools within a flow.
-
-1. In the **MCP connection** component, select **SSE**.
-A default address appears in the **MCP SSE URL** field.
-2. In the **MCP SSE URL** field, modify the default address to point at the SSE endpoint of the Langflow server you're currently running.
-The default value is `http://localhost:7860/api/v1/mcp/sse`.
-3. In the **MCP connection** component, click <Icon name="RefreshCw" aria-label="Refresh"/> to retrieve the server's list of **Tools**.
-4. Click the **Tools** field.
-All of your flows are listed as tools.
-5. Enable **Tool Mode**, and then connect the **MCP connection** component to an agent component's tool port.
-The flow looks like this:
-![MCP component with SSE mode enabled](/img/component-mcp-sse-mode.png)
-6. Open the **Playground** and chat with your tool.
-The agent chooses the correct tool based on your query.
-
-<details>
-<summary>Parameters</summary>
-
-**Inputs**
-
-| Name | Type | Description |
-|------|------|-------------|
-| command | String | The MCP command. Default: `uvx mcp-sse-shim@latest`. |
-
-**Outputs**
-
-| Name | Type | Description |
-|------|------|-------------|
-| tools | List[Tool] | A list of tools exposed by the MCP server. |
-
-</details>
+The **MCP Tools (stdio)** and **MCP Tools (SSE)** components are deprecated as of Langflow version 1.3.
+They are replaced by the [MCP connection component](/mcp-client).
 
 ## Wikidata
 
@@ -619,22 +539,4 @@ This component creates a tool for searching and retrieving information from Wiki
 | results | List[Data] | A list of Wikipedia search results. |
 | tool | Tool | A Wikipedia search tool for use in LangChain. |
 
-</details>
-
-## Deprecated components
-
-Deprecated components have been replaced by newer alternatives and should not be used in new projects.
-
-### MCP Tools (stdio)
-:::important
-This component is deprecated as of Langflow version 1.3.
-Instead, use the [MCP connection component](/components-tools#mcp-connection)
-:::
-
-
-### MCP Tools (SSE)
-:::important
-This component is deprecated as of Langflow version 1.3.
-Instead, use the [MCP connection component](/components-tools#mcp-connection)
-:::
-
+</details>

docs/docs/Components/mcp-client.md

@@ -0,0 +1,101 @@
+---
+title:  Use Langflow as an MCP client
+slug: /mcp-client
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import Icon from "@site/src/components/icon";
+
+Langflow integrates with the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) as both an MCP server and an MCP client.
+
+This page describes how to use Langflow as an MCP client with the **MCP connection** component.
+
+For information about using Langflow as an MCP server, see [Use Langflow as an MCP server](/mcp-server).
+
+## Use the MCP connection component
+
+The **MCP connection** component connects to a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server and exposes the MCP server's tools as tools for [Langflow agents](/agents-overview).
+
+This component has two modes, depending on the type of server you want to access:
+
+* To access tools provided by external, non-Langflow MCP servers, [use Stdio mode](#mcp-stdio-mode).
+* To use flows from your [Langflow projects](/concepts-overview#projects) as MCP tools, [use SSE mode](#mcp-sse-mode).
+
+### Use Stdio mode {#mcp-stdio-mode}
+
+1. Add an **MCP connection** component to your flow.
+
+2. In the **MCP Command** field, enter the command to start the MCP server. For example, to start a [Fetch](https://github.com/modelcontextprotocol/servers/tree/main/src/fetch) server, the command is `uvx mcp-server-fetch`.
+
+    `uvx` is included with `uv` in the Langflow package.
+    To use `npx` server commands, you must first install an LTS release of [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
+    For an example of an `npx` MCP server in Langflow, see [Connect an Astra DB MCP server to Langflow](/mcp-component-astra).
+
+3. To use environment variables in your server command, enter each variable in the **Env** fields as you would define them in a script, such as `VARIABLE=value`. If the **Env** field isn't shown, enable it in the component's **Controls** in the [component menu](/concepts-components#component-menu).
+
+    :::important
+    Langflow passes environment variables from the `.env` file to MCP, but it doesn't pass  global variables declared in the Langflow UI.
+    To define an MCP server environment variable as a global variable, add it to Langflow's `.env` file at startup.
+    For more information, see [global variables](/configuration-global-variables).
+    :::
+
+4. Click <Icon name="RefreshCw" aria-label="Refresh"/> to test the command and retrieve the list of tools provided by the MCP server.
+
+5. In the **Tool** field, select a tool that you want this component to use, or leave the field blank to allow access to all tools provided by the MCP server.
+
+    If you select a specific tool, you might need to configure additional tool-specific fields. For information about tool-specific fields, see your MCP server's documentation.
+
+    At this point, the **MCP connection** component is serving a tool, but nothing is using the tool. The next steps explain how to make the tool available to an [**Agent** component](/components-agents) so that the agent can use the tool in its responses.
+
+6. In the [component menu](/concepts-components#component-menu), enable **Tool mode** so you can use the component with an agent.
+
+7. Connect the **MCP connection** component's **Toolset** port to an **Agent** component's **Tools** port.
+
+    If not already present in your flow, make sure you also attach **Chat input** and **Chat output** components to the **Agent** component.
+
+    ![MCP connection component](/img/component-mcp-stdio.png)
+
+8.  Test your flow to make sure the MCP server is connected and the selected tool is used by the agent: Click **Playground**, and then enter a prompt that uses the tool you connected through the **MCP connection** component.
+For example, if you use `mcp-server-fetch` with the `fetch` tool, you could ask the agent to summarize recent tech news. The agent calls the MCP server function `fetch`, and then returns the response.
+
+1. If you want the agent to be able to use more tools, repeat these steps to add more **MCP connection** components with different servers or tools.
+
+### Use SSE mode {#mcp-sse-mode}
+
+Every Langflow project runs a separate MCP server that exposes the project's flows as MCP tools.
+For more information about your projects' MCP servers, including how to manage exposed flows, see [Use Langflow as an MCP server](/mcp-server).
+
+To leverage flows-as-tools, use the **MCP connection** component in **Server-Sent Events (SSE)** mode to connect to a project's `/api/v1/mcp/sse` endpoint:
+
+1. Add an **MCP connection** component to your flow, and then select **SSE** mode.
+A default address appears in the **MCP SSE URL** field.
+1. In the **MCP SSE URL** field, modify the default address to point at your Langflow server's SSE endpoint. The default value for Langflow Desktop is `http://localhost:7868/`. The default value for other Langflow installations is `http://localhost:7860/api/v1/mcp/sse`.
+1. Click <Icon name="RefreshCw" aria-label="Refresh"/> to test the endpoint and refresh the **Tools** list.
+In SSE mode, all flows available from the targeted server are treated as tools.
+1. In the **Tool** field, select a flow that you want this component to use, or leave the field blank to allow access to all flows available from the targeted Langflow server.
+2. In the [component menu](/concepts-components#component-menu), enable **Tool mode** so you can use the component with an agent.
+3. Connect the **MCP connection** component's **Toolset** port to an **Agent** component's **Tools** port. If not already present in your flow, make sure you also attach **Chat input** and **Chat output** components to the **Agent** component.
+![MCP component with SSE mode enabled](/img/component-mcp-sse-mode.png)
+1. Test your flow to make sure the agent uses your flows to respond to queries: Click **Playground**, and then enter a prompt that uses a flow that you connected through the **MCP connection** component.
+2. If you want the agent to be able to use more flows, repeat these steps to add more **MCP connection** components with different servers or tools selected.
+
+## MCP connection component parameters
+
+**Inputs**
+
+| Name | Type | Description |
+|------|------|-------------|
+| command | String | Stdio mode only. The MCP server startup command. Default: `uvx mcp-sse-shim@latest`. |
+| sse_url | String | SSE mode only. The SSE URL for a Langflow project's MCP server. Default for Langflow Desktop: `http://localhost:7868/`. Default for other installations: `http://localhost:7860/api/v1/mcp/sse` |
+
+**Outputs**
+
+| Name | Type | Description |
+|------|------|-------------|
+| tools | List[Tool] | A list of tools exposed by the MCP server. |
+
+## See also
+
+- [Use Langflow as an MCP server](/mcp-server)
+- [Use a DataStax Astra DB MCP server with the MCP connection component](/mcp-component-astra)

docs/docs/Concepts/concepts-components.md

@@ -15,25 +15,33 @@ 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 the following:
+All components have a **Component menu** that contains meta settings for the component.
 
-<img src="/img/openai-model-component.png" alt="Open AI component" style={{display: 'block', margin: 'auto', width: 300}} />
+To access this menu for a specific component, select a component in a flow.
+The menu appears above the selected component.
 
-Use the component controls to do the following:
+<img src="/img/openai-model-component.png" alt="OpenAI component with the component menu visible" style={{display: 'block', margin: 'auto', width: 300}} />
 
-- **Code** — Modify the component's Python code and save your changes.
-- **Controls** — Adjust all component parameters.
-- **Freeze** — After a component runs, lock its previous output state to prevent it from re-running.
+You can use the controls in the **Component menu** to manage and configure the component on a high level, including the following actions:
+
+- **Code**: Modify the component settings by directly editing the component's Python code.
+- **Controls**: Adjust all component parameters, including optional settings that are hidden by default.
+- **Tool Mode**: Enable tool mode when combining a component with an agent component.
+- **Freeze**: 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.
 
+## Component logs
+
 To view a component's output and logs, click the <Icon name="TextSearch" aria-label="Inspect icon" /> icon.
 
+## Run one component
+
 To run a single component, click <Icon name="Play" aria-label="Play button" /> **Play**.
 
-A <Icon name="Check" aria-label="Checkmark" />**Checkmark** 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.
 
-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.
+A <Icon name="Check" aria-label="Checkmark" /> **Checkmark** indicates that the component ran successfully.
 
 ## Component ports
 

docs/docs/Concepts/mcp-server.md

@@ -1,5 +1,5 @@
 ---
-title: Model Context Protocol (MCP) server
+title:  Use Langflow as an MCP server
 slug: /mcp-server
 ---
 
@@ -8,14 +8,16 @@ import TabItem from '@theme/TabItem';
 import Icon from "@site/src/components/icon";
 
 Langflow integrates with the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) as both an MCP server and an MCP client.
-This page describes how to use Langflow as an *MCP server*.
-For information about using Langflow as an *MCP client*, see the [MCP connection component](/components-tools#mcp-connection).
 
-As an MCP server, Langflow exposes your flows as [tools](https://modelcontextprotocol.io/docs/concepts/tools) that [MCP clients](https://modelcontextprotocol.io/clients) can use use to take actions.
+This page describes how to use Langflow as an MCP server.
+
+For information about using Langflow as an MCP client, see [Use Langflow as an MCP client](/mcp-client).
+
+As an MCP server, Langflow exposes your flows as [tools](https://modelcontextprotocol.io/docs/concepts/tools) that [MCP clients](https://modelcontextprotocol.io/clients) can use to take actions.
 
 ## Prerequisites
 
-* A Langflow project with at least one flow created.
+* A Langflow project with at least one flow.
 
 * Any LTS version of [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) installed on your computer to use MCP Inspector to [test and debug flows](#test-and-debug-flows).
 
@@ -346,4 +348,9 @@ To find your NPX path, run `which npx`.
 }
 ```
   </TabItem>
-</Tabs>
+</Tabs>
+
+## See also
+
+- [Use Langflow as an MCP client](/mcp-client)
+- [Use a DataStax Astra DB MCP server](/mcp-component-astra)

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

@@ -17,23 +17,26 @@ Langflow is an intuitive visual flow builder. This drag-and-drop interface allow
 
 ## Use cases
 
-Langflow can be used for a wide range of AI applications, including:
+Langflow can be used for a wide range of AI applications.
+For example:
 
 * [Craft intelligent chatbots](/memory-chatbot)
 * [Build document analysis systems](/document-qa)
 * [Generate compelling content](/blog-writer)
 * [Orchestrate multi-agent applications](/starter-projects-simple-agent)
+* [Create agents with Langflow](/agents-overview)
+* [Use Langflow as an MCP server](/mcp-server)
+* [Use Langflow as an MCP client](/mcp-client)
 
 ## Community and support
 
 Join Langflow's vibrant community of developers and AI enthusiasts. See the following resources to join discussions, share your projects, and get support:
 
 * [Contribute to Langflow](contributing-how-to-contribute)
 * [Langflow Discord Server](https://discord.gg/EqksyE2EX9)
-* [@langflow_ai](https://twitter.com/langflow_ai) 
+* [@langflow_ai](https://twitter.com/langflow_ai)
 
 ## Get started with Langflow
 
 - [Install Langflow](/get-started-installation)
-- [Quickstart](/get-started-quickstart)
-
+- [Quickstart](/get-started-quickstart)