LangFlow技术深度解析：可视化编排LangChain应用的新范式 -（3）组件系统

Component System | langflow-ai/langflow | DeepWiki

组件系统

相关源文件

组件系统是核心基础设施，使 Langflow 能够在工作流中创建、配置和连接模块化构建块。该系统通过为组件提供一致的接口来定义其输入、输出、执行行为以及与其他组件的连接，从而为可视化编程体验提供支持。

有关内置组件的信息，请参阅内置组件。有关创建您自己的自定义组件的信息，请参阅自定义组件。

组件系统概述

Langflow 中的组件系统是围绕分层类结构构建的，该结构允许灵活地创建组件，同时强制执行一致的接口。组件可以表示各种功能，从语言模型和工具到数据转换器和 I/O 处理程序。

来源：来源/backend/base/langflow/custom/custom_component/component.py96-446 来源/backend/base/langflow/custom/custom_component/custom_component.py35-190 src/backend/base/langflow/template/field/base.py34-211

组件结构和生命周期

Langflow 中的组件从初始化到执行都遵循定义明确的生命周期：

来源：来源/backend/base/langflow/custom/custom_component/component.py101-147 来源/后端/基础/langflow/图形/顶点/base.py370-405 src/backend/base/langflow/interface/initialize/loading.py139-154

初始化和配置

初始化组件时，它会：

1. 设置其基本属性
2. 映射其输入和输出
3. 准备执行

# Simplified component initialization
def __init__(self, **kwargs) -> None:
    # Initialize instance-specific attributes
    self._inputs: dict[str, InputTypes] = {}
    self._outputs_map: dict[str, Output] = {}
    self._results: dict[str, Any] = {}
    
    # Process input kwargs
    inputs = {}
    config = {}
    for key, value in kwargs.items():
        if key.startswith("_"):
            config[key] = value
        else:
            inputs[key] = value
    
    # Store parameters
    self._parameters = inputs or {}
    
    # Setup inputs and outputs
    self.map_inputs(self.inputs)
    self.map_outputs()

来源：来源/backend/base/langflow/custom/custom_component/component.py101-163 来源/后端/基础/langflow/图形/顶点/base.py46-109

输入和输出系统

组件具有强大的输入和输出系统，可实现：

1. 定义他们接受和返回的数据类型
2. 连接到其他组件
3. 管理参数验证

每个组件都有：

• 定义它接受的参数的对象列表Input
• 定义它生成的结果的对象列表Output

来源：来源/backend/base/langflow/custom/custom_component/component.py254-407 src/backend/base/langflow/template/field/base.py34-211

组件连接和集成

Langflow 中的组件可以使用强大的连接系统连接在一起以形成工作流程。

Set 方法

该方法是配置组件并将其连接到其他组件的主要方法：set()

# Example of setting parameters and connecting components
model_component = OpenAIModelComponent()
model_component.set(model_name="gpt-4", temperature=0.7)

prompt_component = PromptComponent()
prompt_component.set(template="Answer this question: {question}")

# Connect the prompt to the model
output_component = ChatOutput()
output_component.set(model=model_component.build_model, prompt=prompt_component.format)

在后台，该方法：set()

1. 区分常规参数和组件连接
2. 对于组件连接，它会查找要连接到的适当方法
3. 将连接的元件添加到内部列表以进行跟踪
4. 在底层图形结构中创建一条边

来源：来源/backend/base/langflow/custom/custom_component/component.py316-400 来源/后端/基础/langflow/图形/边缘/base.py14-72

来源：来源/backend/base/langflow/custom/custom_component/component.py629-671 来源/后端/基础/langflow/graph/graph/base.py274-338

组件与 Graph System 集成

组件通过以下架构集成到 Langflow 的 Graph 系统中：

来源：来源/后端/基础/langflow/graph/graph/base.py59-166 来源/后端/基础/langflow/graph/graph/runnable_vertices_manager.py1-90

组件执行

当组件作为工作流的一部分执行时：

1. 图形中的每个顶点都根据依赖关系进行处理
2. 解析输入值（处理静态值和连通分量输出）
3. 组件的 build/run 方法被调用
4. 结果被存储并传递给依赖组件

来源：来源/backend/base/langflow/api/v1/chat.py256-416 来源/后端/基础/langflow/graph/graph/base.py731-785 来源/后端/基础/langflow/图形/顶点/base.py370-483

