Skip to content

Commit c76aeb6

Browse files
authored
docs: mcp server component and integrations (langflow-ai#7286)
* mcp-server-component-update * update-image * step-number * more-content * astra-npx * mcp-see-mode-and-env-var * fix-build * docs-add-mcp-inspector * create-section-for-mcp * code-review
1 parent 37fc581 commit c76aeb6

8 files changed

+283
-113
lines changed

Diff for: docs/docs/Components/components-tools.md

+51-28
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ title: Tools
33
slug: /components-tools
44
---
55

6+
import Icon from "@site/src/components/icon";
7+
68
# Tool components in Langflow
79

810
Tools are typically connected to agent components at the **Tools** port. Agents use LLMs as a reasoning engine to decide which of the connected tool components to use to solve a problem.
@@ -261,25 +263,56 @@ This component allows you to call the Serper.dev Google Search API.
261263
| results | List[Data]| List of search results |
262264
| tool | Tool | Google Serper search tool for use in LangChain|
263265

264-
## MCP Tools (stdio)
265266

266-
This component connects to a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server over `stdio` and exposes its tools as Langflow tools to be used by an Agent component.
267+
## MCP server
267268

268-
To use the MCP stdio component, follow these steps:
269+
This component connects to a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server and exposes the MCP server's tools as tools.
269270

270-
1. Add the MCP stdio component to your workflow, and connect it to an agent. The flow looks like this:
271+
In addition to being an MCP client that can leverage MCP servers, Langflow is also an MCP server that exposes flows as tools through the `/api/v1/mcp/sse` API endpoint. For more information, see [MCP integrations](/integrations-mcp).
271272

272-
![MCP stdio component](/img/mcp-stdio-component.png)
273+
To use the MCP server component with an agent component, follow these steps:
273274

274-
2. In the MCP stdio component, in the **mcp command** field, enter the command to start your MCP server. For a [Fetch](https://github.com/modelcontextprotocol/servers/tree/main/src/fetch) server, the command is:
275+
1. Add the MCP server component to your workflow.
276+
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:
275277

276278
```bash
277279
uvx mcp-server-fetch
278280
```
279281

280-
3. Open the **Playground**.
282+
`uvx` is included with `uv` in the Langflow package.
283+
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).
284+
For an example of starting `npx` MCP servers, see [Connect an Astra DB MCP server to Langflow](/mcp-component-astra).
285+
286+
3. Click <Icon name="RefreshCw" aria-label="Refresh"/> to get the server's list of **Tools**.
287+
4. In the **Tool** field, select the server tool you want the component to use.
288+
The available fields change based on the selected tool.
289+
For information on the parameters, see the MCP server's documentation.
290+
5. In the MCP server component, enable **Tool mode**.
291+
Connect the MCP server component's **Toolset** port to an **Agent** component's **Tools** port.
292+
293+
The flow looks similar to this:
294+
![MCP server component](/img/mcp-server-component.png)
295+
296+
6. Open the **Playground**.
281297
Ask the agent to summarize recent tech news. The agent calls the MCP server function `fetch` and returns the summary.
282-
This confirms the MCP server is connected and working.
298+
This confirms the MCP server is connected, and its tools are being used in Langflow.
299+
300+
For more information, see [MCP integrations](/integrations-mcp).
301+
302+
### MCP Server-Sent Events (SSE) mode
303+
304+
1. In the **MCP Server** component, select **SSE**.
305+
A default address appears in the **MCP SSE URL** field.
306+
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.
307+
The default value is `http://localhost:7860/api/v1/mcp/sse`.
308+
3. In the **MCP Server** component, click <Icon name="RefreshCw" aria-label="Refresh"/> to retrieve the server's list of **Tools**.
309+
4. Click the **Tools** field.
310+
All of your flows are listed as tools.
311+
5. Enable **Tool Mode**, and then connect the **MCP Server** component to an agent component's tool port.
312+
The flow looks like this:
313+
![MCP server component](/img/mcp-server-component-sse.png)
314+
6. Open the **Playground** and chat with your tool.
315+
The agent chooses the correct tool based on your query.
283316

284317
### Inputs
285318

@@ -293,28 +326,18 @@ This confirms the MCP server is connected and working.
293326
|-------|-----------|-------------------------------------------|
294327
| tools | List[Tool]| List of tools exposed by the MCP server |
295328

296-
## MCP Tools (SSE)
297-
298-
This component connects to a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server over [SSE (Server-Sent Events)](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) and exposes its tools as Langflow tools to be used by an Agent component.
299-
300-
To use the MCP SSE component, follow these steps:
301-
302-
1. Add the MCP SSE component to your workflow, and connect it to an agent. The flow looks similar to the MCP stdio component flow.
303-
304-
2. In the MCP SSE component, in the **url** field, enter the URL of your current Langflow server's `mcp/sse` endpoint.
305-
This will fetch all currently available tools from the Langflow server.
306-
307-
### Inputs
308-
309-
| Name | Type | Description |
310-
|------|--------|------------------------------------------------------|
311-
| url | String | SSE URL (default: `http://localhost:7860/api/v1/mcp/sse`) |
329+
## MCP Tools (stdio)
330+
:::important
331+
This component is deprecated as of Langflow version 1.3.
332+
Instead, use the [MCP server component](/components-tools#mcp-server)
333+
:::
312334

313-
### Outputs
314335

315-
| Name | Type | Description |
316-
|-------|-----------|-------------------------------------------|
317-
| tools | List[Tool]| List of tools exposed by the MCP server |
336+
## MCP Tools (SSE)
337+
:::important
338+
This component is deprecated as of Langflow version 1.3.
339+
Instead, use the [MCP server component](/components-tools#mcp-server)
340+
:::
318341

319342
## Python Code Structured Tool
320343

Diff for: docs/docs/Integrations/MCP/integrations-mcp.md

+180
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
---
2+
title: Integrate Langflow with MCP
3+
slug: /integrations-mcp
4+
---
5+
6+
import Tabs from '@theme/Tabs';
7+
import TabItem from '@theme/TabItem';
8+
9+
Langflow integrates with the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction). This allows you to use your Langflow flows as tools in client applications that support the MCP, or extend Langflow with the [MCP server component](/components-tools#mcp-tools-stdio) to access MCP servers.
10+
11+
You can use Langflow as an MCP server with any [MCP client](https://modelcontextprotocol.io/clients).
12+
13+
For configuring interactions between Langflow flows and MCP tools, see [Name and describe your flows for agentic use](#name-and-describe-your-flows-for-agentic-use).
14+
15+
To connect [MCP Inspector](https://modelcontextprotocol.io/docs/tools/inspector) to Langflow for testing and debugging flows, see [Install MCP Inspector to test and debug flows](#install-mcp-inspector-to-test-and-debug-flows)
16+
17+
## Access all of your flows as tools
18+
19+
:::important
20+
Tool names must contain only letters, numbers, underscores, and dashes.
21+
Tool names cannot contain spaces.
22+
To re-name flows in the Langflow UI, click **Flow Name** > **Edit Details**.
23+
:::
24+
25+
Connect an MCP client to Langflow to use your flows as tools.
26+
27+
1. Install [Cursor](https://docs.cursor.com/) or [Claude for Desktop](https://claude.ai/download).
28+
2. Install [uv](https://docs.astral.sh/uv/getting-started/installation/) to run `uvx` commands. `uvx` is included with `uv` in the Langflow package.
29+
3. Optional: Install an LTS release of [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to run `npx` commands.
30+
For an example `npx` server, see [Connect an Astra DB MCP server to Langflow](/mcp-component-astra).
31+
4. Create at least one flow, and note your host. For example, `http://127.0.0.1:7860`.
32+
33+
<Tabs>
34+
<TabItem value="cursor" label="Cursor">
35+
36+
In Cursor, you can configure a Langflow server in the same way as other MCP servers.
37+
For more information, see the [Cursor MCP documentation](https://docs.cursor.com/context/model-context-protocol).
38+
39+
1. Open Cursor, and then go to **Cursor Settings**.
40+
2. Click MCP, and then click **Add New Global MCP Server**.
41+
Cursor's MCP servers are listed as JSON objects.
42+
3. To add a Langflow server, add an entry for your Langflow server's `/v1/mcp/sse` endpoint.
43+
This example assumes the default Langflow server address of `http://127.0.0.1:7860`.
44+
```json
45+
{
46+
"mcpServers": {
47+
"langflow": {
48+
"url": "http://127.0.0.1:7860/api/v1/mcp/sse"
49+
}
50+
}
51+
}
52+
```
53+
4. Save the `mcp.json` file, and then click the **Reload** icon.
54+
5. Your Langflow server is now available to Cursor as an MCP server, and all of its flows are registered as tools.
55+
You can now use your flows as tools in Cursor.
56+
Cursor determines when to use tools based on your queries, and will request permissions when necessary.
57+
58+
</TabItem>
59+
60+
<TabItem value="claude for desktop" label="Claude for Desktop">
61+
62+
In Claude for Desktop, you can configure a Langflow server in the same way as other MCP servers.
63+
For more information, see the [Claude for Desktop MCP documentation](https://modelcontextprotocol.io/quickstart/user).
64+
65+
1. Open Claude for Desktop, and then go to the program settings.
66+
For example, on the MacOS menu bar, click **Claude**, and then select **Settings**.
67+
2. In the **Settings** dialog, click **Developer**, and then click **Edit Config**.
68+
This creates a `claude_desktop_config.json` file if you don't already have one.
69+
3. Add the following code to `claude_desktop_config.json`.
70+
Your args may differ for your `uvx` and `Python` installations. To find the correct paths:
71+
72+
* For `uvx`: Run `which uvx` in your terminal
73+
* For Python: Run `which python` in your terminal
74+
75+
Replace `PATH/TO/PYTHON` with the Python path from your system.
76+
This command assumes the default Langflow server address of `http://127.0.0.1:7860`.
77+
78+
```json
79+
{
80+
"mcpServers": {
81+
"langflow": {
82+
"command": "/bin/sh",
83+
"args": ["-c", "uvx --python PATH/TO/PYTHON mcp-sse-shim@latest"],
84+
"env": {
85+
"MCP_HOST": "http://127.0.0.1:7860",
86+
"DEBUG": "true"
87+
}
88+
}
89+
}
90+
}
91+
```
92+
93+
This code adds a new MCP server called `langflow` and starts the [mcp-sse-shim](https://github.com/phact/mcp-sse-shim) package using the specified Python interpreter and uvx.
94+
95+
4. Restart Claude for Desktop.
96+
Your new tools are available in your chat window. Click the tools icon to see a list of your flows.
97+
98+
You can now use your flows as tools in Claude for Desktop.
99+
100+
Claude determines when to use tools based on your queries, and will request permissions when necessary.
101+
102+
103+
</TabItem>
104+
</Tabs>
105+
106+
## Name and describe your flows for agentic use
107+
108+
MCP clients like Claude for Desktop and Cursor "see" Langflow as a single MCP server, with **all** of your flows listed as tools.
109+
110+
This can confuse agents, who don't know that flow `adbbf8c7-0a34-493b-90ea-5e8b42f78b66` is a Document Q&A flow for a specific text file.
111+
To prevent this behavior, name and describe your flows clearly for agentic use. Imagine your names and descriptions as function names and code comments, with a clear statement of what problem they solve.
112+
113+
For example, you have created a [Document Q&A](/tutorials-document-qa) flow that loads a sample resume for an LLM to chat with, and you want Cursor to use the tool.
114+
115+
1. Click **Flow name**, and then select **Edit Details**.
116+
2. The **Name** field should make it clear what the flow does, both to a user and to the agent. For example, name it `Document QA for Resume`.
117+
3. The **Description** field should include a description of what the flow does. For example, describe the flow as `OpenAI LLM Chat with Alex's resume.`
118+
The **Endpoint Name** field does not affect the agent's behavior.
119+
4. To see how an MCP client understands your flow, in Cursor, examine the **MCP Servers**.
120+
The tool is listed as:
121+
```text
122+
document_qa_for_resume
123+
e967f47d-6783-4bab-b1ea-0aaa554194a3: OpenAI LLM Chat with Alex's resume.
124+
```
125+
Your flow name and description provided the agent with a clear purpose for the tool.
126+
127+
5. Ask Cursor a question specifically about the resume, such as `What job experience does Alex have?`
128+
```text
129+
I'll help you explore a resume using the Document QA for Resume flow, which is specifically designed for analyzing resumes.
130+
Let me call this tool.
131+
```
132+
6. Click **Run tool** to continue. The agent requests permissions when necessary.
133+
```
134+
Based on the resume, here's a comprehensive breakdown of the experience:
135+
```
136+
7. Ask about a different resume.
137+
You've provided enough information in the description for the agent to make the correct decision:
138+
```text
139+
I notice you're asking about Emily's job experience.
140+
Based on the available tools, I can see there is a Document QA for Resume flow that's designed for analyzing resumes.
141+
However, the description mentions it's for "Alex's resume" not Emily's. I don't have access to Emily's resume or job experience information.
142+
```
143+
144+
## Install MCP Inspector to test and debug flows
145+
146+
[MCP inspector](https://modelcontextprotocol.io/docs/tools/inspector) is the standard tool for testing and debugging MCP servers.
147+
148+
Use MCP Inspector to monitor your Langflow server's flows, and understand how they are being consumed by the MCP.
149+
150+
To install and run MCP inspector, follow these steps:
151+
152+
1. Install an LTS release of [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
153+
2. To install and start MCP inspector, in a terminal window, run the following command:
154+
```
155+
npx @modelcontextprotocol/inspector
156+
```
157+
158+
MCP inspector starts by default at `http://localhost:5173`.
159+
160+
:::tip
161+
Optionally, specify a proxy port when starting MCP Inspector:
162+
```
163+
SERVER_PORT=9000 npx -y @modelcontextprotocol/inspector
164+
```
165+
:::
166+
167+
3. In the browser, navigate to MCP Inspector.
168+
4. To inspect the Langflow server, enter the values for the Langflow server.
169+
170+
* In the **Transport Type** field, select **SSE**.
171+
* In the **URL** field, enter the Langflow server's `/mcp/sse` endpoint.
172+
For a default deployment, the URL is `http://127.0.0.1:7860/api/v1/mcp/sse`.
173+
174+
5. Click **Connect**.
175+
MCP Inspector connects to the Langflow server.
176+
6. To confirm the connection, click the **Tools** tab.
177+
The Langflow server's flows are listed as tools, which confirms MCP Inspector is connected.
178+
In the **Tools** tab, you can monitor how your flows are being registered as tools by MCP, and run flows with input values.
179+
180+
To quit MCP Inspector, in the terminal where it's running, enter `Ctrl+C`.

Diff for: docs/docs/Integrations/MCP/mcp-component-astra.md

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Connect an Astra DB MCP server to Langflow
3+
slug: /mcp-component-astra
4+
---
5+
6+
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).
7+
8+
1. Install an LTS release of [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
9+
2. Create an [OpenAI](https://platform.openai.com/) API key.
10+
3. Create an [Astra DB Serverless (Vector) database](https://docs.datastax.com/en/astra-db-serverless/databases/create-database.html#create-vector-database), if you don't already have one.
11+
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).
12+
5. Create a [Simple agent starter project](/starter-projects-simple-agent).
13+
6. Remove the **URL** tool and replace it with an [MCP server](/components-tools#mcp-server) component.
14+
The flow should look like this:
15+
![MCP stdio component](/img/mcp-server-component.png)
16+
7. In the **MCP server** component, in the **MCP command** field, add the following code.
17+
Replace the values for `ASTRA_TOKEN` and `ASTRA_ENDPOINT` with the values from your Astra database.
18+
19+
```plain
20+
env ASTRA_DB_APPLICATION_TOKEN=ASTRA_TOKEN ASTRA_DB_API_ENDPOINT=ASTRA_ENDPOINT npx -y @datastax/astra-db-mcpnpx -y @datastax/astra-db-mcp
21+
```
22+
23+
:::important
24+
Langflow passes environment variables from the `.env` file to MCP, but not global variables declared in the UI.
25+
To add the values for `ASTRA_DB_APPLICATION_TOKEN` and `ASTRA_DB_API_ENDPOINT` as global variables, add them to Langflow's `.env` file at startup.
26+
For more information, see [global variables](/configuration-global-variables).
27+
:::
28+
29+
8. In the **Agent** component, add your **OpenAI API key**.
30+
9. Open the **Playground**, and then ask the agent, `What collections are available?`
31+
32+
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.
33+
```text
34+
The available collections in your database are:
35+
collection_002
36+
hardware_requirements
37+
load_collection
38+
nvidia_collection
39+
software_requirements
40+
```

0 commit comments

Comments
 (0)