Skip to main content

Contribute component bundles

Bundles are groups of components that belong to the same provider or capability family.

If you want to contribute custom components back to SkillFlaw, organize them as a bundle.

Add a backend bundle​

Create a new bundle directory under:


_10
src/lfx/src/lfx/components/

For example:


_10
src/lfx/src/lfx/components/darth_vader/

Inside that folder, add:

  • one or more Python component files
  • __init__.py to export your bundle components

For a real example, inspect existing bundles in the repository.

Add the frontend icon​

Create the matching icon under:


_10
src/frontend/src/icons/DarthVader/

Typical files are:

  • raw SVG asset
  • JSX/SVG wrapper component
  • index.tsx export file

Make sure the icon component forwards props and follows the same structure as existing icons in src/frontend/src/icons/.

Register the icon lazy import​

Update:


_10
src/frontend/src/icons/lazyIconImports.ts

Add a lazy import entry whose icon name matches the frontend icon component export.

Add the bundle to the frontend menu​

Update the bundle list used by the visual editor so your new bundle appears under Bundles.

The registration object should define:

  • display_name: the label shown in the SkillFlaw visual editor
  • name: the backend bundle directory name
  • icon: the registered icon name

Reference the icon in the backend component​

Inside your component class, set icon to the same icon name you registered in the frontend.

Example:


_10
class DarthVaderAPIComponent(LCToolComponent):
_10
display_name = "Darth Vader Tools"
_10
description = "Use the force to run actions with your agent"
_10
name = "DarthVaderAPI"
_10
icon = "DarthVader"

Validate the bundle​

After wiring the backend and frontend pieces together, rebuild and run the app, then confirm the new bundle appears in the visual editor.

For repository commands, see Makefile command reference.