docs: v1.4 features (#7778)
* bump-supported-version-to-1.4.x * overview-page * small-naming-changes * change-folders-to-projects * api-examples-folder-to-projects * more * update-screenshots-and-text * sidebars * npx-astra-command * move-and-redirect-outdated-page * sidebars * tools-and-env-var * language * authentication * flow-description-and-tool * mcp-component-astra-db * rename-page * cleanup * update-message * update-for-client-strategy * sse-port-7868-and-api-key-creation * external-deploy * init-ngrok * add-ngrok-deploy * cleanup * cleanup * Minor capitalization fix * Fix message object anchors * Fix indentation of MCP server procedure * Add anchor link for MCP SSE mode * Mild cleanup of concepts overview * Fix indentation issues in mcp-component-astra * Use universal date format on luna-for-langflow * Update mcp-server doc * fix-missed-bracket * change-npx-to-uvx-mcp-proxy * update-screenshots-for-uvx * inspector-with-auth * Apply suggestions from code review Co-authored-by: Eric Schneider <37347760+eric-schneider@users.noreply.github.com> --------- Co-authored-by: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com> Co-authored-by: Eric Schneider <37347760+eric-schneider@users.noreply.github.com> Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>
This commit is contained in:
Mendon Kissling
GitHub
parent
710b6f99b5
commit
744df31f18
27 changed files with 516 additions and 308 deletions
|
|
@ -64,6 +64,8 @@ A component inherits from a base `Component` class that defines its interface an
|
|||
|
||||
For example, the [Recursive character text splitter](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/components/langchain_utilities/recursive_character.py) is a child of the [LCTextSplitterComponent](https://github.com/langflow-ai/langflow/blob/main/src/backend/base/langflow/base/textsplitters/model.py) class.
|
||||
|
||||
<details>
|
||||
<summary>Recursive character text splitter code</summary>
|
||||
```python
|
||||
from typing import Any
|
||||
|
||||
|
|
@ -126,6 +128,8 @@ class RecursiveCharacterTextSplitterComponent(LCTextSplitterComponent):
|
|||
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
Components include definitions for inputs and outputs, which are represented in the UI with color-coded ports.
|
||||
|
||||
**Input Definition:** Each input (like `IntInput` or `DataInput`) specifies an input's type, name, and display properties, which appear as configurable fields in the component's UI panel.
|
||||
|
|
|
|||
|
|
@ -18,17 +18,17 @@ Flows are created in the **workspace** with components dragged from the componen
|
|||
A flow can be as simple as the [basic prompting flow](/get-started-quickstart), which creates an OpenAI chatbot with four components.
|
||||
|
||||
- Each component in a flow is a **node** that performs a specific task, like an AI model or a data source.
|
||||
- Each component has a **Configuration** menu. Click the **Code** pane to see a component's underlying Python code.
|
||||
- Each component has a **Configuration** menu. Click the <Icon name="Code" aria-hidden="true"/> **Code** button on a component to see its underlying Python code.
|
||||
- Components are connected with **edges** to form flows.
|
||||
|
||||
If you're familiar with [React Flow](https://reactflow.dev/learn), a **flow** is a node-based application, a **component** is a node, and the connections between components are **edges**.
|
||||
|
||||
When a flow is run, Langflow builds a Directed Acyclic Graph (DAG) graph object from the nodes (components) and edges (connections between components), with the nodes sorted to determine the order of execution. The graph build calls the individual components' `def_build` functions to validate and prepare the nodes. This graph is then processed in dependency order. Each node is built and executed sequentially, with results from each built node being passed to nodes that are dependent on the previous node's results.
|
||||
|
||||
Flows are stored on local disk at these default locations:
|
||||
Flows are stored on local disk at the following default locations:
|
||||
|
||||
- **Linux or WSL on Windows**: `home/<username>/.cache/langflow/`
|
||||
- **MacOS**: `/Users/<username>/Library/Caches/langflow/`
|
||||
- **Linux and WSL**: `home/<username>/.cache/langflow/`
|
||||
- **macOS**: `/Users/<username>/Library/Caches/langflow/`
|
||||
|
||||
The flow storage location can be customized with the [LANGFLOW_CONFIG_DIR](/environment-variables#LANGFLOW_CONFIG_DIR) environment variable.
|
||||
|
||||
|
|
@ -36,20 +36,19 @@ The flow storage location can be customized with the [LANGFLOW_CONFIG_DIR](/envi
|
|||
|
||||
If you're new to Langflow, it's OK to feel a bit lost at first. We’ll take you on a tour, so you can orient yourself and start creating applications quickly.
|
||||
|
||||
Langflow has four distinct regions: the [workspace](#workspace) is the main area where you build your flows. The components sidebar is on the left, and lists the available [components](#components). The [playground](#playground) and [Publish pane](#publish-pane) are available in the upper right corner.
|
||||
|
||||
|
||||
Langflow has four distinct regions: the [workspace](#workspace) is the main area where you build your flows. The components sidebar is on the left, and lists the available [components](#components). The [playground](#playground) and [publish pane](#publish-pane) are available in the upper right corner.
|
||||
|
||||
## Workspace
|
||||
|
||||
The **workspace** is where you create AI applications by connecting and running components in flows.
|
||||
|
||||
The workspace controls allow you to adjust your view and lock your flows in place.
|
||||
- Click and drag the workspace to move it left, right, up, and down.
|
||||
- Scroll up and down to zoom in and out of the workspace, or use the <Icon name="ZoomIn" aria-hidden="true"/> **Zoom In** and <Icon name="ZoomOut" aria-hidden="true"/> **Zoom Out** controls.
|
||||
- Click <Icon name="Maximize" aria-hidden="true"/> **Fit To Zoom** to center the workspace on the current flow.
|
||||
- Click <Icon name="LockOpen" aria-hidden="true"/> **Lock** to lock the workspace in place, preventing accidental movement.
|
||||
- Click <Icon name="StickyNote" aria-hidden="true"/> **Add Note** to add a note to your flow, similar to commenting in code.
|
||||
|
||||
- Add **Notes** to flows with the **Add Note** button, similar to commenting in code.
|
||||
- To access the [Settings](#settings) menu, click <Icon name="Settings" aria-label="Gear icon" /> **Settings**.
|
||||
|
||||
This menu contains configuration for **Global Variables**, **Langflow API**, **Shortcuts**, and **Messages**.
|
||||
|
||||
|
||||
## Components
|
||||
|
||||
|
|
@ -95,36 +94,30 @@ Langflow stores logs at the location specified in the `LANGFLOW_CONFIG_DIR` envi
|
|||
|
||||
This directory's default location depends on your operating system.
|
||||
|
||||
- **Linux/WSL**: `~/.cache/langflow/`
|
||||
- **Linux and WSL**: `~/.cache/langflow/`
|
||||
- **macOS**: `/Users/<username>/Library/Caches/langflow/`
|
||||
- **Windows**: `%LOCALAPPDATA%\langflow\langflow\Cache`
|
||||
|
||||
To modify the location of your log file:
|
||||
|
||||
1. Add `LANGFLOW_LOG_FILE=path/to/logfile.log` in your `.env.` file.
|
||||
1. Add `LANGFLOW_LOG_FILE=path/to/logfile.log` in your `.env` file.
|
||||
2. To start Langflow with the values from your `.env` file, start Langflow with `uv run langflow run --env-file .env`.
|
||||
|
||||
An example `.env` file is available in the [project repository](https://github.com/langflow-ai/langflow/blob/main/.env.example).
|
||||
|
||||
## Projects
|
||||
|
||||
## Projects
|
||||
|
||||
The **My Projects** page displays all the flows and components you've created in the Langflow workspace.
|
||||
|
||||
|
||||
|
||||
**My Projects** is the default project where all new projects and components are initially stored.
|
||||
**My Projects** is the default space where all new projects and components are initially stored.
|
||||
|
||||
Projects and flows are exchanged as JSON objects.
|
||||
To create a new project, click <Icon name="Plus"aria-hidden="true"/> **Create new project**.
|
||||
|
||||
- To create a new project, click 📁 **New Project**.
|
||||
|
||||
- To rename a project, double-click the project name.
|
||||
|
||||
- To download a project, click 📥 **Download**.
|
||||
|
||||
- To upload a project, click 📤 **Upload**. The default maximum file upload size is 100 MB.
|
||||
|
||||
- To move a flow or component, drag and drop it into the desired project.
|
||||
To upload a flow to your project, click <Icon name="Upload" aria-hidden="true"/> **Upload a flow**.
|
||||
|
||||
## File management
|
||||
|
||||
|
|
@ -134,17 +127,17 @@ For more on managing your files, see [Manage files](/concepts-file-management).
|
|||
|
||||
## Options menu
|
||||
|
||||
The dropdown menu labeled with the project name offers several management and customization options for the current flow in the Langflow workspace.
|
||||
The dropdown menu labeled with the project name offers several management and customization options for the current flow in the Langflow workspace:
|
||||
|
||||
- **New**: Create a new flow from scratch.
|
||||
- **Settings**: Adjust settings specific to the current flow, such as its name, description, and endpoint name.
|
||||
- **Logs**: View logs for the current project, including execution history, errors, and other runtime events.
|
||||
- **Import**: Import a flow or component from a JSON file into the workspace.
|
||||
- **Export**: Export the current flow as a JSON file.
|
||||
- **Undo (⌘Z)**: Revert the last action taken in the project.
|
||||
- **Redo (⌘Y)**: Reapply a previously undone action.
|
||||
- **Refresh All**: Refresh all components and delete cache.
|
||||
- <Icon name="Plus" aria-hidden="true"/> **New**: Create a new flow from scratch.
|
||||
- <Icon name="SquarePen" aria-hidden="true"/> **Edit Details**: Adjust settings specific to the current flow, such as its name, description, and endpoint name.
|
||||
- <Icon name="ScrollText" aria-hidden="true"/> **Logs**: View logs for the current project, including execution history, errors, and other runtime events.
|
||||
- <Icon name="FileUp" aria-hidden="true"/> **Import**: Import a flow or component from a JSON file into the workspace.
|
||||
- <Icon name="FileDown" aria-hidden="true"/> **Export**: Export the current flow as a JSON file.
|
||||
- <Icon name="Undo" aria-hidden="true"/> **Undo**: Revert the last action taken in the project. Keyboard shortcut: <kbd>Control+Z</kbd> (or <kbd>Command+Z</kbd> on macOS).
|
||||
- <Icon name="Redo" aria-hidden="true"/> **Redo**: Reapply a previously undone action. Keyboard shortcut: <kbd>Control+Y</kbd> (or <kbd>Command+Y</kbd> on macOS).
|
||||
- <Icon name="RefreshCcw" aria-hidden="true"/> **Refresh All**: Refresh all components and delete cache.
|
||||
|
||||
## Settings
|
||||
|
||||
Click <Icon name="Settings" aria-label="Gear icon" /> **Settings** to access **Global variables**, **Langflow API**, **Shortcuts**, and **Messages**.
|
||||
Click <Icon name="Settings" aria-hidden="true"/> **Settings** to access **Global variables**, **Langflow API keys**, **Shortcuts**, and **Messages**.
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ slug: /concepts-publish
|
|||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
Langflow provides several ways to publish and integrate your flows into external applications. Whether you want to expose your flow via API endpoints, embed it as a chat widget in your website, or share it as a public playground, this guide covers the options available for making your flows accessible to users.
|
||||
Langflow provides several ways to publish and integrate your flows into external applications. Whether you want to expose your flow as an API endpoint, embed it as a chat widget in your website, or share it as a public playground, this guide covers the options available for making your flows accessible to users.
|
||||
|
||||
## API access
|
||||
|
||||
The **API** pane presents code templates for integrating your flow into external applications.
|
||||
The **API access** pane presents code templates for integrating your flow into external applications.
|
||||
|
||||
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ For example, changing the **Chat Input** component's `input_value` changes that
|
|||
|
||||
### Send files to your flow with the API
|
||||
|
||||
For information on sending files to the Langflow API, see [API examples](/api-reference-api-examples#upload-image-files).
|
||||
For information on sending files to the Langflow API, see [API examples](/api-reference-api-examples#upload-image-files-v1).
|
||||
|
||||
### Webhook cURL
|
||||
|
||||
|
|
|
|||
302
docs/docs/Concepts/mcp-server.md
Normal file
302
docs/docs/Concepts/mcp-server.md
Normal file
|
|
@ -0,0 +1,302 @@
|
|||
---
|
||||
title: Model Context Protocol (MCP) server
|
||||
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 server*.
|
||||
For information about using Langflow as an *MCP client*, see the [MCP component](/components-tools#mcp-server).
|
||||
|
||||
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.
|
||||
|
||||
* 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).
|
||||
|
||||
## Select and configure flows to expose as MCP tools {#select-flows-to-serve}
|
||||
|
||||
Langflow runs a separate MCP server for every [project](/concepts-overview#projects).
|
||||
The MCP server for each project exposes that project's flows as tools.
|
||||
|
||||
All of the flows in a project are exposed by default.
|
||||
To expose only specific flows and optionally rename them for agentic use, follow these steps:
|
||||
|
||||
1. From the Langflow dashboard, select the project that contains the flows you want to serve as tools, and then click the **MCP Server** tab.
|
||||
Alternatively, you can quickly access the **MCP Server** tab from within any flow by selecting **Publish > MCP Server**.
|
||||
|
||||
The **MCP Server** tab displays a code template that you can use to connect MCP clients to the the project's MCP server.
|
||||
|
||||
The **Flows/Actions** section lists the flows that are currently being served as tools.
|
||||
|
||||
|
||||
|
||||
2. Click <Icon name="Settings2" aria-hidden="true"/> **Edit Actions**.
|
||||
|
||||
3. In the **MCP Server Actions** window, select the flows that you want exposed as tools.
|
||||
|
||||
|
||||
|
||||
4. Optional: Edit the **Flow Name** and **Flow Description**.
|
||||
|
||||
- **Flow Name**: Enter a name thats makes it clear what the flow does.
|
||||
|
||||
- **Flow Description**: Enter a description that accurately describes the specific action(s) the flow performs.
|
||||
|
||||
:::important
|
||||
MCP clients use the **Flow Name** and **Flow Description** to determine which action to use.
|
||||
For more information about naming and describing your flows, see [Name and describe your flows for agentic use](#name-and-describe-your-flows).
|
||||
:::
|
||||
|
||||
5. Close the **MCP Server Actions** window to save your changes.
|
||||
|
||||
{/* The anchor on this section (connect-clients-to-use-the-servers-actions) is currently a link target in the Langflow UI. Do not change. */}
|
||||
## Connect clients to Langflow's MCP server {#connect-clients-to-use-the-servers-actions}
|
||||
|
||||
The following procedure describes how to connect [Cursor](https://www.cursor.com/) to your Langflow project's MCP server to consume your flows as tools.
|
||||
However, you can connect any [MCP-compatible client](https://modelcontextprotocol.io/clients) following similar steps.
|
||||
|
||||
1. Install [Cursor](https://docs.cursor.com/get-started/installation).
|
||||
|
||||
2. In Cursor, go to **Cursor Settings > MCP**, and then click **Add New Global MCP Server**.
|
||||
This opens Cursor's global MCP configuration file, `mcp.json`.
|
||||
|
||||
3. In the Langflow dashboard, select the project that contains the flows you want to serve, and then click the **MCP Server** tab.
|
||||
|
||||
4. Copy the code template from the **MCP Server** tab, and then paste it into `mcp.json` in Cursor.
|
||||
For example:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"PROJECT_NAME": {
|
||||
"command": "uvx",
|
||||
"args": [
|
||||
"mcp-proxy",
|
||||
"http://LANGFLOW_SERVER_ADDRESS/api/v1/mcp/project/PROJECT_ID/sse"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The **MCP Server** tab automatically includes the correct `PROJECT_NAME`, `LANGFLOW_SERVER_ADDRESS`, and `PROJECT_ID` values.
|
||||
The default Langflow server address is `http://127.0.0.1:7860` (`http://127.0.0.1:7868` if using Langflow for Desktop).
|
||||
|
||||
:::important
|
||||
If your Langflow server [requires authentication](/configuration-authentication) ([`LANGFLOW_AUTO_LOGIN`](/environment-variables#LANGFLOW_AUTO_LOGIN) is set to `false`), you must include your Langflow API key in the configuration.
|
||||
For more information, see [MCP server authentication and environment variables](#authentication).
|
||||
:::
|
||||
|
||||
5. Save and close the `mcp.json` file in Cursor.
|
||||
The newly added MCP server will appear in the **MCP Servers** section.
|
||||
|
||||
Cursor is now connected to your project's MCP server and your flows are registered as tools.
|
||||
Cursor determines when to use tools based on your queries, and requests permissions when necessary.
|
||||
|
||||
For more information, see the [Cursor's MCP documentation](https://docs.cursor.com/context/model-context-protocol).
|
||||
|
||||
### MCP server authentication and environment variables {#authentication}
|
||||
|
||||
If your Langflow server [requires authentication](/configuration-authentication) ([`LANGFLOW_AUTO_LOGIN`](/environment-variables#LANGFLOW_AUTO_LOGIN) is set to `false`), then you must supply a [Langflow API key](/configuration-api-keys) in your MCP client configuration.
|
||||
When this is the case, the code template in your project's **MCP Server** tab automatically includes the `--header` and `x-api-key` arguments:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"PROJECT_NAME": {
|
||||
"command": "uvx",
|
||||
"args": [
|
||||
"mcp-proxy",
|
||||
"--headers",
|
||||
"x-api-key",
|
||||
"YOUR_API_KEY",
|
||||
"http://LANGFLOW_SERVER_ADDRESS/api/v1/mcp/project/PROJECT_ID/sse"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Click <Icon name="key" aria-hidden="true"/> **Generate API key** to automatically insert a new Langflow API key into the code template.
|
||||
Alternatively, you can replace `YOUR_API_KEY` with an existing Langflow API key.
|
||||
|
||||
|
||||
|
||||
To include environment variables with your MCP server command, include them like this:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"PROJECT_NAME": {
|
||||
"command": "uvx",
|
||||
"args": [
|
||||
"mcp-proxy",
|
||||
"http://LANGFLOW_SERVER_ADDRESS/api/v1/mcp/project/PROJECT_ID/sse"
|
||||
],
|
||||
"env": {
|
||||
"KEY": "VALUE"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Replace `KEY` and `VALUE` with the environment variable name and value you want to include.
|
||||
|
||||
## Name and describe your flows for agentic use {#name-and-describe-your-flows}
|
||||
|
||||
MCP clients like [Cursor](https://www.cursor.com/) "see" your Langflow project as a single MCP server, with _all_ of your enabled flows listed as tools.
|
||||
This can confuse agents.
|
||||
For example, an agent won't know that flow `adbbf8c7-0a34-493b-90ea-5e8b42f78b66` is a [Document Q&A](/document-qa) flow for a specific text file.
|
||||
|
||||
To prevent this behavior, make sure to [name and describe](#select-flows-to-serve) your flows clearly.
|
||||
It's helpful to think of the names and descriptions as function names and code comments, making sure to use clear statements describing the problems your flows solve.
|
||||
|
||||
For example, let's say you have a [Document Q&A](/document-qa) flow that loads a sample resume for an LLM to chat with, and that you've given it the following name and description:
|
||||
|
||||
- **Flow Name**: `document_qa_for_resume`
|
||||
|
||||
- **Flow Description**: `A flow for analyzing Emily's resume.`
|
||||
|
||||
If you ask Cursor a question specifically about the resume, such as `What job experience does Emily have?`, the agent asks to call the MCP tool `document_qa_for_resume`.
|
||||
That's because your name and description provided the agent with a clear purpose for the tool.
|
||||
|
||||
When you run the tool, the agent requests permissions when necessary, and then provides a response.
|
||||
For example:
|
||||
|
||||
```
|
||||
{
|
||||
"input_value": "What job experience does Emily have?"
|
||||
}
|
||||
Result:
|
||||
What job experience does Emily have?
|
||||
Emily J. Wilson has the following job experience:
|
||||
```
|
||||
|
||||
If you ask about a different resume, such as `What job experience does Alex have?`, you've provided enough information in the description for the agent to make the correct decision:
|
||||
|
||||
```
|
||||
I notice you're asking about Alex's job experience.
|
||||
Based on the available tools, I can see there is a Document QA for Resume flow that's designed for analyzing resumes.
|
||||
However, the description mentions it's for "Emily's resume" not Alex's. I don't have access to Alex's resume or job experience information.
|
||||
```
|
||||
|
||||
## Use MCP Inspector to test and debug flows {#test-and-debug-flows}
|
||||
|
||||
[MCP Inspector](https://modelcontextprotocol.io/docs/tools/inspector) is a common tool for testing and debugging MCP servers.
|
||||
You can use MCP Inspector to monitor your flows and get insights into how they are being consumed by the MCP server:
|
||||
|
||||
1. Install MCP Inspector:
|
||||
|
||||
```bash
|
||||
npx @modelcontextprotocol/inspector
|
||||
```
|
||||
|
||||
For more information about configuring MCP Inspector, including specifying a proxy port, see the [MCP Inspector GitHub project](https://github.com/modelcontextprotocol/inspector).
|
||||
|
||||
2. Open a web browser and navigate to the MCP Inspector UI.
|
||||
The default address is `http://127.0.0.1:6274`.
|
||||
|
||||
3. In the MCP Inspector UI, enter the connection details for your Langflow project's MCP server:
|
||||
|
||||
- **Transport Type**: Select **SSE**.
|
||||
- **URL**: Enter the Langflow MCP server's `sse` endpoint. For example: `http://127.0.0.1:7860/api/v1/mcp/project/d359cbd4-6fa2-4002-9d53-fa05c645319c/sse`
|
||||
|
||||
If you've [configured authentication for your MCP server](#authentication), fill out the following additional fields:
|
||||
- **Transport Type**: Select **STDIO**.
|
||||
- **Command**: `uvx`
|
||||
- **Arguments**: Enter the following list of arguments, separated by spaces. Replace the values for `YOUR_API_KEY`, `LANGFLOW_SERVER_ADDRESS`, and `PROJECT_ID` with the values from your Langflow MCP server. For example:
|
||||
```bash
|
||||
mcp-proxy --headers x-api-key YOUR_API_KEY http://LANGFLOW_SERVER_ADDRESS/api/v1/mcp/project/PROJECT_ID/sse
|
||||
```
|
||||
|
||||
4. Click **Connect**.
|
||||
|
||||
If the connection was successful, you should see your project's flows in the **Tools** tab.
|
||||
From this tab, you can monitor how your flows are being registered as tools by MCP, as well as test the tools with custom input values.
|
||||
|
||||
5. To quit MCP Inspector, press <kbd>Control+C</kbd> in the same terminal window where you started it.
|
||||
|
||||
{/* The anchor on this section (deploy-your-server-externally) is currently a link target in the Langflow UI. Do not change. */}
|
||||
## Deploy your MCP server externally {#deploy-your-server-externally}
|
||||
|
||||
By default, Langflow isn't exposed to the public internet.
|
||||
However, you can forward Langflow server traffic with a forwarding platform like [ngrok](https://ngrok.com/docs/getting-started/) or [zrok](https://docs.zrok.io/docs/getting-started).
|
||||
|
||||
The following procedure uses ngrok, but you can use any similar reverse proxy or forwarding platform.
|
||||
This procedure also assumes that you're using the default Langflow listening address `http://127.0.0.1:7860` (`http://127.0.0.1:7868` if using Langflow for Desktop).
|
||||
|
||||
1. Sign up for an [ngrok account](https://dashboard.ngrok.com/signup).
|
||||
|
||||
2. [Install ngrok](https://ngrok.com/docs/getting-started/#1-install-ngrok).
|
||||
|
||||
3. Copy your [ngrok authtoken](https://dashboard.ngrok.com/get-started/your-authtoken) and use it to authenticate your local ngrok server:
|
||||
|
||||
```bash
|
||||
ngrok config add-authtoken NGROK_TOKEN
|
||||
```
|
||||
|
||||
Replace `NGROK_TOKEN` with your ngrok authtoken.
|
||||
|
||||
4. Use ngrok to expose your Langflow server to the public internet:
|
||||
|
||||
```bash
|
||||
ngrok http http://localhost:7860
|
||||
```
|
||||
|
||||
The ngrok session starts in your terminal and deploys an ephemeral domain with no authentication.
|
||||
To add authentication or deploy a static domain, see the [ngrok documentation](https://ngrok.com/docs/).
|
||||
|
||||
|
||||
The `Forwarding` row displays the forwarding address for your Langflow server:
|
||||
|
||||
```
|
||||
Forwarding https://94b1-76-64-171-14.ngrok-free.app -> http://localhost:7860
|
||||
```
|
||||
|
||||
The forwarding address is acting as a reverse proxy for your Langflow server.
|
||||
|
||||
5. From the Langflow dashboard, select the project that contains the flows you want to serve as tools, and then click the **MCP Server** tab.
|
||||
|
||||
Note that the code template now contains your ngrok forwarding address instead of the localhost address:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"PROJECT_NAME": {
|
||||
"command": "uvx",
|
||||
"args": [
|
||||
"mcp-proxy",
|
||||
"https://94b1-73-64-171-14.ngrok-free.app/api/v1/mcp/project/fdbc12af-0dd4-43dc-b9ce-c324d1ce5cd1/sse"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
6. Complete the steps in [Connect clients to Langflow's MCP server](#connect-clients-to-use-the-servers-actions) using the ngrok forwarding address.
|
||||
|
||||
Your MCP client is now connected to your project's MCP server over the public internet.
|
||||
|
||||
If using Cursor, your conversations are the same as they are on your local host:
|
||||
|
||||
```
|
||||
{
|
||||
"input_value": "What job experience does Emily have?"
|
||||
}
|
||||
Result:
|
||||
What job experience does Emily have?
|
||||
Emily J. Wilson has the following job experience:
|
||||
```
|
||||
|
||||
You can use the ngrok console output to monitor requests for your project's endpoint:
|
||||
|
||||
```
|
||||
16:35:48.566 EDT GET /api/v1/mcp/project/fdbc12af-0dd4-43dc-b9ce-c324d1ce5cd1 200 OK
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue