贡献组件包

按照以下步骤将新的组件包添加到 Langflow 侧边栏。

本示例添加了一个名为 DarthVader 的新组件包。

将组件包添加到后端文件夹

1. 导航到 Langflow 仓库中的后端目录，并为您的组件包创建一个新文件夹。 您新组件的路径是 src > backend > base > langflow > components > darth_vader。 您可以在 Langflow 仓库中查看组件文件夹。

2. 在新创建的 darth_vader 文件夹中，添加以下文件：

• darth_vader_component.py — 该文件包含新组件包的后端逻辑。为多个组件创建多个 .py 文件。
• __init__.py — 该文件初始化组件包组件。您可以使用任何现有的 __init__.py 作为示例来查看它应该如何结构化。

有关在组件包中添加多个组件的示例，请参阅 Notion 组件包。

将组件包添加到前端文件夹

1. 导航到 Langflow 仓库中的前端目录来添加您组件包的图标。 您新组件图标的路径是 src > frontend > src > icons > DarthVader 您可以在 Langflow 仓库中查看图标文件夹。 要添加您的图标，在 icons/darth_vader 文件夹内创建 三个文件。

2. 在 icons/darth_vader 文件夹中，添加您图标的原始 SVG 文件，如 darth_vader-icon.svg。

提示

要将 SVG 文件转换为 JSX 格式，您可以使用 SVG to JSX 等在线工具。 强烈建议使用原始、较轻版本的 SVG。

3. 在 icons/darth_vader 文件夹中，将图标作为 React 组件以 JSX 格式添加，如 DarthVaderIcon.jsx。
4. 更新 JSX 文件以包含正确的组件名称和结构。 确保在您的 JSX 文件中包含 {...props} 展开操作符。 For example, here is DarthVaderIcon.jsx:

_22

const DarthVaderIcon = (props) => (

_22

<svg

_22

xmlns="http://www.w3.org/2000/svg"

_22

width={24}

_22

height={24}

_22

viewBox="0 0 32 32"

_22

fill="none"

_22

style={{ backgroundColor: "#9100ff", borderRadius: "6px" }}

_22

{...props}

_22

>

_22

<g transform="translate(7, 7)">

_22

<path

_22

fillRule="evenodd"

_22

clipRule="evenodd"

_22

d="M6.27406 0.685082C8.46664 -0.228361 10.9302 -0.228361 13.1229 0.685082C14.6773 1.33267 16.0054 2.40178 16.9702 3.75502C17.6126 4.65574 17.0835 5.84489 16.045 6.21613L13.5108 7.12189C12.9962 7.30585 12.4289 7.26812 11.9429 7.01756C11.8253 6.95701 11.7298 6.86089 11.6696 6.74266L10.2591 3.97469C10.0249 3.51519 9.37195 3.51519 9.13783 3.97469L7.72731 6.74274C7.66714 6.86089 7.57155 6.95701 7.454 7.01756L4.70187 8.43618C4.24501 8.67169 4.24501 9.3284 4.70187 9.56391L7.454 10.9825C7.57155 11.0431 7.66714 11.1392 7.72731 11.2574L9.13783 14.0254C9.37195 14.4849 10.0249 14.4849 10.2591 14.0254L11.6696 11.2574C11.7298 11.1392 11.8253 11.0431 11.9428 10.9825C12.429 10.7319 12.9965 10.6942 13.5112 10.8781L16.045 11.7838C17.0835 12.1551 17.6126 13.3442 16.9704 14.245C16.0054 15.5982"

_22

fill={props.isdark === "true" ? "white" : "black"}

_22

/>

_22

</g>

_22

</svg>

_22

);

_22

_22

export default DarthVaderIcon;

5. 在 icons/darth_vader 文件夹中，以 TypeScript 格式添加 React 组件本身，如 index.tsx。 确保图标的 React 组件名称与您刚创建的 JSX 组件相对应，如 DarthVaderIcon。

_14

import { useDarkStore } from "@/stores/darkStore";

_14

import React, { forwardRef } from "react";

_14

import DarthVaderIconSVG from "./DarthVaderIcon";

_14

_14

export const DarthVaderIcon = forwardRef<

_14

SVGSVGElement,

_14

React.PropsWithChildren<{}>

_14

>((props, ref) => {

_14

const isdark = useDarkStore((state) => state.dark).toString();

_14

_14

return <DarthVaderIconSVG ref={ref} isdark={isdark} {...props} />;

_14

});

_14

_14

export default DarthVaderIcon;

6. 要将您的新组件包链接到前端，请打开 /src/frontend/src/icons/lazyIconImports.ts。 您可以在 Langflow 仓库中查看 lazyIconImports.ts。
7. 添加您图标的名称，它应该与您在 .tsx 文件中使用的图标名称匹配。 For example:

_10

CrewAI: () =>

_10

import("@/icons/CrewAI").then((mod) => ({ default: mod.CrewAiIcon })),

_10

DarthVader: () =>

_10

import("@/icons/DarthVader").then((mod) => ({ default: mod.DarthVaderIcon })),

_10

DeepSeek: () =>

_10

import("@/icons/DeepSeek").then((mod) => ({ default: mod.DeepSeekIcon })),

8. 要更新组件包侧边栏，请将新图标添加到 src > frontend > src > utils > styleUtils.ts 中的 SIDEBAR_BUNDLES 数组。 您可以在 Langflow 仓库中查看 SIDEBAR_BUNDLES 数组。
   name 必须指向您在 src > backend > base > langflow > components 目录中创建的文件夹。 For example:

_10

{ display_name: "AssemblyAI", name: "assemblyai", icon: "AssemblyAI" },

_10

{ display_name: "DarthVader", name: "darth_vader", icon: "DarthVader" },

_10

{ display_name: "DataStax", name: "astra_assistants", icon: "DarthVader" },

使用图标更新组件包组件

在您的组件包中，将图标变量与您的新组件包关联。

在您的 darth_vader_component.py 文件中，在组件类中，包含您在前端定义的图标。 icon 必须指向您在 src > frontend > src > icons 目录中为图标创建的目录。 For example:

_10

class DarthVaderAPIComponent(LCToolComponent):

_10

display_name: str = "Darth Vader Tools"

_10

description: str = "Use the force to run actions with your agent"

_10

name = "DarthVaderAPI"

_10

icon = "DarthVader"

确保应用程序构建您的组件包

1. 要重新构建后端和前端，运行 make install_frontend && make build_frontend && make install_backend && uv run langflow run --port 7860。

2. 刷新前端应用程序。 您名为 DarthVader 的新组件包在侧边栏中可用。