> For the complete documentation index, see [llms.txt](https://guidenai.gitbook.io/broxi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guidenai.gitbook.io/broxi/workflows/components.md). # Components A component is a single building block within a flow with inputs, outputs, functions, and parameters that define its functionality. A single component is like a class within a larger application. To add a component to a flow, drag it from the **Component** menu to the **Workspace**. Learn more about components and how they work on this page. ### Component menu Each component is unique, but all have a menu bar at the top that looks something like the following: ![Open AI component](https://2739525811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGUcjvdv7MzVy7GYqImRT%2Fuploads%2FzesH7vlZz7FWdddCQN4v%2FScreenshot%202025-04-26%20at%2020.41.39.png?alt=media\&token=0a07a1f1-36d1-4ad7-af7b-be3500d793dc) Use the component controls to do the following: * **Controls** — Adjust all component parameters. * **Freeze** — After a component runs, lock its previous output state to prevent it from re-running. Click **All** to see additional options for a component. To view a component’s output and logs, click the icon in output connection. To run a single component, click **Play**. A **Checkmark** indicates that the component ran successfully. ### Component ports Handles () on the side of a component indicate the types of inputs and outputs that can be connected at that port. Hover over a handle to see connection details. #### Component port data type colors The following table lists the handle colors and their corresponding data types: | Data type | Handle color | | ----------------- | ------------ | | BaseLanguageModel | Fuchsia | | Data | Red | | Document | Lime | | Embeddings | Emerald | | LanguageModel | Fuchsia | | Message | Indigo | | Prompt | Violet | | str | Indigo | | Text | Indigo | | unknown | Gray | ### Component code A component inherits from a base `Component` class that defines its interface and behavior. ```python from typing import Any from langchain_text_splitters import RecursiveCharacterTextSplitter, TextSplitter from broxi.base.textsplitters.model import BCTextSplitterComponent from broxi.inputs.inputs import DataInput, IntInput, MessageTextInput from broxi.utils.util import unescape_string class RecursiveCharacterTextSplitterComponent(BCTextSplitterComponent): display_name: str = "Recursive Character Text Splitter" description: str = "Split text while trying to keep related content together." documentation: str = "https://use.broxi.ai" name = "RecursiveCharacterTextSplitter" icon = "Broxi" inputs = [ IntInput( name="chunk_size", display_name="Chunk Size", info="Maximum length of each text chunk.", value=1000, ), IntInput( name="chunk_overlap", display_name="Chunk Overlap", info="Overlap amount between text chunks.", value=200, ), DataInput( name="data_input", display_name="Input", info="Text data to be split.", input_types=["Document", "Data"], ), MessageTextInput( name="separators", display_name="Separators", info='Characters to split on.\nDefaults to ["\\n\\n", "\\n", " ", ""] if empty.', is_list=True, ), ] def get_data_input(self) -> Any: return self.data_input def build_text_splitter(self) -> TextSplitter: if not self.separators: separators: list[str] | None = None else: separators = [unescape_string(x) for x in self.separators] return RecursiveCharacterTextSplitter( separators=separators, chunk_size=self.chunk_size, chunk_overlap=self.chunk_overlap, ) ``` Components include definitions for inputs and outputs, which are represented in the UI with color-coded ports. **Input Definition:** Each input (like `IntInput` or `DataInput`) specifies an input's type, name, and display properties, which appear as configurable fields in the component's UI panel. **Methods:** Components have methods or functions that handle their functionality. This component has two methods. `get_data_input` retrieves the text data to be split from the component's input. This makes the data available to the class. `build_text_splitter` creates a `RecursiveCharacterTextSplitter` object by calling its parent class's `build` method. The text is split with the created splitter and passed to the next component. When used in a flow, this component: 1. Displays its configuration options in the UI. 2. Validates user inputs based on the input types. 3. Processes data using the configured parameters. 4. Passes results to the next component. ### Freeze After a component runs, **Freeze** locks the component's previous output state to prevent it from re-running. If you’re expecting consistent output from a component and don’t need to re-run it, click **Freeze**. Enabling **Freeze** freezes all components upstream of the selected component. ### Additional component Click **All** to see additional options for a component. To modify a component's name or description, double-click in the **Name** or **Description** fields. Component descriptions accept Markdown syntax. ### Component shortcuts The following keyboard shortcuts are available when a component is selected. | Menu item | Windows shortcut | Mac shortcut | Description | | ------------------ | ---------------- | ------------- | ------------------------------------------------ | | Advanced Settings | Ctrl + Shift + A | ⌘ + Shift + A | Opens advanced settings for the component. | | Save Changes | Ctrl + S | ⌘ + S | Saves changes to the current flow. | | Save Component | Ctrl + Alt + S | ⌘ + Alt + S | Saves the current component to Saved components. | | Duplicate | Ctrl + D | ⌘ + D | Creates a duplicate of the component. | | Copy | Ctrl + C | ⌘ + C | Copies the selected component. | | Cut | Ctrl + X | ⌘ + X | Cuts the selected component. | | Paste | Ctrl + V | ⌘ + V | Pastes the copied/cut component. | | Docs | Ctrl + Shift + D | ⌘ + Shift + D | Opens related documentation. | | Minimize | Ctrl + . | ⌘ + . | Minimizes the current component. | | Freeze | Ctrl + Shift + F | ⌘ + Shift + F | Freezes component state and upstream components. | | Download | Ctrl + J | ⌘ + J | Downloads the component as JSON. | | Delete | Backspace | Backspace | Deletes the component. | | Group | Ctrl + G | ⌘ + G | Groups selected components. | | Undo | Ctrl + Z | ⌘ + Z | Undoes the last action. | | Redo | Ctrl + Y | ⌘ + Y | Redoes the last undone action. | | Redo (alternative) | Ctrl + Shift + Z | ⌘ + Shift + Z | Alternative shortcut for redo. | | Share Component | Ctrl + Shift + S | ⌘ + Shift + S | Shares the component. | | Share Flow | Ctrl + Shift + B | ⌘ + Shift + B | Shares the entire flow. | | Toggle Sidebar | Ctrl + B | ⌘ + B | Shows/hides the sidebar. | | Search Components | / | / | Focuses the component search bar. | | Tool Mode | Ctrl + Shift + M | ⌘ + Shift + M | Toggles tool mode. | | Update | Ctrl + U | ⌘ + U | Updates the component. | | Open Playground | Ctrl + K | ⌘ + K | Opens the playground. | | Output Inspection | O | O | Opens output inspection. | | Play | P | P | Plays/executes the flow. | | API | R | R | Opens the API view. | ### Group components in the workspace Multiple components can be grouped into a single component for reuse. This is useful when combining large flows into single components, for example RAG with a vector database, and saving space. 1. Hold **Shift** and drag to select components. 2. Select **Group**. The components merge into a single component. 3. Double-click the name and description to change them. 4. Save your grouped component to the sidebar for later use. ### Component version A component's initial state is stored in a database. As soon as you drag a component from the sidebar to the workspace, the two components are no longer in parity. BroxiAI notifies you when a component's workspace version is behind the database version and an update is available. Click the **Update Component** icon to update the component to the `latest` version. This will change the code of the component in place so you can validate that the component was updated by checking its Python code before and after updating it. ### Components sidebar Components are listed in the sidebar by component type. **Classic** components are still being tested and are not suitable for production workloads. **Exp** components are available to use but no longer supported.