fix: make MCP naming changes, change actions to tools (#8860)

* Changed actions to tools

* Changed connections to servers

* Added no tools found

* Changed actions to tools in mcp

* Added new label for mcp servers description

* Added better descriptions
This commit is contained in:
Lucas Oliveira 2025-07-03 15:04:04 -03:00 • committed by GitHub
commit 180a94a7f3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 30 additions and 30 deletions

View file

@ -24,7 +24,7 @@ export const MCPServerNotice: FC<{
</div> </div>
<img src={MCPLangflow} alt="MCP Notice Modal" className="rounded-xl" /> <img src={MCPLangflow} alt="MCP Notice Modal" className="rounded-xl" />
<p className="text-sm text-secondary-foreground"> <p className="text-sm text-secondary-foreground">
Expose flows as actions from clients like Cursor or Claude. Expose flows as tools from clients like Cursor or Claude.
</p> </p>
</div> </div>

View file

@ -31,8 +31,8 @@ export default function McpComponent({
: "Error" : "Error"
: "Loading..." : "Loading..."
: !server.toolsCount : !server.toolsCount
? "No actions found" ? "No tools found"
: `${server.toolsCount} action${server.toolsCount === 1 ? "" : "s"}`, : `${server.toolsCount} tool${server.toolsCount === 1 ? "" : "s"}`,
})), })),
[mcpServers], [mcpServers],
); );

View file

