diff --git a/docs/docs/Contributing/contributing-bundles.md b/docs/docs/Contributing/contributing-bundles.md new file mode 100644 index 000000000..5cdb25f2b --- /dev/null +++ b/docs/docs/Contributing/contributing-bundles.md @@ -0,0 +1,127 @@ +--- +title: Contribute bundles +slug: /contributing-bundles +--- + +Follow these steps to add new component bundles to the Langflow sidebar. + +This example adds a new bundle named `DarthVader`. + +## Add the bundle to the backend folder + +1. Navigate to the backend directory in the Langflow project and create a new folder for your bundle. +The path for your new component is `src > backend > base > langflow > components > darth_vader`. +You can view the [components folder](https://github.com/langflow-ai/langflow/tree/main/src/backend/base/langflow/components) in the Langflow repository. + +2. Within the newly created `darth_vader` folder, add the following files: + +* `darth_vader_component.py` — This file contains the backend logic for the new bundle. Create multiple `.py` files for multiple components. +* `__init__.py` — This file initializes the bundle components. You can use any existing `__init__.py` as an example to see how it should be structured. + +For an example of adding multiple components in a bundle, see the [Notion](https://github.com/langflow-ai/langflow/tree/main/src/backend/base/langflow/components/Notion) bundle. + + +## Add the bundle to the frontend folder + +1. Navigate to the frontend directory in the Langflow project to add your bundle's icon. +The path for your new component icon is `src > frontend > src > icons > DarthVader` +You can view the [icons folder](https://github.com/langflow-ai/langflow/tree/main/src/frontend/src/icons) in the Langflow repository. +To add your icon, create **three** files inside the `icons/darth_vader` folder. + +2. In the `icons/darth_vader` folder, add the raw SVG file of your icon, such as `darth_vader-icon.svg`. +:::tip +To convert the SVG file to JSX format, you can use an online tool like SVG to JSX. +It's highly recommended to use the original, lighter version of the SVG. +::: +3. In the `icons/darth_vader` folder, add the icon as a React component in JSX format, such as `DarthVaderIcon.jsx`. +4. Update the JSX file to include the correct component name and structure. +Ensure you include the `{...props}` spread operator in your JSX file. +For example, here is `DarthVaderIcon.jsx`: +```javascript +const DarthVaderIcon = (props) => ( + + + + + +); + +export default DarthVaderIcon; +``` + +5. In the `icons/darth_vader` folder, add the React component itself in TypeScript format, such as `index.tsx`. +Ensure the icon’s React component name corresponds to the JSX component you just created, such as `DarthVaderIcon`. +```typescript +import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; +import DarthVaderIconSVG from "./DarthVaderIcon"; + +export const DarthVaderIcon = forwardRef< + SVGSVGElement, + React.PropsWithChildren<{}> +>((props, ref) => { + const isdark = useDarkStore((state) => state.dark).toString(); + + return ; +}); + +export default DarthVaderIcon; +``` + +6. To link your new bundle to the frontend, open `/src/frontend/src/icons/lazyIconImports.ts`. +You can view the [lazyIconImports.ts](https://github.com/langflow-ai/langflow/blob/main/src/frontend/src/icons/lazyIconImports.ts) in the Langflow repository. +7. Add the name of your icon, which should match the icon name you used in the `.tsx` file. +For example: +```typescript + CrewAI: () => + import("@/icons/CrewAI").then((mod) => ({ default: mod.CrewAiIcon })), + DarthVader: () => + import("@/icons/DartVader").then((mod) => ({ default: mod.DarthVaderIcon })), + DeepSeek: () => + import("@/icons/DeepSeek").then((mod) => ({ default: mod.DeepSeekIcon })), +``` + +8. To update the bundles sidebar, add the new icon to the `SIDEBAR_BUNDLES` array in `src > frontend > src > utils > styleUtils.ts`. +You can view the [SIDEBAR_BUNDLES array](https://github.com/langflow-ai/langflow/blob/main/src/frontend/src/utils/styleUtils.ts#L231) in the Langflow repository.\ +The `name` must point to the folder you created within the `src > backend > base > langflow > components` directory. +For example: +```typescript +{ display_name: "AssemblyAI", name: "assemblyai", icon: "AssemblyAI" }, +{ display_name: "DarthVader", name: "darth_vader", icon: "DarthVader" }, +{ display_name: "DataStax", name: "astra_assistants", icon: "DarthVader" }, +``` + +## Update bundle components with icons + +In your component bundle, associate the icon variable with your new bundle. + +In your `darth_vader_component.py` file, in the component class, include the icon that you defined in the frontend. +The `icon` must point to the directory you created for your icons within the `src > frontend > src > icons` directory. +For example: +``` +class DarthVaderAPIComponent(LCToolComponent): + display_name: str = "Darth Vader Tools" + description: str = "Use the force to run actions with your agent" + name = "DarthVaderAPI" + icon = "DarthVader" +``` + +## Ensure the application builds your component bundle + +1. To rebuild the backend and frontend, run `make install_frontend && make build_frontend && make install_backend && uv run langflow run --port 7860`. + +2. Refresh the frontend application. +Your new bundle called `DarthVader` is available in the sidebar. \ No newline at end of file diff --git a/docs/sidebars.js b/docs/sidebars.js index 94946f336..bf34f7a1e 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -228,11 +228,12 @@ module.exports = { label: "Contributing", items: [ "Contributing/contributing-community", + "Contributing/contributing-how-to-contribute", "Contributing/contributing-components", "Contributing/contributing-component-tests", + "Contributing/contributing-bundles", "Contributing/contributing-github-discussion-board", "Contributing/contributing-github-issues", - "Contributing/contributing-how-to-contribute", "Contributing/contributing-telemetry", ], },