关键执行组件

组件的执行由几个关键系统管理：

1. Graph：编排整体执行并管理依赖项
2. Vertex：包装组件并处理其在图形中的集成
3. RunnableVerticesManager：确定顶点执行的顺序
4. Component：包含要执行的实际逻辑

来源：来源/后端/基础/langflow/graph/graph/base.py59-191 来源/后端/基础/langflow/graph/graph/runnable_vertices_manager.py4-87

创建自定义组件

要创建自定义组件，请扩展类并定义输入和输出：Component

from langflow.custom import Component
from langflow.field_typing import Text
from langflow.inputs.inputs import TextInput
from langflow.template.field.base import Output

class MyCustomComponent(Component):
    display_name = "My Component"
    description = "A custom component that does something"
    
    # Define inputs
    inputs = [
        TextInput(name="input_text", display_name="Input Text"),
    ]
    
    # Define outputs
    outputs = [
        Output(name="text_output", display_name="Text Output", method="process_text")
    ]
    
    # Define methods that match output methods
    def process_text(self) -> Text:
        # Process input_text parameter
        result = self.input_text.upper()
        return result
    
    # Run method is called by default
    async def run(self):
        return await self._run()

注册后，该组件将在 Langflow UI 中可用，并带有定义的输入和输出。

来源：来源/backend/base/langflow/custom/custom_component/component.py96-162 src/backend/base/langflow/template/field/base.py34-174 来源/后端/基础/langflow/基础/模型/model.py25-64

组件前端表示

组件需要在前端 UI 中表示。这是通过序列化表示完成的，前端可以使用该表示在 flow 编辑器中呈现组件。

来源：来源/backend/base/langflow/custom/custom_component/component.py800-847 来源/backend/base/langflow/template/frontend_node/base.py9-132

组件序列化过程

1. 组件定义输入、输出和方法
2. to_frontend_node()将其转换为结构化表示
3. 此结构序列化为前端的 JSON
4. 前端将其渲染为 flow 编辑器中的节点

这个过程允许前端确切地知道组件具有哪些输入和输出，它们接受哪些类型，以及如何向用户显示它们。

来源：来源/backend/base/langflow/custom/custom_component/component.py800-847 来源/backend/base/langflow/api/v1/schemas.py195-229 来源/backend/base/langflow/template/frontend_node/base.py67-114

组件与 API 层的交互

当用户通过 API 与组件交互时，流程为：

来源：来源/backend/base/langflow/api/v1/chat.py142-207 来源/后端/基础/langflow/api/v1/endpoints.py109-168

组件状态管理

组件可以通过图形的状态管理系统在图形执行中维护状态：

# Example of state management in a component
def update_state(self, name: str, value: Any) -> None:
    if not self._vertex:
        raise ValueError("Vertex is not set")
    try:
        self._vertex.graph.update_state(name=name, record=value, caller=self._vertex.id)
    except Exception as e:
        raise ValueError(f"Error updating state: {e}") from e

def get_state(self, name: str):
    if not self._vertex:
        raise ValueError("Vertex is not set")
    try:
        return self._vertex.graph.get_state(name=name)
    except Exception as e:
        raise ValueError(f"Error getting state: {e}") from e

这允许组件在正常的 input/output 流之外共享数据，这对于聊天界面等有状态应用程序特别有用。

来源：来源/backend/base/langflow/custom/custom_component/custom_component.py119-177 来源/后端/基础/langflow/graph/graph/base.py496-588

组件开发的最佳实践

开发自定义组件时：

1. 清晰的界面：使用适当的类型定义清晰的输入和输出
2. 验证：对输入参数实施适当的验证
3. 错误处理：妥善处理错误并提供有用的消息
4. 文档：记录组件的用途和用途
5. 可重用性：将组件设计为可在不同流程中重复使用
6. 性能：考虑组件的性能影响

来源：来源/backend/base/langflow/custom/custom_component/component.py457-469 来源/后端/基础/langflow/基础/模型/model.py66-94

组件系统集成点

组件系统与 Langflow 中的其他几个系统集成：

