diff --git a/src/backend/base/langflow/components/tools/mcp_component.py b/src/backend/base/langflow/components/tools/mcp_component.py index b9c47c2f6..90396b56a 100644 --- a/src/backend/base/langflow/components/tools/mcp_component.py +++ b/src/backend/base/langflow/components/tools/mcp_component.py @@ -77,8 +77,8 @@ class MCPToolsComponent(Component): "headers_input", ] - display_name = "MCP Server" - description = "Connect to an MCP server and expose tools." + display_name = "MCP Connection" + description = "Connect to an MCP server to use its tools." icon = "Mcp" name = "MCPTools" diff --git a/src/frontend/src/components/common/genericIconComponent/index.tsx b/src/frontend/src/components/common/genericIconComponent/index.tsx index 85535b0f1..e38c3d2ca 100644 --- a/src/frontend/src/components/common/genericIconComponent/index.tsx +++ b/src/frontend/src/components/common/genericIconComponent/index.tsx @@ -23,11 +23,13 @@ export const ForwardedIconComponent = memo( ) => { const [showFallback, setShowFallback] = useState(false); const [iconError, setIconError] = useState(false); + const [initialName, setInitialName] = useState(name); const [TargetIcon, setTargetIcon] = useState(null); useEffect(() => { // Reset states when icon name changes - if (!TargetIcon) { + if (!TargetIcon || initialName !== name) { + setInitialName(name); setIconError(false); setTargetIcon(null); diff --git a/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx b/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx index e3e82f319..0536ead59 100644 --- a/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx +++ b/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx @@ -122,7 +122,8 @@ const McpServerTab = ({ folderName }: { folderName: string }) => { MCP Server
- Access your Project's flows as Actions within a MCP Server. Learn how to + Access your Project's flows as Actions within a MCP Server. Learn more + in our { rel="noreferrer" > {" "} - deploy your MCP server to the internet. + Projects as MCP Servers guide.
@@ -215,7 +216,7 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
- Use this config in your client. Need help? See the{" "} + Add this config to your client of choice. Need help? See the{" "} { await awaitBootstrapTest(page); @@ -13,14 +13,14 @@ test( }); await page.getByTestId("blank-flow").click(); await page.getByTestId("sidebar-search-input").click(); - await page.getByTestId("sidebar-search-input").fill("mcp server"); + await page.getByTestId("sidebar-search-input").fill("mcp connection"); - await page.waitForSelector('[data-testid="toolsMCP Server"]', { + await page.waitForSelector('[data-testid="toolsMCP Connection"]', { timeout: 30000, }); await page - .getByTestId("toolsMCP Server") + .getByTestId("toolsMCP Connection") .dragTo(page.locator('//*[@id="react-flow-id"]'), { targetPosition: { x: 0, y: 0 }, });