From 7798a60601ac4b52c1c098842fd4cecb83956f16 Mon Sep 17 00:00:00 2001 From: April M Date: Mon, 16 Jun 2025 14:34:27 -0700 Subject: [PATCH 1/7] related links and nav change --- docs/docs/Concepts/mcp-server.md | 7 ++++++- docs/docs/Integrations/mcp-component-astra.md | 2 +- docs/sidebars.js | 8 +++++++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/docs/docs/Concepts/mcp-server.md b/docs/docs/Concepts/mcp-server.md index b5ef46878cb1..5012ef331cde 100644 --- a/docs/docs/Concepts/mcp-server.md +++ b/docs/docs/Concepts/mcp-server.md @@ -346,4 +346,9 @@ To find your NPX path, run `which npx`. } ``` - \ No newline at end of file + + +## See also + +- [MCP connection component](../Components/components-tools.md#mcp-connection) +- [Use a DataStax Astra DB MCP server](../Integrations/mcp-component-astra.md) \ No newline at end of file diff --git a/docs/docs/Integrations/mcp-component-astra.md b/docs/docs/Integrations/mcp-component-astra.md index 44e930b9aab5..ce291ec677d3 100644 --- a/docs/docs/Integrations/mcp-component-astra.md +++ b/docs/docs/Integrations/mcp-component-astra.md @@ -61,4 +61,4 @@ The flow should look like this: load_collection nvidia_collection software_requirements - ``` + ``` \ No newline at end of file diff --git a/docs/sidebars.js b/docs/sidebars.js index c60ea822d837..b5167b902187 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -41,7 +41,6 @@ module.exports = { "Concepts/concepts-objects", "Concepts/concepts-publish", "Concepts/embedded-chat-widget", - "Concepts/mcp-server", "Concepts/concepts-file-management", "Concepts/concepts-voice-mode", ], @@ -74,6 +73,13 @@ module.exports = { "Agents/agent-tool-calling-agent-component", ], }, + { + type: "category", + label: "Model Context Protocol (MCP)", + items: [ + "Concepts/mcp-server", + ], + }, { type: "category", label: "Configuration", From 181a3db83320d3c2e9985015c74d5781dc7b837b Mon Sep 17 00:00:00 2001 From: April M Date: Mon, 16 Jun 2025 15:05:44 -0700 Subject: [PATCH 2/7] create mcp client page and condense mcp tool info --- docs/docs/Components/components-tools.md | 108 +----------------- docs/docs/Components/mcp-client.md | 14 +++ docs/docs/Concepts/mcp-server.md | 10 +- docs/docs/Integrations/mcp-component-astra.md | 4 +- docs/sidebars.js | 1 + 5 files changed, 28 insertions(+), 109 deletions(-) create mode 100644 docs/docs/Components/mcp-client.md diff --git a/docs/docs/Components/components-tools.md b/docs/docs/Components/components-tools.md index 93cb0250217d..30cd8f0ec03c 100644 --- a/docs/docs/Components/components-tools.md +++ b/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 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 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. - -
-Parameters - -**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. | - -
+The **MCP Tools (stdio)** and **MCP Tools (SSE)** components were deprecated in 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. | - - -## 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) -::: - + \ No newline at end of file diff --git a/docs/docs/Components/mcp-client.md b/docs/docs/Components/mcp-client.md new file mode 100644 index 000000000000..a3f026f8602e --- /dev/null +++ b/docs/docs/Components/mcp-client.md @@ -0,0 +1,14 @@ +--- +title: Use Langflow as an MCP client +slug: /mcp-server +--- + +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. + +For information about using Langflow as an MCP server, see [Use Langflow as an MCP server](../Concepts/mcp-server.md). \ No newline at end of file diff --git a/docs/docs/Concepts/mcp-server.md b/docs/docs/Concepts/mcp-server.md index 5012ef331cde..2e982b9d1aa8 100644 --- a/docs/docs/Concepts/mcp-server.md +++ b/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,8 +8,10 @@ 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). + +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](../Components/mcp-client.md). 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. @@ -350,5 +352,5 @@ To find your NPX path, run `which npx`. ## See also -- [MCP connection component](../Components/components-tools.md#mcp-connection) +- [Use Langflow as an MCP client](../Components/mcp-client.md) - [Use a DataStax Astra DB MCP server](../Integrations/mcp-component-astra.md) \ No newline at end of file diff --git a/docs/docs/Integrations/mcp-component-astra.md b/docs/docs/Integrations/mcp-component-astra.md index ce291ec677d3..8c778490a20f 100644 --- a/docs/docs/Integrations/mcp-component-astra.md +++ b/docs/docs/Integrations/mcp-component-astra.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import Icon from "@site/src/components/icon"; -Use the [MCP connection component](/components-tools#mcp-connection) to connect Langflow to a [Datastax Astra DB MCP server](https://github.com/datastax/astra-db-mcp). +Use the [MCP connection component](../Components/mcp-client.md) to connect Langflow to a [Datastax Astra DB MCP server](https://github.com/datastax/astra-db-mcp). 1. Install an LTS release of [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). @@ -19,7 +19,7 @@ Use the [MCP connection component](/components-tools#mcp-connection) to connect 5. Create a [Simple agent starter project](/starter-projects-simple-agent). -6. Remove the **URL** tool and replace it with an [MCP connection](/components-tools#mcp-connection) component. +6. Remove the **URL** tool and replace it with an [MCP connection component](../Components/mcp-client.md). The flow should look like this: ![MCP connection component connecting to Astra](/img/component-mcp-astra-db.png) diff --git a/docs/sidebars.js b/docs/sidebars.js index b5167b902187..8087c19c8514 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -78,6 +78,7 @@ module.exports = { label: "Model Context Protocol (MCP)", items: [ "Concepts/mcp-server", + "Components/mcp-client", ], }, { From 12683e9c6c088369512a79a0d9b3a8f7ed0148c8 Mon Sep 17 00:00:00 2001 From: April M Date: Mon, 16 Jun 2025 16:43:30 -0700 Subject: [PATCH 3/7] rewrite mcp client content --- docs/docs/Components/mcp-client.md | 92 ++++++++++++++++++- docs/docs/Concepts/concepts-components.md | 25 +++-- docs/docs/Concepts/mcp-server.md | 8 +- docs/docs/Integrations/mcp-component-astra.md | 10 +- 4 files changed, 114 insertions(+), 21 deletions(-) diff --git a/docs/docs/Components/mcp-client.md b/docs/docs/Components/mcp-client.md index a3f026f8602e..a66c46f148ad 100644 --- a/docs/docs/Components/mcp-client.md +++ b/docs/docs/Components/mcp-client.md @@ -1,6 +1,6 @@ --- title: Use Langflow as an MCP client -slug: /mcp-server +slug: /mcp-client --- import Tabs from '@theme/Tabs'; @@ -9,6 +9,92 @@ 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. +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](../Concepts/mcp-server.md). \ No newline at end of file +For information about using Langflow as an MCP server, see [Use Langflow as an MCP server](/mcp-server). + +## 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). + +In addition to serving external MCP servers, you can use the component in [SSE mode](#mcp-sse-mode) to make all flows within your [project](/concepts-overview#projects) available as tools within a flow. + +### Use the MCP connection component with an Agent component (Stdio mode) + +1. Add an **MCP connection** component to your flow. + +2. Make sure **Stdio** mode is selected. + +3. 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). + +4. 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). + ::: + +5. Click to test the command and retrieve the list of tools provided by the MCP server. + +6. 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. + +7. In the [component menu](/concepts-components#component-menu), enable **Tool mode** so you can use the component with an agent. + +8. 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) + +9. 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. + +10. 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 the MCP connection component in Server-Sent Events (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 **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 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) \ No newline at end of file diff --git a/docs/docs/Concepts/concepts-components.md b/docs/docs/Concepts/concepts-components.md index a20e54ddb2e6..c2a35f476683 100644 --- a/docs/docs/Concepts/concepts-components.md +++ b/docs/docs/Concepts/concepts-components.md @@ -15,25 +15,32 @@ 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. -Open AI component +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: +OpenAI component with the component menu visible -- **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: -Click **All** to see additional options for a component. +- **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. +- **All**: See additional options for a component. + +## Component logs To view a component's output and logs, click the icon. +## Run one component + To run a single component, click **Play**. -A **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 **Checkmark** indicates that the component ran successfully. ## Component ports diff --git a/docs/docs/Concepts/mcp-server.md b/docs/docs/Concepts/mcp-server.md index 2e982b9d1aa8..6d1a900f4fe1 100644 --- a/docs/docs/Concepts/mcp-server.md +++ b/docs/docs/Concepts/mcp-server.md @@ -11,13 +11,13 @@ Langflow integrates with the [Model Context Protocol (MCP)](https://modelcontext 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](../Components/mcp-client.md). +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 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). @@ -352,5 +352,5 @@ To find your NPX path, run `which npx`. ## See also -- [Use Langflow as an MCP client](../Components/mcp-client.md) -- [Use a DataStax Astra DB MCP server](../Integrations/mcp-component-astra.md) \ No newline at end of file +- [Use Langflow as an MCP client](/mcp-client) +- [Use a DataStax Astra DB MCP server](/mcp-component-astra) \ No newline at end of file diff --git a/docs/docs/Integrations/mcp-component-astra.md b/docs/docs/Integrations/mcp-component-astra.md index 8c778490a20f..a61125b22ed7 100644 --- a/docs/docs/Integrations/mcp-component-astra.md +++ b/docs/docs/Integrations/mcp-component-astra.md @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import Icon from "@site/src/components/icon"; -Use the [MCP connection component](../Components/mcp-client.md) to connect Langflow to a [Datastax Astra DB MCP server](https://github.com/datastax/astra-db-mcp). +Use the [MCP connection component](/mcp-client) to connect Langflow to a [Datastax Astra DB MCP server](https://github.com/datastax/astra-db-mcp). 1. Install an LTS release of [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). @@ -17,9 +17,9 @@ Use the [MCP connection component](../Components/mcp-client.md) to connect Langf 4. Get your database's **Astra DB API endpoint** and an **Astra DB application token** with the Database Administrator role. For more information, see [Generate an application token for a database](https://docs.datastax.com/en/astra-db-serverless/administration/manage-application-tokens.html#database-token). -5. Create a [Simple agent starter project](/starter-projects-simple-agent). +5. Create a [Simple agent starter project](/starter-projects-simple-agent) if you want to follow along with this guide. Otherwise, you can use an existing flow or create a new, blank flow. -6. Remove the **URL** tool and replace it with an [MCP connection component](../Components/mcp-client.md). +6. Remove the **URL** tool, and then replace it with an [MCP connection component](/mcp-client). The flow should look like this: ![MCP connection component connecting to Astra](/img/component-mcp-astra-db.png) @@ -48,9 +48,9 @@ The flow should look like this: ASTRA_DB_API_ENDPOINT=https://...-us-east-2.apps.astra.datastax.com ``` -10. In the **Agent** component, add your **OpenAI API key**. +10. In the **Agent** component, add your **OpenAI API key**. -11. Open the **Playground**, and then ask the agent, `What collections are available?` +11. Open the **Playground**, and then ask the agent, `What collections are available?` Since Langflow is connected to your Astra DB database through the MCP, the agent chooses the correct tool and connects to your database to retrieve the answer. From c82e44e4bcf30cb64e469ad0b9369a39f0c3015d Mon Sep 17 00:00:00 2001 From: April M Date: Mon, 16 Jun 2025 16:46:07 -0700 Subject: [PATCH 4/7] add mcp to the welcome page --- docs/docs/Get-Started/welcome-to-langflow.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/docs/Get-Started/welcome-to-langflow.md b/docs/docs/Get-Started/welcome-to-langflow.md index c93f39a3a087..f5197d0c8e5a 100644 --- a/docs/docs/Get-Started/welcome-to-langflow.md +++ b/docs/docs/Get-Started/welcome-to-langflow.md @@ -17,12 +17,16 @@ 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 @@ -30,10 +34,9 @@ Join Langflow's vibrant community of developers and AI enthusiasts. See the foll * [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) \ No newline at end of file From faa6b55b5278b5b079f9a93820380240b5e8b1bb Mon Sep 17 00:00:00 2001 From: April M Date: Mon, 16 Jun 2025 17:05:46 -0700 Subject: [PATCH 5/7] tweak text regarding modes --- docs/docs/Components/mcp-client.md | 31 +++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/docs/docs/Components/mcp-client.md b/docs/docs/Components/mcp-client.md index a66c46f148ad..240bf0680a36 100644 --- a/docs/docs/Components/mcp-client.md +++ b/docs/docs/Components/mcp-client.md @@ -13,25 +13,26 @@ This page describes how to use Langflow as an MCP client with the **MCP connecti For information about using Langflow as an MCP server, see [Use Langflow as an MCP server](/mcp-server). -## MCP connection component +## 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). -In addition to serving external MCP servers, you can use the component in [SSE mode](#mcp-sse-mode) to make all flows within your [project](/concepts-overview#projects) available as tools within a flow. +This component has two modes, depending on the type of server you want to access: -### Use the MCP connection component with an Agent component (Stdio mode) +* 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). -1. Add an **MCP connection** component to your flow. +### Use Stdio mode {#mcp-stdio-mode} -2. Make sure **Stdio** mode is selected. +1. Add an **MCP connection** component to your flow. -3. 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`. +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). -4. 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). +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. @@ -39,33 +40,33 @@ In addition to serving external MCP servers, you can use the component in [SSE m For more information, see [global variables](/configuration-global-variables). ::: -5. Click to test the command and retrieve the list of tools provided by the MCP server. +4. Click to test the command and retrieve the list of tools provided by the MCP server. -6. 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. +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. -7. In the [component menu](/concepts-components#component-menu), enable **Tool mode** so you can use the component with an agent. +6. In the [component menu](/concepts-components#component-menu), enable **Tool mode** so you can use the component with an agent. -8. Connect the **MCP connection** component's **Toolset** port to an **Agent** component's **Tools** port. +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) -9. 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. +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. -10. 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. +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 the MCP connection component in Server-Sent Events (SSE) mode {#mcp-sse-mode} +### 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 **SSE** mode to connect to a project's `/api/v1/mcp/sse` endpoint: +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. From 3f1ee9bfd3052ece9d68e34eccd3d54b0ab03e2d Mon Sep 17 00:00:00 2001 From: April M Date: Tue, 17 Jun 2025 07:34:10 -0700 Subject: [PATCH 6/7] small style edits --- docs/docs/Components/components-tools.md | 2 +- docs/docs/Components/mcp-client.md | 8 ++++---- docs/docs/Concepts/concepts-components.md | 2 +- docs/docs/Concepts/mcp-server.md | 2 +- docs/docs/Integrations/mcp-component-astra.md | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/docs/Components/components-tools.md b/docs/docs/Components/components-tools.md index 30cd8f0ec03c..285bf0f54bb7 100644 --- a/docs/docs/Components/components-tools.md +++ b/docs/docs/Components/components-tools.md @@ -315,7 +315,7 @@ The **MCP connection** component exposes Model Context Protocol (MCP) servers, i ### MCP Tools (deprecated) -The **MCP Tools (stdio)** and **MCP Tools (SSE)** components were deprecated in Langflow version 1.3. +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 diff --git a/docs/docs/Components/mcp-client.md b/docs/docs/Components/mcp-client.md index 240bf0680a36..f205c2d5f1d0 100644 --- a/docs/docs/Components/mcp-client.md +++ b/docs/docs/Components/mcp-client.md @@ -42,11 +42,11 @@ This component has two modes, depending on the type of server you want to access 4. Click 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. +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. + 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. @@ -73,7 +73,7 @@ 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 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. +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) @@ -87,7 +87,7 @@ In SSE mode, all flows available from the targeted server are treated as tools. | 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` +| 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** diff --git a/docs/docs/Concepts/concepts-components.md b/docs/docs/Concepts/concepts-components.md index c2a35f476683..41276af7f90f 100644 --- a/docs/docs/Concepts/concepts-components.md +++ b/docs/docs/Concepts/concepts-components.md @@ -40,7 +40,7 @@ To run a single component, click * 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 **Checkmark** indicates that the component ran successfully. +A **Checkmark** indicates that the component ran successfully. ## Component ports diff --git a/docs/docs/Concepts/mcp-server.md b/docs/docs/Concepts/mcp-server.md index 6d1a900f4fe1..d787c8019765 100644 --- a/docs/docs/Concepts/mcp-server.md +++ b/docs/docs/Concepts/mcp-server.md @@ -13,7 +13,7 @@ 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 use to take actions. +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 diff --git a/docs/docs/Integrations/mcp-component-astra.md b/docs/docs/Integrations/mcp-component-astra.md index a61125b22ed7..70041f1ee4f0 100644 --- a/docs/docs/Integrations/mcp-component-astra.md +++ b/docs/docs/Integrations/mcp-component-astra.md @@ -48,9 +48,9 @@ The flow should look like this: ASTRA_DB_API_ENDPOINT=https://...-us-east-2.apps.astra.datastax.com ``` -10. In the **Agent** component, add your **OpenAI API key**. +10. In the **Agent** component, add your **OpenAI API key**. -11. Open the **Playground**, and then ask the agent, `What collections are available?` +11. Open the **Playground**, and then ask the agent, `What collections are available?` Since Langflow is connected to your Astra DB database through the MCP, the agent chooses the correct tool and connects to your database to retrieve the answer. From 92cb365575db00f42b447eb31914d7bd188f27ad Mon Sep 17 00:00:00 2001 From: April M Date: Fri, 20 Jun 2025 09:23:10 -0700 Subject: [PATCH 7/7] minor edit --- docs/docs/Concepts/concepts-components.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/docs/Concepts/concepts-components.md b/docs/docs/Concepts/concepts-components.md index 41276af7f90f..66d0b44b43fc 100644 --- a/docs/docs/Concepts/concepts-components.md +++ b/docs/docs/Concepts/concepts-components.md @@ -28,7 +28,8 @@ You can use the controls in the **Component menu** to manage and configure the c - **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. -- **All**: See additional options for a component. + +Click **All** to see additional options for a component. ## Component logs