系统	集成点	目的
图形系统	顶点包装	组件由图中的顶点包裹
API 层	构建和执行	API 端点触发组件构建和执行
存储服务	参数持久性	可以存储和检索组件参数
跟踪服务	性能监控	可以跟踪组件执行以进行调试
事件系统	实时更新	组件可以在执行期间发出事件

来源：来源/后端/基础/langflow/graph/graph/base.py241-278 来源/backend/base/langflow/api/v1/chat.py142-207 src/backend/base/langflow/interface/initialize/loading.py106-135

总结

组件系统构成了 Langflow 可扩展架构的支柱：

1. 它为创建模块化构建块提供了一致的接口
2. 组件可以连接在一起以形成复杂的工作流程
3. 系统处理参数验证、执行和结果管理
4. 可以创建自定义组件以扩展功能
5. 该系统与 Graph System 集成以进行工作流编排
6. 前端表示允许在 UI 中进行可视化编程

了解组件系统对于有效使用 Langflow 以及使用自定义组件扩展它至关重要。

来源：来源/backend/base/langflow/custom/custom_component/component.py96-162 来源/后端/基础/langflow/graph/graph/base.py59-105 来源/后端/基础/langflow/图形/顶点/base.py46-109

Built-in Components | langflow-ai/langflow | DeepWiki

内置组件

相关源文件

本页概述了 Langflow 中的内置组件类型，包括语言模型 （LLM）、链、代理、内存、向量存储和工具。有关使用自定义组件扩展 Langflow 的信息，请参阅自定义组件。

1. 组件系统概述

内置组件是 Langflow 流的基础构建块，提供与各种语言模型功能和实用程序的预配置集成。这些组件可以通过 Flow Editor 连接在一起，无需编写代码即可创建复杂的 AI 工作流。

来源：来源/后端/基础/langflow/基础/模型/model.py25-26从系统架构图。

2. 组件基类

Langflow 的组件系统建立在基类的层次结构之上，这些基类为不同的组件类型提供一致的接口和功能。

2.1. Base 组件

该类是 Langflow 中所有组件的基础，提供：Component

• 输入和输出定义
• 配置属性
• 显示信息
• 加工方法

2.2. LCModelComponent 组件

该类扩展了基类，为语言模型组件提供了专门的功能：LCModelComponentComponent

来源：来源/后端/基础/langflow/基础/模型/model.py25-48

3. 组件类型

Langflow 根据组件在流中的功能和用途将组件组织到逻辑类别中。

3.1. 语言模型组件

语言模型组件为各种 LLM 提供程序和模型提供接口。它们继承自类。LCModelComponent

主要特点：

• 适用于所有语言模型的标准输入/输出接口
• 支持流式响应
• 系统消息处理
• 工具调用功能（如果模型支持）
• 响应元数据处理

标准输入包括：

• input_value：主要输入文本或消息
• system_message：模型的可选系统说明
• stream：用于启用流式响应的布尔标志

标准输出包括：

• text_output：生成的文本响应
• model_output：用于链接的语言模型实例

来源：来源/后端/基础/langflow/基础/模型/model.py33-47

3.2. 链组件

链组件实现 LangChain 链，这些链将多个作组合成可重用的序列。

链条的主要类型包括：

• LLM 链条
• 顺序链
• 变形链
• 路由器链
• 问答链

3.3. 代理组件

代理组件实现由 LLM 提供支持的自主代理，这些代理可以使用工具完成任务。

药物类型包括：

• ReAct 代理
• 函数调用代理
• 计划并执行代理
• 对话代理

3.4. 工具组件

工具组件提供可供座席使用或直接在流程中使用的专用功能。

工具类别包括：

• 搜索工具
• 计算工具
• 数据作工具
• API 集成工具

3.5. 内存组件

内存组件在会话期间或多次运行期间存储和检索信息。

内存类型包括：

• 对话记忆
• 向量存储内存
• 实体内存
• 摘要内存

3.6. Vector Store 组件

向量存储组件管理用于语义相似性搜索和检索的嵌入。

支持的矢量存储包括：

• FAISS
• Chroma
• Pinecone
• Weaviate
• Qdrant

4. 组件接口结构

Langflow 中的所有组件都遵循一致的接口模式，但根据组件类型会有一些变化。

4.1 输入参数

组件使用专门的输入类型定义输入：

