贡献组件捆绑包 (Bundles)

捆绑包 (Bundles) 是与特定服务提供商相关的组件组。 如果您想将自定义组件贡献回 Langflow 项目，必须将它们放入捆绑包中。

按照以下步骤在 Langflow 可视化编辑器中将组件添加到 捆绑包 (Bundles)。 此示例添加了一个名为 DarthVader 的捆绑包。

有关创建自定义组件的更多信息，请参阅 创建自定义 Python 组件。

将捆绑包添加到 lfx 组件文件夹

1. 导航到 Langflow 仓库中的 lfx 目录，并为您的捆绑包创建一个新文件夹。 您的新组件路径为 src/lfx/src/lfx/components/darth_vader。 您可以查看 Langflow 仓库中的 components 文件夹。

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

   • darth_vader_component.py — 此文件包含新捆绑包的后端逻辑。对于多个组件，请创建多个 .py 文件。
   • __init__.py — 此文件初始化捆绑包组件。您可以参考任何现有的 __init__.py 示例来了解其结构。

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

将捆绑包添加到 frontend 文件夹

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

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

   提示

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

3. 在 icons/darth_vader 文件夹中，以 JSX 格式添加作为 React 组件的图标，例如 DarthVaderIcon.jsx。

4. 更新 JSX 文件以包含正确的组件名称和结构。 确保在 JSX 文件中包含 {...props} 展开运算符。 例如，这是 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 文件中使用的图标名称一致。 例如：

   
   

   _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. 要将您的捆绑包添加到 捆绑包 (Bundles) 菜单，请编辑 /src/frontend/src/utils/styleUtils.ts 中的 SIDEBAR_BUNDLES 数组。

   向数组中添加一个包含以下键的对象：

   • display_name: Langflow 可视化编辑器中显示的文本标签
   • name: 您在 /src/lfx/src/lfx/components 目录中创建的文件夹名称
   • icon: 您在前面的步骤中定义的捆绑包图标名称

   例如：

   
   

   _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 目录中为图标创建的目录。 例如：

_10

class DarthVaderAPIComponent(LCToolComponent):

_10

display_name: str = "Darth Vader Tools"

_10

description: str = "使用原力随您的代理一起执行操作"

_10

name = "DarthVaderAPI"

_10

icon = "DarthVader"

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

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

2. 刷新前端应用程序。 您名为 DarthVader 的新捆绑包已在可视化编辑器的 捆绑包 (Bundles) 菜单中可用。