docs: mcp component name update (#8013)

* update-name-and-screenshots

* links

* update-astradb-screenshot

* sentence-case

* additional-linkfixes
This commit is contained in:
Mendon Kissling 2025-05-14 13:16:10 -04:00 committed by GitHub
commit b78d021516
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 21 additions and 21 deletions

View file

@ -309,17 +309,17 @@ This component allows you to call the Serper.dev Google Search API.
</details>
## MCP server
## MCP connection
This 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 connects to a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server and exposes the MCP server's tools as tools for Langflow agents.
In addition to being an MCP client that can leverage MCP servers, the MCP 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.
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.
To use the MCP server component with an agent component, follow these steps:
To use the **MCP connection** component with an agent component, follow these steps:
1. Add the MCP server component to your workflow.
1. Add the **MCP connection** component to your workflow.
2. In the MCP server 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:
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
@ -347,11 +347,11 @@ To use the MCP server component with an agent component, follow these steps:
The available fields change based on the selected tool.
For information on the parameters, see the MCP server's documentation.
5. In the MCP server component, enable **Tool mode**.
Connect the MCP server component's **Toolset** port to an **Agent** component's **Tools** port.
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 server component](/img/component-mcp-stdio.png)
![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.
@ -368,16 +368,16 @@ If you're using **Langflow for Desktop**, the default address is `http://127.0.0
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 Server** component, select **SSE**.
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 Server** component, click <Icon name="RefreshCw" aria-label="Refresh"/> to retrieve the server's list of **Tools**.
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 Server** component to an agent component's tool port.
5. Enable **Tool Mode**, and then connect the **MCP connection** component to an agent component's tool port.
The flow looks like this:
![MCP server component](/img/component-mcp-sse-mode.png)
![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.
@ -628,13 +628,13 @@ Deprecated components have been replaced by newer alternatives and should not be
### MCP Tools (stdio)
:::important
This component is deprecated as of Langflow version 1.3.
Instead, use the [MCP server component](/components-tools#mcp-server)
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 server component](/components-tools#mcp-server)
Instead, use the [MCP connection component](/components-tools#mcp-connection)
:::

View file

@ -9,7 +9,7 @@ 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 component](/components-tools#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.

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 server component](/components-tools#mcp-server) to connect Langflow to a [Datastax Astra DB MCP server](https://github.com/datastax/astra-db-mcp).
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).
1. Install an LTS release of [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
@ -19,18 +19,18 @@ Use the [MCP server component](/components-tools#mcp-server) to connect Langflow
5. Create a [Simple agent starter project](/starter-projects-simple-agent).
6. Remove the **URL** tool and replace it with an [MCP server](/components-tools#mcp-server) component.
6. Remove the **URL** tool and replace it with an [MCP connection](/components-tools#mcp-connection) component.
The flow should look like this:
![MCP stdio component connecting to Astra](/img/component-mcp-astra-db.png)
![MCP connection component connecting to Astra](/img/component-mcp-astra-db.png)
7. In the **MCP server** component, in the **MCP server** field, add the following code to connect to an Astra DB MCP server:
7. In the **MCP connection** component, in the **MCP server** field, add the following code to connect to an Astra DB MCP server:
```bash
npx -y @datastax/astra-db-mcp
```
8. In the **MCP server** component, in the **Env** fields, add variables for `ASTRA_DB_APPLICATION_TOKEN` and `ASTRA_DB_API_ENDPOINT` with the values from your Astra database.
8. In the **MCP connection** component, in the **Env** fields, add variables for `ASTRA_DB_APPLICATION_TOKEN` and `ASTRA_DB_API_ENDPOINT` with the values from your Astra database.
:::important
Langflow passes environment variables from the `.env` file to MCP, but not global variables declared in the UI.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 991 KiB

After

Width:  |  Height:  |  Size: 1 MiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 859 KiB

After

Width:  |  Height:  |  Size: 971 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1,019 KiB

After

Width:  |  Height:  |  Size: 954 KiB

Before After
Before After