输入类型	目的	例
文本输入	简单文本值	API 密钥、模型名称
多行输入	较长的文本内容	提示、系统消息
文件输入	文件上传	用于嵌入的文档
IntInput （输入）	整数值	令牌限制、温度
浮点输入	浮点值	相似性阈值
布尔输入	布尔标志	启用流式处理
模板输入	模板文本	自定义提示
DictInput （字典输入）	键值对	模型参数
消息输入	聊天消息	对话历史记录

来源：来源/后端/基础/langflow/基础/模型/model.py33-42

4.2 输出方法

组件定义可以连接到其他组件的输出：

中的输出方法包括：LCModelComponent

• text_response()：返回文本或消息响应
• build_model()：返回构造的模型实例

来源：来源/后端/基础/langflow/基础/模型/model.py44-47 来源/后端/基础/langflow/基础/模型/model.py78-87 来源/后端/基础/langflow/基础/模型/model.py246-248

5. 组件执行流程

组件的执行流程是标准化的，特别是对于语言模型组件。

5.1 文本响应生成

对于 LLM 组件，文本响应生成遵循以下模式：

1. 收集输入值和系统消息
2. 构建语言模型
3. 为模型准备消息
4. 使用流式处理或非流式处理模式进行处理
5. 解析响应并设置其格式
6. 返回结果

来源：来源/后端/基础/langflow/基础/模型/model.py78-87 来源/后端/基础/langflow/基础/模型/model.py163-244

5.2 模型构建

模型构建过程遵循一致的模式：

1. 该组件的方法称为build_model()
2. 验证输入参数
3. 对应的 LangChain 模型被实例化
4. 应用可选配置
5. 返回模型以供使用

来源：来源/后端/基础/langflow/基础/模型/model.py250-286 来源/后端/基础/langflow/基础/模型/model.py288-308

6. 组件集成模式

组件通过标准化模式相互集成，并与 Flow Editor 集成。

6.1 节点表示

在 Flow Editor 中，每个组件都表示为一个节点，其中包含：

• Input 处理匹配组件输入
• 输出处理匹配的组件输出
• 基于输入类型的参数 UI
• 执行状态的状态指示器

6.2 组件链接

通过将 output 连接到 inputs，可以将组件链接在一起：

6.3 工具集成

支持工具调用的语言模型可以与工具组件集成：

来源：来源/后端/基础/langflow/基础/模型/model.py52-64

7. 高级组件功能

7.1 流媒体支持

许多组件，尤其是 LLM 组件，都支持流式响应：

if stream:
    result = runnable.stream(inputs)
else:
    message = runnable.invoke(inputs)

来源：来源/后端/基础/langflow/基础/模型/model.py227-228

7.2 响应元数据

LLM 组件从模型响应中提取有用的元数据并设置其格式：

if isinstance(message, AIMessage):
    status_message = self.build_status_message(message)
    self.status = status_message

来源：来源/后端/基础/langflow/基础/模型/model.py232-233 来源/后端/基础/langflow/基础/模型/model.py114-161

7.3 输出解析

组件可以使用输出解析器来转换原始模型输出：

if hasattr(self, "output_parser") and self.output_parser is not None:
    runnable |= self.output_parser

来源：来源/后端/基础/langflow/基础/模型/model.py217-218

8. 总结

Langflow 的内置组件为创建语言模型应用程序提供了一套全面的构建块。组件系统使用一致的接口和继承模式，从而可以轻松地在 Flow Editor 中连接和配置组件。

核心组件类型（LLM、链、代理、工具、内存和向量存储）涵盖了大多数 LLM 应用程序所需的全部功能，从简单的提示响应流程到复杂的基于代理的系统。

Custom Components | langflow-ai/langflow | DeepWiki

自定义组件

相关源文件

目的和范围

自定义组件允许用户通过使用 Python 代码创建自己的可重用自定义节点来扩展 Langflow。本文档介绍了自定义组件的架构和实施，包括如何创建它们、它们与图形系统的集成以及最佳实践。有关内置组件的信息，请参阅内置组件。

架构概述

Langflow 中的自定义组件是通过支持功能和前端渲染的类层次结构实现的。该类继承自所有用户定义的组件，并为之提供基础。ComponentCustomComponent

来源：来源/backend/base/langflow/custom/custom_component/component.py 来源/backend/base/langflow/custom/custom_component/custom_component.py src/backend/base/langflow/template/field/base.py

