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

* 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

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

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)