diff --git a/docs/docs/Components/components-tools.md b/docs/docs/Components/components-tools.md index 6aea6f74b..e5a7cd410 100644 --- a/docs/docs/Components/components-tools.md +++ b/docs/docs/Components/components-tools.md @@ -309,17 +309,17 @@ This component allows you to call the Serper.dev Google Search API. -## 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 to retrieve the server's list of **Tools**. +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 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) ::: diff --git a/docs/docs/Concepts/mcp-server.md b/docs/docs/Concepts/mcp-server.md index 15ac36d13..dfa229f65 100644 --- a/docs/docs/Concepts/mcp-server.md +++ b/docs/docs/Concepts/mcp-server.md @@ -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. diff --git a/docs/docs/Integrations/mcp-component-astra.md b/docs/docs/Integrations/mcp-component-astra.md index 96dbedab8..44e930b9a 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 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. diff --git a/docs/static/img/component-mcp-astra-db.png b/docs/static/img/component-mcp-astra-db.png index 87a8afc89..45fa97fbc 100644 Binary files a/docs/static/img/component-mcp-astra-db.png and b/docs/static/img/component-mcp-astra-db.png differ diff --git a/docs/static/img/component-mcp-sse-mode.png b/docs/static/img/component-mcp-sse-mode.png index 56e6d4f81..71b8419d0 100644 Binary files a/docs/static/img/component-mcp-sse-mode.png and b/docs/static/img/component-mcp-sse-mode.png differ diff --git a/docs/static/img/component-mcp-stdio.png b/docs/static/img/component-mcp-stdio.png index 106210aeb..14d31b56c 100644 Binary files a/docs/static/img/component-mcp-stdio.png and b/docs/static/img/component-mcp-stdio.png differ