组件类结构

主类为自定义组件提供核心功能：Component

来源：来源/backend/base/langflow/custom/custom_component/component.py96-161

创建自定义组件

要创建自定义组件：

1. 创建一个继承自Component
2. 使用输入类型定义输入langflow.inputs
3. 创建将用作输出的方法
4. 实现组件的逻辑

基本结构

from langflow.custom.custom_component.component import Component
from langflow.inputs import StrInput, IntInput

class MyComponent(Component):
    display_name = "My Custom Component"
    description = "Description of what this component does"
    icon = "🔧"  # Emoji icon for the component
    
    # Define inputs
    inputs = [
        StrInput(name="text_input", display_name="Text Input", required=True),
        IntInput(name="count", display_name="Count", default=5)
    ]
    
    # Define a method that will become an output
    def process_text(self) -> str:
        """Process the input text and return result"""
        # Access inputs as attributes
        text = self.text_input
        count = self.count
        
        # Process and return result
        return text * count

来源：来源/backend/base/langflow/custom/custom_component/component.py45-87

输入类型

Langflow 为自定义组件提供了多种输入类型：

输入类型	目的	字段类型
StrInput	文本输入	发短信
IntInput	整数值	整数
FloatInput	十进制值	浮
BoolInput	拨动开关	布尔
MultilineInput	多行文本	TEXT （多行）
FileInput	文件上传	文件
DropdownInput	从选项中选择	TEXT （下拉列表）
DataInput	数据结构	其他
TableInput	表格数据	桌子
CodeInput	代码片段	法典

来源：src/backend/base/langflow/inputs/inputs.py39-445 来源/后端/基础/langflow/inputs/input_mixin.py19-41

输入配置

输入可以使用各种参数进行配置：

from langflow.inputs import StrInput, IntInput, FloatInput, DropdownInput

inputs = [
    StrInput(
        name="api_key",
        display_name="API Key",
        required=True,
        password=True,
        placeholder="Enter your API key",
        info="The API key for authentication"
    ),
    IntInput(
        name="max_tokens",
        display_name="Max Tokens",
        default=100,
        range_spec={"min": 1, "max": 4096, "step": 1}
    ),
    FloatInput(
        name="temperature",
        display_name="Temperature",
        default=0.7,
        range_spec={"min": 0, "max": 2, "step": 0.1}
    ),
    DropdownInput(
        name="model",
        display_name="Model",
        options=["gpt-3.5-turbo", "gpt-4"],
        default="gpt-3.5-turbo"
    )
]

来源：src/backend/base/langflow/inputs/inputs.py113-169 src/backend/base/langflow/template/field/base.py34-95

输出和方法

在自定义组件中，每个方法都成为可以连接到其他组件的潜在输出。该方法的返回类型注释决定了它输出的数据类型。

from langflow.custom.custom_component.component import Component
from langflow.inputs import StrInput
from langflow.schema import Data

class TextProcessor(Component):
    display_name = "Text Processor"
    
    inputs = [
        StrInput(name="text", display_name="Input Text", required=True)
    ]
    
    def uppercase(self) -> str:
        """Return the text in uppercase"""
        return self.text.upper()
    
    def word_count(self) -> int:
        """Count words in the text"""
        return len(self.text.split())
    
    def as_data(self) -> Data:
        """Return the text as a Data object"""
        return Data(data={"text": self.text, "length": len(self.text)})

该方法会自动分析您的方法以确定它们需要哪些输入。_set_output_required_inputs

来源：来源/backend/base/langflow/custom/custom_component/component.py526-563

组件实例化和执行

在流程中执行组件时：

来源：来源/backend/base/langflow/api/v1/chat.py256-319 来源/后端/基础/langflow/图形/顶点/base.py370-402 src/backend/base/langflow/interface/initialize/loading.py23-49

Graph 集成

自定义组件与 Langflow 的图形系统集成，后者管理执行流程和组件之间的数据传递。

组件连接

组件在图形中通过将一个组件的输出连接到另一个组件的输入的边连接：

来源：来源/后端/基础/langflow/graph/graph/base.py257-277 来源/后端/基础/langflow/graph/graph/base.py290-339

前端表示

自定义组件会生成一个前端表示，用于确定它们在 Langflow UI 中的显示方式：

