jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

docs: Promote MCP content in the left nav and revise the MCP connection component docs (#8567)

Browse source 
* related links and nav change

* create mcp client page and condense mcp tool info

* rewrite mcp client content

* add mcp to the welcome page

* tweak text regarding modes

* small style edits

* minor edit
This commit is contained in:
April I. Murphy 2025-06-20 09:33:41 -07:00 • committed by GitHub
commit 0e42f0dd09
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 154 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

108
docs/docs/Components/components-tools.md
View file

@ -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>

101
docs/docs/Components/mcp-client.md Normal file
View file

@ -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)

24
docs/docs/Concepts/concepts-components.md
View file

@ -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

19
docs/docs/Concepts/mcp-server.md
View file

@ -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)

11
docs/docs/Get-Started/welcome-to-langflow.md
View file

@ -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)

8
docs/docs/Integrations/mcp-component-astra.md
View file

@ -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](/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-tools#mcp-connection) to connect
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](/components-tools#mcp-connection) component.
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)
@ -61,4 +61,4 @@ The flow should look like this:
load_collection
nvidia_collection
software_requirements
```
```

9
docs/sidebars.js
View file

@ -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,14 @@ module.exports = {
"Agents/agent-tool-calling-agent-component",
],
},
{
type: "category",
label: "Model Context Protocol (MCP)",
items: [
"Concepts/mcp-server",
"Components/mcp-client",
],
},
{
type: "category",
label: "Configuration",