@ -256,7 +256,7 @@ export default function AddMcpServerModal({
{initialData ? "Update MCP Server" : "Add MCP Server"} {initialData ? "Update MCP Server" : "Add MCP Server"}
</div> </div>
<span className="text-mmd font-normal text-muted-foreground"> <span className="text-mmd font-normal text-muted-foreground">
Save MCP Servers. Manage added connections in{" "} Save MCP Servers. Manage added servers in{" "}
<CustomLink className="underline" to="/settings/mcp-servers"> <CustomLink className="underline" to="/settings/mcp-servers">
settings settings
</CustomLink> </CustomLink>

View file

@ -162,7 +162,7 @@ export default function ToolsTable({
}, },
{ {
field: "name", field: "name",
headerName: isAction ? "Action" : "Slug", headerName: isAction ? "Tool" : "Slug",
flex: 1, flex: 1,
resizable: false, resizable: false,
valueGetter: (params) => valueGetter: (params) =>
@ -263,7 +263,7 @@ export default function ToolsTable({
<div className="flex-none px-4"> <div className="flex-none px-4">
<Input <Input
icon="Search" icon="Search"
placeholder="Search actions..." placeholder="Search tools..."
inputClassName="h-8" inputClassName="h-8"
value={searchQuery} value={searchQuery}
onChange={handleSearchChange} onChange={handleSearchChange}
@ -300,7 +300,7 @@ export default function ToolsTable({
className="text-mmd font-medium" className="text-mmd font-medium"
htmlFor="sidebar-name-input" htmlFor="sidebar-name-input"
> >
Name {isAction ? "Tool name" : "Name"}
</label> </label>
<Input <Input
@ -322,7 +322,7 @@ export default function ToolsTable({
className="text-mmd font-medium" className="text-mmd font-medium"
htmlFor="sidebar-desc-input" htmlFor="sidebar-desc-input"
> >
Description {isAction ? "Tool description" : "Description"}
</label> </label>
<Textarea <Textarea
@ -335,7 +335,7 @@ export default function ToolsTable({
/> />
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
{isAction {isAction
? "This is the description for the action exposed to the clients." ? "This is the description for the tool exposed to a client."
: "This is the description for the tool exposed to the agents."} : "This is the description for the tool exposed to the agents."}
</div> </div>
</div> </div>
@ -370,7 +370,7 @@ export default function ToolsTable({
Parameters Parameters
</h3> </h3>
<p className="text-mmd text-muted-foreground"> <p className="text-mmd text-muted-foreground">
Manage inputs for this action Manage inputs for this tool
</p> </p>
</div> </div>
)} )}

View file

@ -253,8 +253,8 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
MCP Server MCP Server
</div> </div>
<div className="pb-4 text-mmd text-muted-foreground"> <div className="pb-4 text-mmd text-muted-foreground">
Access your Project's flows as Actions within a MCP Server. Learn more Access your Project's flows as Tools within a MCP Server. Learn more in
in our our
<a <a
className="text-accent-pink-foreground" className="text-accent-pink-foreground"
href={MCP_SERVER_DEPLOY_TUTORIAL_LINK} href={MCP_SERVER_DEPLOY_TUTORIAL_LINK}
@ -269,11 +269,11 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
<div className="w-full xl:w-2/5"> <div className="w-full xl:w-2/5">
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
<ShadTooltip <ShadTooltip
content="Flows in this project can be exposed as callable MCP actions." content="Flows in this project can be exposed as callable MCP tools."
side="right" side="right"
> >
<div className="flex items-center text-mmd font-medium hover:cursor-help"> <div className="flex items-center text-mmd font-medium hover:cursor-help">
Flows/Actions Flows/Tools
<ForwardedIconComponent <ForwardedIconComponent
name="info" name="info"
className="ml-1.5 h-4 w-4 text-muted-foreground" className="ml-1.5 h-4 w-4 text-muted-foreground"
@ -285,11 +285,11 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
<div className="flex flex-row flex-wrap gap-2 pt-2"> <div className="flex flex-row flex-wrap gap-2 pt-2">
<ToolsComponent <ToolsComponent
value={flowsMCPData} value={flowsMCPData}
title="MCP Server Actions" title="MCP Server Tools"
description="Select actions to add to this server" description="Select tools to add to this server"
handleOnNewValue={handleOnNewValue} handleOnNewValue={handleOnNewValue}
id="mcp-server-tools" id="mcp-server-tools"
button_description="Edit Actions" button_description="Edit Tools"
editNode={false} editNode={false}
isAction isAction
disabled={false} disabled={false}

View file

@ -39,7 +39,7 @@ export default function SettingsPage(): JSX.Element {
sidebarNavItems.push( sidebarNavItems.push(
{ {
title: "MCP Connections", title: "MCP Servers",
href: "/settings/mcp-servers", href: "/settings/mcp-servers",
icon: ( icon: (
<ForwardedIconComponent <ForwardedIconComponent

View file

@ -61,7 +61,7 @@ export default function MCPServersPage() {
<div className="flex w-full items-start justify-between gap-6"> <div className="flex w-full items-start justify-between gap-6">
<div className="flex flex-col"> <div className="flex flex-col">
<h2 className="flex items-center text-lg font-semibold tracking-tight"> <h2 className="flex items-center text-lg font-semibold tracking-tight">
MCP Connections MCP Servers
<ForwardedIconComponent <ForwardedIconComponent
name="Mcp" name="Mcp"
className="ml-2 h-5 w-5 text-primary" className="ml-2 h-5 w-5 text-primary"
@ -92,7 +92,7 @@ export default function MCPServersPage() {
</div> </div>
) : ( ) : (
<div className="text-sm font-medium text-muted-foreground"> <div className="text-sm font-medium text-muted-foreground">
Servers Added MCP Servers
</div> </div>
)} )}
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
@ -116,7 +116,9 @@ export default function MCPServersPage() {
? "Timeout" ? "Timeout"
: "Error" : "Error"
: "Loading..." : "Loading..."
: `${server.toolsCount} action${server.toolsCount === 1 ? "" : "s"}`} : !server.toolsCount
? "No tools found"
: `${server.toolsCount} tool${server.toolsCount === 1 ? "" : "s"}`}
</span> </span>
</ShadTooltip> </ShadTooltip>
</div> </div>

View file

@ -40,7 +40,7 @@ test(
state: "visible", state: "visible",
}); });
await page.waitForSelector("text=actions", { timeout: 30000 }); await page.waitForSelector("text=tools", { timeout: 30000 });
await page.getByTestId("button_open_actions").click(); await page.getByTestId("button_open_actions").click();

View file

@ -3,7 +3,7 @@ import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
import { zoomOut } from "../../utils/zoom-out"; import { zoomOut } from "../../utils/zoom-out";
test( test(
"user should be able to manage MCP server actions and configuration", "user should be able to manage MCP server tools and configuration",
{ tag: ["@release", "@workspace", "@components"] }, { tag: ["@release", "@workspace", "@components"] },
async ({ page }) => { async ({ page }) => {
const maxRetries = 5; const maxRetries = 5;
@ -47,14 +47,14 @@ test(
// Verify MCP server tab is visible // Verify MCP server tab is visible
await expect(page.getByTestId("mcp-server-title")).toBeVisible(); await expect(page.getByTestId("mcp-server-title")).toBeVisible();
await expect(page.getByText("Flows/Actions")).toBeVisible(); await expect(page.getByText("Flows/Tools")).toBeVisible();
// Click on Edit Actions button // Click on Edit Tools button
await page.getByTestId("button_open_actions").click(); await page.getByTestId("button_open_actions").click();
await page.waitForTimeout(500); await page.waitForTimeout(500);
// Verify actions modal is open // Verify actions modal is open
await expect(page.getByText("MCP Server Actions")).toBeVisible(); await expect(page.getByText("MCP Server Tools")).toBeVisible();
// Select some actions // Select some actions
const rowsCount = await page.getByRole("row").count(); const rowsCount = await page.getByRole("row").count();

View file

@ -105,13 +105,11 @@ test(
await page.getByTestId("menu_settings_button").click({ timeout: 3000 }); await page.getByTestId("menu_settings_button").click({ timeout: 3000 });
await page.waitForSelector('[data-testid="sidebar-nav-MCP Connections"]', { await page.waitForSelector('[data-testid="sidebar-nav-MCP Servers"]', {
timeout: 30000, timeout: 30000,
}); });
await page await page.getByTestId("sidebar-nav-MCP Servers").click({ timeout: 3000 });
.getByTestId("sidebar-nav-MCP Connections")
.click({ timeout: 3000 });
await page.waitForSelector('[data-testid="add-mcp-server-button-page"]', { await page.waitForSelector('[data-testid="add-mcp-server-button-page"]', {
timeout: 3000, timeout: 3000,