前端节点表示形式包括：

• 包含所有输入字段的模板
• 输出及其类型
• 显示属性（名称、图标、描述）
• 节点类型属性 （输入/输出状态）

来源：来源/backend/base/langflow/custom/custom_component/component.py800-847 来源/backend/base/langflow/template/frontend_node/base.py9-66

状态管理

组件可以访问和更新图中的共享状态：

def process(self):
    # Get existing state
    messages = self.get_state("chat_history") or []
    
    # Add new message
    messages.append({"role": "user", "content": self.input_text})
    
    # Update state
    self.update_state("chat_history", messages)
    
    return messages

关键状态管理方法：

• get_state(name)：按名称检索状态
• update_state(name, value)：更新状态
• append_state(name, value)：追加到现有状态

来源：来源/backend/base/langflow/custom/custom_component/component.py119-167

构建 UI 组件

自定义组件可以自定义其 UI 表示形式：

class MyComponent(Component):
    # Customize display properties
    display_name = "My Component"
    description = "This component does something useful"
    icon = "🔧"  # Emoji icon
    
    # Control field order in UI
    field_order = ["input_text", "option", "count"]
    
    # Customize field configuration
    field_config = {
        "input_text": {
            "display_name": "Text Input",
            "info": "Enter the text to process",
            "advanced": False
        },
        "option": {
            "display_name": "Processing Option",
            "options": ["Option A", "Option B", "Option C"],
            "default": "Option A"
        }
    }

来源：来源/后端/基础/langflow/自定义/utils.py62-73 来源/前端/src/components/core/parameterRenderComponent/index.tsx

组件运行时行为

当组件运行时，它遵循以下过程：

1. 初始化：参数设置为属性
2. Input Resolution（输入分辨率）：已解析连接的输入
3. Build：执行组件的逻辑
4. Output Collection：为定义的输出收集结果

来源：来源/backend/base/langflow/custom/custom_component/component.py704-719 来源/后端/基础/langflow/图形/顶点/base.py362-461

最佳实践

1. 清晰的文档：使用文档字符串记录您的组件及其方法
2. 输入验证：验证输入以避免运行时错误
3. 错误处理：正常捕获和处理异常
4. 类型注释：为输出方法使用适当的返回类型注释
5. 无状态设计：尽可能首选无状态组件
6. 可重用性：将组件设计为可在不同上下文中重用
7. 性能：考虑大数据对性能的影响

完整示例

这是一个完整的自定义组件示例：

from langflow.custom.custom_component.component import Component
from langflow.inputs import StrInput, IntInput, BoolInput, DropdownInput
from langflow.schema import Data

class TextAnalyzer(Component):
    """A component that analyzes text and provides various metrics."""

    display_name = "Text Analyzer"
    description = "Analyzes text and provides various metrics and transformations"
    icon = "📊"

    # Define inputs
    inputs = [
        StrInput(name="text", display_name="Input Text", required=True),
        IntInput(name="min_length", display_name="Minimum Word Length", default=3),
        BoolInput(name="include_statistics", display_name="Include Statistics", default=True),
        DropdownInput(
            name="case_operation", 
            display_name="Case Operation",
            options=["none", "uppercase", "lowercase", "titlecase"],
            default="none"
        )
    ]

    def filter_words(self) -> list:
        """Filter words by minimum length."""
        words = self.text.split()
        return [word for word in words if len(word) >= self.min_length]

    def transform_text(self) -> str:
        """Apply the selected case transformation."""
        match self.case_operation:
            case "uppercase":
                return self.text.upper()
            case "lowercase":
                return self.text.lower()
            case "titlecase":
                return self.text.title()
            case _:
                return self.text

    def analyze(self) -> Data:
        """Analyze the text and return metrics."""
        words = self.text.split()
        result = {
            "word_count": len(words),
            "character_count": len(self.text),
            "transformed_text": self.transform_text()
        }

        if self.include_statistics:
            avg_word_length = sum(len(word) for word in words) / max(len(words), 1)
            result.update({
                "average_word_length": round(avg_word_length, 2),
                "unique_words": len(set(words)),
                "filtered_words": self.filter_words()
            })

        return Data(data=result)

来源：来源/backend/base/langflow/custom/custom_component/component.py