贡献组件包

组件包是与特定服务提供商相关的一组组件。

按照以下步骤，将组件添加到 Langflow 可视化编辑器中 Components 菜单的 Bundles 部分。

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

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

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

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

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

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

将捆绑包添加到前端文件夹

1. 在 Langflow 仓库中导航到前端目录，以添加您的捆绑包图标。 新组件图标的路径是 src > frontend > src > icons > DarthVader 您可以在 Langflow 仓库中查看 icons folder。 要添加您的图标，请在 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/backend/base/langflow/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 = "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 的新组件包在可视化编辑器的 Components 菜单中可用。