feat: Add dataframe output to data list components (#6987)

* feat: Add dataframe output to data list components

* [autofix.ci] apply automated fixes

* Update src/backend/base/langflow/components/data/api_request.py

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: make function async

* fix tests

* fix tests

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Edwin Jose <edwin.jose@datastax.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: italojohnny <italojohnnydosanjos@gmail.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>

src/backend/base/langflow/components/data/api_request.py

@@ -27,6 +27,7 @@ from langflow.io import (
     TableInput,
 )
 from langflow.schema import Data
+from langflow.schema.dataframe import DataFrame
 from langflow.schema.dotdict import dotdict
 
 
@@ -156,6 +157,7 @@ class APIRequestComponent(Component):
 
     outputs = [
         Output(display_name="Data", name="data", method="make_requests"),
+        Output(display_name="DataFrame", name="dataframe", method="as_dataframe"),
     ]
 
     def _parse_json_value(self, value: Any) -> Any:
@@ -641,3 +643,12 @@ class APIRequestComponent(Component):
                 return {}  # Return empty dictionary instead of None
             return processed_headers
         return {}
+
+    async def as_dataframe(self) -> DataFrame:
+        """Convert the API response data into a DataFrame.
+
+        Returns:
+            DataFrame: A DataFrame containing the API response data.
+        """
+        data = await self.make_requests()
+        return DataFrame(data)

src/backend/base/langflow/components/helpers/create_list.py

@@ -1,6 +1,7 @@
 from langflow.custom import Component
 from langflow.inputs import StrInput
 from langflow.schema import Data
+from langflow.schema.dataframe import DataFrame
 from langflow.template import Output
 
 
@@ -22,9 +23,18 @@ class CreateListComponent(Component):
 
     outputs = [
         Output(display_name="Data List", name="list", method="create_list"),
+        Output(display_name="DataFrame", name="dataframe", method="as_dataframe"),
     ]
 
     def create_list(self) -> list[Data]:
         data = [Data(text=text) for text in self.texts]
         self.status = data
         return data
+
+    def as_dataframe(self) -> DataFrame:
+        """Convert the list of Data objects into a DataFrame.
+
+        Returns:
+            DataFrame: A DataFrame containing the list data.
+        """
+        return DataFrame(self.create_list())

src/backend/base/langflow/components/helpers/memory.py

@@ -4,6 +4,7 @@ from langflow.inputs import HandleInput
 from langflow.io import DropdownInput, IntInput, MessageTextInput, MultilineInput, Output
 from langflow.memory import aget_messages
 from langflow.schema import Data
+from langflow.schema.dataframe import DataFrame
 from langflow.schema.message import Message
 from langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_USER
 
@@ -70,6 +71,7 @@ class MemoryComponent(Component):
     outputs = [
         Output(display_name="Data", name="messages", method="retrieve_messages"),
         Output(display_name="Message", name="messages_text", method="retrieve_messages_as_text"),
+        Output(display_name="DataFrame", name="dataframe", method="as_dataframe"),
     ]
 
     async def retrieve_messages(self) -> Data:
@@ -116,3 +118,12 @@ class MemoryComponent(Component):
         stored_text = data_to_text(self.template, await self.retrieve_messages())
         self.status = stored_text
         return Message(text=stored_text)
+
+    async def as_dataframe(self) -> DataFrame:
+        """Convert the retrieved messages into a DataFrame.
+
+        Returns:
+            DataFrame: A DataFrame containing the message data.
+        """
+        messages = await self.retrieve_messages()
+        return DataFrame(messages)

src/backend/base/langflow/components/processing/alter_metadata.py

@@ -1,7 +1,7 @@
 from langflow.custom import Component
 from langflow.inputs import MessageTextInput
 from langflow.io import HandleInput, NestedDictInput, Output, StrInput
-from langflow.schema import Data
+from langflow.schema import Data, DataFrame
 
 
 class AlterMetadataComponent(Component):
@@ -48,6 +48,12 @@ class AlterMetadataComponent(Component):
             info="List of Input objects each with added Metadata",
             method="process_output",
         ),
+        Output(
+            display_name="DataFrame",
+            name="dataframe",
+            info="Data objects as a DataFrame, with metadata as columns",
+            method="as_dataframe",
+        ),
     ]
 
     def _as_clean_dict(self, obj):
@@ -88,3 +94,13 @@ class AlterMetadataComponent(Component):
         # Set the status for tracking/debugging purposes
         self.status = data_objects
         return data_objects
+
+    def as_dataframe(self) -> DataFrame:
+        """Convert the processed data objects into a DataFrame.
+
+        Returns:
+            DataFrame: A DataFrame where each row corresponds to a Data object,
+                    with metadata fields as columns.
+        """
+        data_list = self.process_output()
+        return DataFrame(data_list)

src/backend/base/langflow/components/tools/arxiv.py

@@ -6,7 +6,7 @@ from defusedxml.ElementTree import fromstring
 
 from langflow.custom import Component
 from langflow.io import DropdownInput, IntInput, MessageTextInput, Output
-from langflow.schema import Data
+from langflow.schema import Data, DataFrame
 
 
 class ArXivComponent(Component):
@@ -37,7 +37,8 @@ class ArXivComponent(Component):
     ]
 
     outputs = [
-        Output(display_name="Papers", name="papers", method="search_papers"),
+        Output(display_name="Data", name="data", method="search_papers"),
+        Output(display_name="DataFrame", name="dataframe", method="as_dataframe"),
     ]
 
     def build_query_url(self) -> str:
@@ -148,3 +149,14 @@ class ArXivComponent(Component):
             return [error_data]
         else:
             return results
+
+    def as_dataframe(self) -> DataFrame:
+        """Convert the Arxiv search results to a DataFrame.
+
+        Returns:
+            DataFrame: A DataFrame containing the search results.
+        """
+        data = self.search_papers()
+        if isinstance(data, list):
+            return DataFrame(data=[d.data for d in data])
+        return DataFrame(data=[data.data])

src/backend/base/langflow/components/tools/glean_search_api.py

@@ -10,7 +10,8 @@ from pydantic.v1 import Field
 from langflow.base.langchain_utilities.model import LCToolComponent
 from langflow.field_typing import Tool
 from langflow.inputs import IntInput, MultilineInput, NestedDictInput, SecretStrInput, StrInput
-from langflow.schema import Data
+from langflow.io import Output
+from langflow.schema import Data, DataFrame
 
 
 class GleanSearchAPISchema(BaseModel):
@@ -97,10 +98,15 @@ class GleanAPIWrapper(BaseModel):
 
 
 class GleanSearchAPIComponent(LCToolComponent):
-    display_name = "Glean Search API"
+    display_name: str = "Glean Search API"
-    description = "Call Glean Search API"
+    description: str = "Search using Glean's API."
-    name = "GleanAPI"
+    documentation: str = "https://docs.langflow.org/Components/components-tools#glean-search-api"
-    icon = "Glean"
+    icon: str = "GleanSearch"
+
+    outputs = [
+        Output(display_name="Data", name="data", method="run_model"),
+        Output(display_name="DataFrame", name="dataframe", method="as_dataframe"),
+    ]
 
     inputs = [
         StrInput(
@@ -157,3 +163,14 @@ class GleanSearchAPIComponent(LCToolComponent):
             glean_api_url=glean_api_url,
             glean_access_token=glean_access_token,
         )
+
+    def as_dataframe(self) -> DataFrame:
+        """Convert the Glean search results to a DataFrame.
+
+        Returns:
+            DataFrame: A DataFrame containing the search results.
+        """
+        data = self.run_model()
+        if isinstance(data, list):
+            return DataFrame(data=[d.data for d in data])
+        return DataFrame(data=[data.data])

src/backend/base/langflow/components/tools/search.py

@@ -5,7 +5,7 @@ from langchain_community.utilities.searchapi import SearchApiAPIWrapper
 from langflow.custom import Component
 from langflow.inputs import DictInput, DropdownInput, IntInput, MultilineInput, SecretStrInput
 from langflow.io import Output
-from langflow.schema import Data
+from langflow.schema import Data, DataFrame
 from langflow.schema.message import Message
 
 
@@ -31,6 +31,7 @@ class SearchComponent(Component):
     outputs = [
         Output(display_name="Data", name="data", method="fetch_content"),
         Output(display_name="Text", name="text", method="fetch_content_text"),
+        Output(display_name="DataFrame", name="dataframe", method="as_dataframe"),
     ]
 
     def _build_wrapper(self):
@@ -77,3 +78,12 @@ class SearchComponent(Component):
             result_string += item.text + "\n"
         self.status = result_string
         return Message(text=result_string)
+
+    def as_dataframe(self) -> DataFrame:
+        """Convert the search results to a DataFrame.
+
+        Returns:
+            DataFrame: A DataFrame containing the search results.
+        """
+        data = self.fetch_content()
+        return DataFrame(data)

src/backend/base/langflow/components/tools/wikipedia.py

@@ -3,7 +3,7 @@ from langchain_community.utilities.wikipedia import WikipediaAPIWrapper
 from langflow.custom import Component
 from langflow.inputs import BoolInput, IntInput, MessageTextInput, MultilineInput
 from langflow.io import Output
-from langflow.schema import Data
+from langflow.schema import Data, DataFrame
 from langflow.schema.message import Message
 
 
@@ -28,7 +28,7 @@ class WikipediaComponent(Component):
 
     outputs = [
         Output(display_name="Data", name="data", method="fetch_content"),
-        Output(display_name="Text", name="text", method="fetch_content_text"),
+        Output(display_name="DataFrame", name="dataframe", method="as_dataframe"),
     ]
 
     def fetch_content(self) -> list[Data]:
@@ -53,3 +53,12 @@ class WikipediaComponent(Component):
             load_all_available_meta=self.load_all_available_meta,
             doc_content_chars_max=self.doc_content_chars_max,
         )
+
+    def as_dataframe(self) -> DataFrame:
+        """Convert the Wikipedia results to a DataFrame.
+
+        Returns:
+            DataFrame: A DataFrame containing the Wikipedia results.
+        """
+        data = self.fetch_content()
+        return DataFrame(data)

src/backend/base/langflow/components/tools/wolfram_alpha_api.py

@@ -3,7 +3,8 @@ from langchain_community.utilities.wolfram_alpha import WolframAlphaAPIWrapper
 from langflow.base.langchain_utilities.model import LCToolComponent
 from langflow.field_typing import Tool
 from langflow.inputs import MultilineInput, SecretStrInput
-from langflow.schema import Data
+from langflow.io import Output
+from langflow.schema import Data, DataFrame
 
 
 class WolframAlphaAPIComponent(LCToolComponent):
@@ -12,6 +13,11 @@ class WolframAlphaAPIComponent(LCToolComponent):
 topics, delivering structured responses."""
     name = "WolframAlphaAPI"
 
+    outputs = [
+        Output(display_name="Data", name="data", method="run_model"),
+        Output(display_name="DataFrame", name="dataframe", method="as_dataframe"),
+    ]
+
     inputs = [
         MultilineInput(
             name="input_value", display_name="Input Query", info="Example query: 'What is the population of France?'"
@@ -34,3 +40,12 @@ topics, delivering structured responses."""
 
     def _build_wrapper(self) -> WolframAlphaAPIWrapper:
         return WolframAlphaAPIWrapper(wolfram_alpha_appid=self.app_id)
+
+    def as_dataframe(self) -> DataFrame:
+        """Convert the Wolfram Alpha results to a DataFrame.
+
+        Returns:
+            DataFrame: A DataFrame containing the query results.
+        """
+        data = self.run_model()
+        return DataFrame(data)

src/backend/base/langflow/components/tools/yahoo.py

@@ -10,7 +10,7 @@ from pydantic import BaseModel, Field
 from langflow.custom import Component
 from langflow.inputs import DropdownInput, IntInput, MessageTextInput
 from langflow.io import Output
-from langflow.schema import Data
+from langflow.schema import Data, DataFrame
 from langflow.schema.message import Message
 
 
@@ -79,6 +79,7 @@ to access financial data and market information from Yahoo Finance."""
     outputs = [
         Output(display_name="Data", name="data", method="fetch_content"),
         Output(display_name="Text", name="text", method="fetch_content_text"),
+        Output(display_name="DataFrame", name="dataframe", method="as_dataframe"),
     ]
 
     def run_model(self) -> list[Data]:
@@ -140,3 +141,12 @@ to access financial data and market information from Yahoo Finance."""
             data_list = [Data(text=result, data={"result": result})]
 
         return data_list
+
+    def as_dataframe(self) -> DataFrame:
+        """Convert the Yahoo search results to a DataFrame.
+
+        Returns:
+            DataFrame: A DataFrame containing the search results.
+        """
+        data = self.fetch_content()
+        return DataFrame(data)

src/backend/base/langflow/initial_setup/starter_projects/Travel Planning Agents.json

@@ -7,7 +7,7 @@
         "data": {
           "sourceHandle": {
             "dataType": "Agent",
-            "id": "Agent-e5naw",
+            "id": "Agent-PKpSO",
             "name": "response",
             "output_types": [
               "Message"
@@ -15,7 +15,7 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "ChatOutput-NdG8s",
+            "id": "ChatOutput-8np0X",
             "inputTypes": [
               "Data",
               "DataFrame",
@@ -24,11 +24,12 @@
             "type": "str"
           }
         },
-        "id": "reactflow__edge-Agent-e5naw{œdataTypeœ:œAgentœ,œidœ:œAgent-e5nawœ,œnameœ:œresponseœ,œoutput_typesœ:[œMessageœ]}-ChatOutput-NdG8s{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-NdG8sœ,œinputTypesœ:[œDataœ,œDataFrameœ,œMessageœ],œtypeœ:œstrœ}",
+        "id": "reactflow__edge-Agent-PKpSO{œdataTypeœ:œAgentœ,œidœ:œAgent-PKpSOœ,œnameœ:œresponseœ,œoutput_typesœ:[œMessageœ]}-ChatOutput-8np0X{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-8np0Xœ,œinputTypesœ:[œDataœ,œDataFrameœ,œMessageœ],œtypeœ:œstrœ}",
-        "source": "Agent-e5naw",
+        "selected": false,
-        "sourceHandle": "{œdataTypeœ: œAgentœ, œidœ: œAgent-e5nawœ, œnameœ: œresponseœ, œoutput_typesœ: [œMessageœ]}",
+        "source": "Agent-PKpSO",
-        "target": "ChatOutput-NdG8s",
+        "sourceHandle": "{œdataTypeœ: œAgentœ, œidœ: œAgent-PKpSOœ, œnameœ: œresponseœ, œoutput_typesœ: [œMessageœ]}",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-NdG8sœ, œinputTypesœ: [œDataœ, œDataFrameœ, œMessageœ], œtypeœ: œstrœ}"
+        "target": "ChatOutput-8np0X",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œChatOutput-8np0Xœ, œinputTypesœ: [œDataœ, œDataFrameœ, œMessageœ], œtypeœ: œstrœ}"
       },
       {
         "animated": false,
@@ -36,7 +37,7 @@
         "data": {
           "sourceHandle": {
             "dataType": "Agent",
-            "id": "Agent-PWZOu",
+            "id": "Agent-zOYup",
             "name": "response",
             "output_types": [
               "Message"
@@ -44,18 +45,19 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "Agent-e5naw",
+            "id": "Agent-PKpSO",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-Agent-PWZOu{œdataTypeœ:œAgentœ,œidœ:œAgent-PWZOuœ,œnameœ:œresponseœ,œoutput_typesœ:[œMessageœ]}-Agent-e5naw{œfieldNameœ:œinput_valueœ,œidœ:œAgent-e5nawœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "id": "reactflow__edge-Agent-zOYup{œdataTypeœ:œAgentœ,œidœ:œAgent-zOYupœ,œnameœ:œresponseœ,œoutput_typesœ:[œMessageœ]}-Agent-PKpSO{œfieldNameœ:œinput_valueœ,œidœ:œAgent-PKpSOœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "Agent-PWZOu",
+        "selected": false,
-        "sourceHandle": "{œdataTypeœ: œAgentœ, œidœ: œAgent-PWZOuœ, œnameœ: œresponseœ, œoutput_typesœ: [œMessageœ]}",
+        "source": "Agent-zOYup",
-        "target": "Agent-e5naw",
+        "sourceHandle": "{œdataTypeœ: œAgentœ, œidœ: œAgent-zOYupœ, œnameœ: œresponseœ, œoutput_typesœ: [œMessageœ]}",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œAgent-e5nawœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
+        "target": "Agent-PKpSO",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œAgent-PKpSOœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       },
       {
         "animated": false,
@@ -63,7 +65,7 @@
         "data": {
           "sourceHandle": {
             "dataType": "Agent",
-            "id": "Agent-3H5qa",
+            "id": "Agent-7K58a",
             "name": "response",
             "output_types": [
               "Message"
@@ -71,18 +73,19 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "Agent-PWZOu",
+            "id": "Agent-zOYup",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-Agent-3H5qa{œdataTypeœ:œAgentœ,œidœ:œAgent-3H5qaœ,œnameœ:œresponseœ,œoutput_typesœ:[œMessageœ]}-Agent-PWZOu{œfieldNameœ:œinput_valueœ,œidœ:œAgent-PWZOuœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "id": "reactflow__edge-Agent-7K58a{œdataTypeœ:œAgentœ,œidœ:œAgent-7K58aœ,œnameœ:œresponseœ,œoutput_typesœ:[œMessageœ]}-Agent-zOYup{œfieldNameœ:œinput_valueœ,œidœ:œAgent-zOYupœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "Agent-3H5qa",
+        "selected": false,
-        "sourceHandle": "{œdataTypeœ: œAgentœ, œidœ: œAgent-3H5qaœ, œnameœ: œresponseœ, œoutput_typesœ: [œMessageœ]}",
+        "source": "Agent-7K58a",
-        "target": "Agent-PWZOu",
+        "sourceHandle": "{œdataTypeœ: œAgentœ, œidœ: œAgent-7K58aœ, œnameœ: œresponseœ, œoutput_typesœ: [œMessageœ]}",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œAgent-PWZOuœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
+        "target": "Agent-zOYup",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œAgent-zOYupœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       },
       {
         "animated": false,
@@ -90,7 +93,7 @@
         "data": {
           "sourceHandle": {
             "dataType": "ChatInput",
-            "id": "ChatInput-LIxJY",
+            "id": "ChatInput-iZoDa",
             "name": "message",
             "output_types": [
               "Message"
@@ -98,18 +101,19 @@
           },
           "targetHandle": {
             "fieldName": "input_value",
-            "id": "Agent-3H5qa",
+            "id": "Agent-7K58a",
             "inputTypes": [
               "Message"
             ],
             "type": "str"
           }
         },
-        "id": "reactflow__edge-ChatInput-LIxJY{œdataTypeœ:œChatInputœ,œidœ:œChatInput-LIxJYœ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-Agent-3H5qa{œfieldNameœ:œinput_valueœ,œidœ:œAgent-3H5qaœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
+        "id": "reactflow__edge-ChatInput-iZoDa{œdataTypeœ:œChatInputœ,œidœ:œChatInput-iZoDaœ,œnameœ:œmessageœ,œoutput_typesœ:[œMessageœ]}-Agent-7K58a{œfieldNameœ:œinput_valueœ,œidœ:œAgent-7K58aœ,œinputTypesœ:[œMessageœ],œtypeœ:œstrœ}",
-        "source": "ChatInput-LIxJY",
+        "selected": false,
-        "sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-LIxJYœ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
+        "source": "ChatInput-iZoDa",
-        "target": "Agent-3H5qa",
+        "sourceHandle": "{œdataTypeœ: œChatInputœ, œidœ: œChatInput-iZoDaœ, œnameœ: œmessageœ, œoutput_typesœ: [œMessageœ]}",
-        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œAgent-3H5qaœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
+        "target": "Agent-7K58a",
+        "targetHandle": "{œfieldNameœ: œinput_valueœ, œidœ: œAgent-7K58aœ, œinputTypesœ: [œMessageœ], œtypeœ: œstrœ}"
       },
       {
         "animated": false,
@@ -117,7 +121,7 @@
         "data": {
           "sourceHandle": {
             "dataType": "URL",
-            "id": "URL-XDhvs",
+            "id": "URL-j9slU",
             "name": "component_as_tool",
             "output_types": [
               "Tool"
@@ -125,18 +129,19 @@
           },
           "targetHandle": {
             "fieldName": "tools",
-            "id": "Agent-PWZOu",
+            "id": "Agent-zOYup",
             "inputTypes": [
               "Tool"
             ],
             "type": "other"
           }
         },
-        "id": "reactflow__edge-URL-XDhvs{œdataTypeœ:œURLœ,œidœ:œURL-XDhvsœ,œnameœ:œcomponent_as_toolœ,œoutput_typesœ:[œToolœ]}-Agent-PWZOu{œfieldNameœ:œtoolsœ,œidœ:œAgent-PWZOuœ,œinputTypesœ:[œToolœ],œtypeœ:œotherœ}",
+        "id": "reactflow__edge-URL-j9slU{œdataTypeœ:œURLœ,œidœ:œURL-j9slUœ,œnameœ:œcomponent_as_toolœ,œoutput_typesœ:[œToolœ]}-Agent-zOYup{œfieldNameœ:œtoolsœ,œidœ:œAgent-zOYupœ,œinputTypesœ:[œToolœ],œtypeœ:œotherœ}",
-        "source": "URL-XDhvs",
+        "selected": false,
-        "sourceHandle": "{œdataTypeœ: œURLœ, œidœ: œURL-XDhvsœ, œnameœ: œcomponent_as_toolœ, œoutput_typesœ: [œToolœ]}",
+        "source": "URL-j9slU",
-        "target": "Agent-PWZOu",
+        "sourceHandle": "{œdataTypeœ: œURLœ, œidœ: œURL-j9slUœ, œnameœ: œcomponent_as_toolœ, œoutput_typesœ: [œToolœ]}",
-        "targetHandle": "{œfieldNameœ: œtoolsœ, œidœ: œAgent-PWZOuœ, œinputTypesœ: [œToolœ], œtypeœ: œotherœ}"
+        "target": "Agent-zOYup",
+        "targetHandle": "{œfieldNameœ: œtoolsœ, œidœ: œAgent-zOYupœ, œinputTypesœ: [œToolœ], œtypeœ: œotherœ}"
       },
       {
         "animated": false,
@@ -144,7 +149,7 @@
         "data": {
           "sourceHandle": {
             "dataType": "CalculatorComponent",
-            "id": "CalculatorComponent-N83tJ",
+            "id": "CalculatorComponent-L3y5A",
             "name": "component_as_tool",
             "output_types": [
               "Tool"
@@ -152,18 +157,19 @@
           },
           "targetHandle": {
             "fieldName": "tools",
-            "id": "Agent-e5naw",
+            "id": "Agent-PKpSO",
             "inputTypes": [
               "Tool"
             ],
             "type": "other"
           }
         },
-        "id": "reactflow__edge-CalculatorComponent-N83tJ{œdataTypeœ:œCalculatorComponentœ,œidœ:œCalculatorComponent-N83tJœ,œnameœ:œcomponent_as_toolœ,œoutput_typesœ:[œToolœ]}-Agent-e5naw{œfieldNameœ:œtoolsœ,œidœ:œAgent-e5nawœ,œinputTypesœ:[œToolœ],œtypeœ:œotherœ}",
+        "id": "reactflow__edge-CalculatorComponent-L3y5A{œdataTypeœ:œCalculatorComponentœ,œidœ:œCalculatorComponent-L3y5Aœ,œnameœ:œcomponent_as_toolœ,œoutput_typesœ:[œToolœ]}-Agent-PKpSO{œfieldNameœ:œtoolsœ,œidœ:œAgent-PKpSOœ,œinputTypesœ:[œToolœ],œtypeœ:œotherœ}",
-        "source": "CalculatorComponent-N83tJ",
+        "selected": false,
-        "sourceHandle": "{œdataTypeœ: œCalculatorComponentœ, œidœ: œCalculatorComponent-N83tJœ, œnameœ: œcomponent_as_toolœ, œoutput_typesœ: [œToolœ]}",
+        "source": "CalculatorComponent-L3y5A",
-        "target": "Agent-e5naw",
+        "sourceHandle": "{œdataTypeœ: œCalculatorComponentœ, œidœ: œCalculatorComponent-L3y5Aœ, œnameœ: œcomponent_as_toolœ, œoutput_typesœ: [œToolœ]}",
-        "targetHandle": "{œfieldNameœ: œtoolsœ, œidœ: œAgent-e5nawœ, œinputTypesœ: [œToolœ], œtypeœ: œotherœ}"
+        "target": "Agent-PKpSO",
+        "targetHandle": "{œfieldNameœ: œtoolsœ, œidœ: œAgent-PKpSOœ, œinputTypesœ: [œToolœ], œtypeœ: œotherœ}"
       },
       {
         "animated": false,
@@ -171,7 +177,7 @@
         "data": {
           "sourceHandle": {
             "dataType": "SearchComponent",
-            "id": "SearchComponent-fF95b",
+            "id": "SearchComponent-8lQPB",
             "name": "component_as_tool",
             "output_types": [
               "Tool"
@@ -179,24 +185,25 @@
           },
           "targetHandle": {
             "fieldName": "tools",
-            "id": "Agent-3H5qa",
+            "id": "Agent-7K58a",
             "inputTypes": [
               "Tool"
             ],
             "type": "other"
           }
         },
-        "id": "reactflow__edge-SearchComponent-fF95b{œdataTypeœ:œSearchComponentœ,œidœ:œSearchComponent-fF95bœ,œnameœ:œcomponent_as_toolœ,œoutput_typesœ:[œToolœ]}-Agent-3H5qa{œfieldNameœ:œtoolsœ,œidœ:œAgent-3H5qaœ,œinputTypesœ:[œToolœ],œtypeœ:œotherœ}",
+        "id": "reactflow__edge-SearchComponent-8lQPB{œdataTypeœ:œSearchComponentœ,œidœ:œSearchComponent-8lQPBœ,œnameœ:œcomponent_as_toolœ,œoutput_typesœ:[œToolœ]}-Agent-7K58a{œfieldNameœ:œtoolsœ,œidœ:œAgent-7K58aœ,œinputTypesœ:[œToolœ],œtypeœ:œotherœ}",
-        "source": "SearchComponent-fF95b",
+        "selected": false,
-        "sourceHandle": "{œdataTypeœ: œSearchComponentœ, œidœ: œSearchComponent-fF95bœ, œnameœ: œcomponent_as_toolœ, œoutput_typesœ: [œToolœ]}",
+        "source": "SearchComponent-8lQPB",
-        "target": "Agent-3H5qa",
+        "sourceHandle": "{œdataTypeœ: œSearchComponentœ, œidœ: œSearchComponent-8lQPBœ, œnameœ: œcomponent_as_toolœ, œoutput_typesœ: [œToolœ]}",
-        "targetHandle": "{œfieldNameœ: œtoolsœ, œidœ: œAgent-3H5qaœ, œinputTypesœ: [œToolœ], œtypeœ: œotherœ}"
+        "target": "Agent-7K58a",
+        "targetHandle": "{œfieldNameœ: œtoolsœ, œidœ: œAgent-7K58aœ, œinputTypesœ: [œToolœ], œtypeœ: œotherœ}"
       }
     ],
     "nodes": [
       {
         "data": {
-          "id": "ChatInput-LIxJY",
+          "id": "ChatInput-iZoDa",
           "node": {
             "base_classes": [
               "Message"
@@ -467,7 +474,7 @@
         },
         "dragging": false,
         "height": 262,
-        "id": "ChatInput-LIxJY",
+        "id": "ChatInput-iZoDa",
         "measured": {
           "height": 262,
           "width": 360
@@ -488,7 +495,7 @@
         "data": {
           "description": "Display a chat message in the Playground.",
           "display_name": "Chat Output",
-          "id": "ChatOutput-NdG8s",
+          "id": "ChatOutput-8np0X",
           "node": {
             "base_classes": [
               "Message"
@@ -770,7 +777,7 @@
         },
         "dragging": false,
         "height": 262,
-        "id": "ChatOutput-NdG8s",
+        "id": "ChatOutput-8np0X",
         "measured": {
           "height": 262,
           "width": 360
@@ -791,7 +798,7 @@
         "data": {
           "description": "Define the agent's instructions, then enter a task to complete using tools.",
           "display_name": "City Selection Agent",
-          "id": "Agent-3H5qa",
+          "id": "Agent-7K58a",
           "node": {
             "base_classes": [
               "Message"
@@ -1390,7 +1397,7 @@
         },
         "dragging": true,
         "height": 725,
-        "id": "Agent-3H5qa",
+        "id": "Agent-7K58a",
         "measured": {
           "height": 725,
           "width": 360
@@ -1411,7 +1418,7 @@
         "data": {
           "description": "Define the agent's instructions, then enter a task to complete using tools.",
           "display_name": "Local Expert Agent",
-          "id": "Agent-PWZOu",
+          "id": "Agent-zOYup",
           "node": {
             "base_classes": [
               "Message"
@@ -2010,7 +2017,7 @@
         },
         "dragging": false,
         "height": 725,
-        "id": "Agent-PWZOu",
+        "id": "Agent-zOYup",
         "measured": {
           "height": 725,
           "width": 360
@@ -2031,7 +2038,7 @@
         "data": {
           "description": "Define the agent's instructions, then enter a task to complete using tools.",
           "display_name": "Travel Concierge Agent",
-          "id": "Agent-e5naw",
+          "id": "Agent-PKpSO",
           "node": {
             "base_classes": [
               "Message"
@@ -2630,7 +2637,7 @@
         },
         "dragging": false,
         "height": 725,
-        "id": "Agent-e5naw",
+        "id": "Agent-PKpSO",
         "measured": {
           "height": 725,
           "width": 360
@@ -2649,7 +2656,7 @@
       },
       {
         "data": {
-          "id": "note-qLmmh",
+          "id": "note-gUKzO",
           "node": {
             "description": "# Travel Planning Agents \n\nThe travel planning system is a smart setup that uses several specialized \"agents\" to help plan incredible trips. Imagine each agent as a travel expert focusing on a part of your journey. Here's how it works:\n\n- **User-Friendly Start:** You start by telling the system about your travel needs—where you want to go and what you love to do.\n\n- **Data Collection:** The agents uses its tools to gather current info about various destinations, like the best travel times, weather, and costs.\n\n- **Three Key Agents:**\n  - **City Selection Agent:** Picks the best places to visit based on your likes and current data.\n  - **Local Expert Agent:** Gathers interesting details about what to do and see in the chosen city.\n  - **Travel Concierge Agent:** Builds a day-by-day plan that includes where to stay, eat, and explore!\n\n- **Tools and Data:** Each agent uses tools to find and organize the latest information so you get recommendations that are both accurate and exciting.\n\n- **Final Plan:** Once everything is put together, you receive a complete, easy-to-follow travel itinerary, perfect for your adventure!\n",
             "display_name": "",
@@ -2660,7 +2667,7 @@
         },
         "dragging": false,
         "height": 603,
-        "id": "note-qLmmh",
+        "id": "note-gUKzO",
         "measured": {
           "height": 603,
           "width": 328
@@ -2684,7 +2691,7 @@
       },
       {
         "data": {
-          "id": "note-lZk3i",
+          "id": "note-a0pJv",
           "node": {
             "description": "# **City Selection Agent**\n   - **Purpose:** This agent evaluates potential travel destinations based on user input and external data sources.\n   - **Core Functions:** Analyzes factors such as weather, local events, and travel costs to recommend optimal cities.\n   - **Tools Utilized:** Employs APIs and data-fetching tools to gather real-time information for decision-making.\n",
             "display_name": "",
@@ -2697,7 +2704,7 @@
         },
         "dragging": false,
         "height": 334,
-        "id": "note-lZk3i",
+        "id": "note-a0pJv",
         "measured": {
           "height": 334,
           "width": 328
@@ -2721,7 +2728,7 @@
       },
       {
         "data": {
-          "id": "note-twqCP",
+          "id": "note-ylJy2",
           "node": {
             "description": "# **Local Expert Agent**\n   - **Purpose:** Focused on gathering and providing an in-depth guide to the selected city.\n   - **Core Functions:** Compiles insights into cultural attractions, local customs, and unique experiences.\n   - **Tools Utilized:** Uses web content fetchers and data APIs to collect detailed local insights and enhance the user understanding with hidden gems.\n",
             "display_name": "",
@@ -2734,7 +2741,7 @@
         },
         "dragging": false,
         "height": 342,
-        "id": "note-twqCP",
+        "id": "note-ylJy2",
         "measured": {
           "height": 342,
           "width": 328
@@ -2758,7 +2765,7 @@
       },
       {
         "data": {
-          "id": "note-bhmU0",
+          "id": "note-LZBEx",
           "node": {
             "description": "# **Travel Concierge Agent**\n   - **Purpose:** Crafts detailed travel itineraries that are customized to the traveler's interests and needs.\n   - **Core Functions:** Offers a comprehensive daily schedule, including accommodations, dining spots, and activities.\n   - **Tools Utilized:** Integrates calculators and data tools for accurate budget planning and itinerary logistics.",
             "display_name": "",
@@ -2771,7 +2778,7 @@
         },
         "dragging": false,
         "height": 336,
-        "id": "note-bhmU0",
+        "id": "note-LZBEx",
         "measured": {
           "height": 336,
           "width": 328
@@ -2795,7 +2802,7 @@
       },
       {
         "data": {
-          "id": "note-pFFw3",
+          "id": "note-4IUQQ",
           "node": {
             "description": "## Configure the agent by obtaining your OpenAI API key from [platform.openai.com](https://platform.openai.com). Under \"Model Provider\", choose:\n- OpenAI: Default, requires only API key\n- Anthropic/Azure/Groq/NVIDIA: Each requires their own API keys\n- Custom: Use your own model endpoint + authentication\n\nSelect model and input API key before running the flow.",
             "display_name": "",
@@ -2808,7 +2815,7 @@
         },
         "dragging": false,
         "height": 324,
-        "id": "note-pFFw3",
+        "id": "note-4IUQQ",
         "measured": {
           "height": 324,
           "width": 328
@@ -2830,7 +2837,7 @@
         "data": {
           "description": "Load and retrieve data from specified URLs. Supports output in plain text, raw HTML, or JSON, with options for cleaning and separating multiple outputs.",
           "display_name": "URL",
-          "id": "URL-XDhvs",
+          "id": "URL-j9slU",
           "node": {
             "base_classes": [
               "Data",
@@ -3091,7 +3098,7 @@
           "type": "URL"
         },
         "dragging": false,
-        "id": "URL-XDhvs",
+        "id": "URL-j9slU",
         "measured": {
           "height": 660,
           "width": 360
@@ -3105,7 +3112,7 @@
       },
       {
         "data": {
-          "id": "CalculatorComponent-N83tJ",
+          "id": "CalculatorComponent-L3y5A",
           "node": {
             "base_classes": [
               "Data"
@@ -3282,7 +3289,7 @@
           "type": "CalculatorComponent"
         },
         "dragging": false,
-        "id": "CalculatorComponent-N83tJ",
+        "id": "CalculatorComponent-L3y5A",
         "measured": {
           "height": 374,
           "width": 360
@@ -3296,14 +3303,16 @@
       },
       {
         "data": {
-          "id": "SearchComponent-fF95b",
+          "description": "Call the searchapi.io API with result limiting",
+          "display_name": "Search API",
+          "id": "SearchComponent-8lQPB",
           "node": {
             "base_classes": [
               "Data",
+              "DataFrame",
               "Message"
             ],
             "beta": false,
-            "category": "tools",
             "conditional_paths": [],
             "custom_fields": {},
             "description": "Call the searchapi.io API with result limiting",
@@ -3320,9 +3329,7 @@
             ],
             "frozen": false,
             "icon": "SearchAPI",
-            "key": "SearchComponent",
             "legacy": false,
-            "lf_version": "1.1.1",
             "metadata": {},
             "minimized": false,
             "output_types": [],
@@ -3334,6 +3341,7 @@
                 "hidden": null,
                 "method": "to_toolkit",
                 "name": "component_as_tool",
+                "options": null,
                 "required_inputs": null,
                 "selected": "Tool",
                 "tool_mode": true,
@@ -3344,7 +3352,6 @@
               }
             ],
             "pinned": false,
-            "score": 0.0030458160338519237,
             "template": {
               "_type": "Component",
               "api_key": {
@@ -3356,7 +3363,7 @@
                 "input_types": [
                   "Message"
                 ],
-                "load_from_db": true,
+                "load_from_db": false,
                 "name": "api_key",
                 "password": true,
                 "placeholder": "",
@@ -3382,7 +3389,7 @@
                 "show": true,
                 "title_case": false,
                 "type": "code",
-                "value": "from typing import Any\n\nfrom langchain_community.utilities.searchapi import SearchApiAPIWrapper\n\nfrom langflow.custom import Component\nfrom langflow.inputs import DictInput, DropdownInput, IntInput, MultilineInput, SecretStrInput\nfrom langflow.io import Output\nfrom langflow.schema import Data\nfrom langflow.schema.message import Message\n\n\nclass SearchComponent(Component):\n    display_name: str = \"Search API\"\n    description: str = \"Call the searchapi.io API with result limiting\"\n    documentation: str = \"https://www.searchapi.io/docs/google\"\n    icon = \"SearchAPI\"\n\n    inputs = [\n        DropdownInput(name=\"engine\", display_name=\"Engine\", value=\"google\", options=[\"google\", \"bing\", \"duckduckgo\"]),\n        SecretStrInput(name=\"api_key\", display_name=\"SearchAPI API Key\", required=True),\n        MultilineInput(\n            name=\"input_value\",\n            display_name=\"Input\",\n            tool_mode=True,\n        ),\n        DictInput(name=\"search_params\", display_name=\"Search parameters\", advanced=True, is_list=True),\n        IntInput(name=\"max_results\", display_name=\"Max Results\", value=5, advanced=True),\n        IntInput(name=\"max_snippet_length\", display_name=\"Max Snippet Length\", value=100, advanced=True),\n    ]\n\n    outputs = [\n        Output(display_name=\"Data\", name=\"data\", method=\"fetch_content\"),\n        Output(display_name=\"Text\", name=\"text\", method=\"fetch_content_text\"),\n    ]\n\n    def _build_wrapper(self):\n        return SearchApiAPIWrapper(engine=self.engine, searchapi_api_key=self.api_key)\n\n    def run_model(self) -> list[Data]:\n        return self.fetch_content()\n\n    def fetch_content(self) -> list[Data]:\n        wrapper = self._build_wrapper()\n\n        def search_func(\n            query: str, params: dict[str, Any] | None = None, max_results: int = 5, max_snippet_length: int = 100\n        ) -> list[Data]:\n            params = params or {}\n            full_results = wrapper.results(query=query, **params)\n            organic_results = full_results.get(\"organic_results\", [])[:max_results]\n\n            return [\n                Data(\n                    text=result.get(\"snippet\", \"\"),\n                    data={\n                        \"title\": result.get(\"title\", \"\")[:max_snippet_length],\n                        \"link\": result.get(\"link\", \"\"),\n                        \"snippet\": result.get(\"snippet\", \"\")[:max_snippet_length],\n                    },\n                )\n                for result in organic_results\n            ]\n\n        results = search_func(\n            self.input_value,\n            self.search_params or {},\n            self.max_results,\n            self.max_snippet_length,\n        )\n        self.status = results\n        return results\n\n    def fetch_content_text(self) -> Message:\n        data = self.fetch_content()\n        result_string = \"\"\n        for item in data:\n            result_string += item.text + \"\\n\"\n        self.status = result_string\n        return Message(text=result_string)\n"
+                "value": "from typing import Any\n\nfrom langchain_community.utilities.searchapi import SearchApiAPIWrapper\n\nfrom langflow.custom import Component\nfrom langflow.inputs import DictInput, DropdownInput, IntInput, MultilineInput, SecretStrInput\nfrom langflow.io import Output\nfrom langflow.schema import Data, DataFrame\nfrom langflow.schema.message import Message\n\n\nclass SearchComponent(Component):\n    display_name: str = \"Search API\"\n    description: str = \"Call the searchapi.io API with result limiting\"\n    documentation: str = \"https://www.searchapi.io/docs/google\"\n    icon = \"SearchAPI\"\n\n    inputs = [\n        DropdownInput(name=\"engine\", display_name=\"Engine\", value=\"google\", options=[\"google\", \"bing\", \"duckduckgo\"]),\n        SecretStrInput(name=\"api_key\", display_name=\"SearchAPI API Key\", required=True),\n        MultilineInput(\n            name=\"input_value\",\n            display_name=\"Input\",\n            tool_mode=True,\n        ),\n        DictInput(name=\"search_params\", display_name=\"Search parameters\", advanced=True, is_list=True),\n        IntInput(name=\"max_results\", display_name=\"Max Results\", value=5, advanced=True),\n        IntInput(name=\"max_snippet_length\", display_name=\"Max Snippet Length\", value=100, advanced=True),\n    ]\n\n    outputs = [\n        Output(display_name=\"Data\", name=\"data\", method=\"fetch_content\"),\n        Output(display_name=\"Text\", name=\"text\", method=\"fetch_content_text\"),\n        Output(display_name=\"DataFrame\", name=\"dataframe\", method=\"as_dataframe\"),\n    ]\n\n    def _build_wrapper(self):\n        return SearchApiAPIWrapper(engine=self.engine, searchapi_api_key=self.api_key)\n\n    def run_model(self) -> list[Data]:\n        return self.fetch_content()\n\n    def fetch_content(self) -> list[Data]:\n        wrapper = self._build_wrapper()\n\n        def search_func(\n            query: str, params: dict[str, Any] | None = None, max_results: int = 5, max_snippet_length: int = 100\n        ) -> list[Data]:\n            params = params or {}\n            full_results = wrapper.results(query=query, **params)\n            organic_results = full_results.get(\"organic_results\", [])[:max_results]\n\n            return [\n                Data(\n                    text=result.get(\"snippet\", \"\"),\n                    data={\n                        \"title\": result.get(\"title\", \"\")[:max_snippet_length],\n                        \"link\": result.get(\"link\", \"\"),\n                        \"snippet\": result.get(\"snippet\", \"\")[:max_snippet_length],\n                    },\n                )\n                for result in organic_results\n            ]\n\n        results = search_func(\n            self.input_value,\n            self.search_params or {},\n            self.max_results,\n            self.max_snippet_length,\n        )\n        self.status = results\n        return results\n\n    def fetch_content_text(self) -> Message:\n        data = self.fetch_content()\n        result_string = \"\"\n        for item in data:\n            result_string += item.text + \"\\n\"\n        self.status = result_string\n        return Message(text=result_string)\n\n    def as_dataframe(self) -> DataFrame:\n        \"\"\"Convert the search results to a DataFrame.\n\n        Returns:\n            DataFrame: A DataFrame containing the search results.\n        \"\"\"\n        data = self.fetch_content()\n        return DataFrame(data)\n"
               },
               "engine": {
                 "_input_type": "DropdownInput",
@@ -3411,6 +3418,7 @@
               "input_value": {
                 "_input_type": "MultilineInput",
                 "advanced": false,
+                "copy_field": false,
                 "display_name": "Input",
                 "dynamic": false,
                 "info": "",
@@ -3558,6 +3566,19 @@
                       "name": "tags",
                       "sortable": false,
                       "type": "str"
+                    },
+                    {
+                      "default": true,
+                      "description": "Indicates whether the tool is currently active. Set to True to activate this tool.",
+                      "disable_edit": false,
+                      "display_name": "Enable",
+                      "edit_mode": "popover",
+                      "filterable": true,
+                      "formatter": "boolean",
+                      "hidden": false,
+                      "name": "status",
+                      "sortable": true,
+                      "type": "boolean"
                     }
                   ]
                 },
@@ -3571,6 +3592,7 @@
                   {
                     "description": "fetch_content(api_key: Message) - Call the searchapi.io API with result limiting",
                     "name": "SearchComponent-fetch_content",
+                    "status": true,
                     "tags": [
                       "SearchComponent-fetch_content"
                     ]
@@ -3578,9 +3600,18 @@
                   {
                     "description": "fetch_content_text(api_key: Message) - Call the searchapi.io API with result limiting",
                     "name": "SearchComponent-fetch_content_text",
+                    "status": true,
                     "tags": [
                       "SearchComponent-fetch_content_text"
                     ]
+                  },
+                  {
+                    "description": "as_dataframe(api_key: Message) - Call the searchapi.io API with result limiting",
+                    "name": "SearchComponent-as_dataframe",
+                    "status": true,
+                    "tags": [
+                      "SearchComponent-as_dataframe"
+                    ]
                   }
                 ]
               }
@@ -3591,7 +3622,7 @@
           "type": "SearchComponent"
         },
         "dragging": false,
-        "id": "SearchComponent-fF95b",
+        "id": "SearchComponent-8lQPB",
         "measured": {
           "height": 536,
           "width": 360
@@ -3605,9 +3636,9 @@
       }
     ],
     "viewport": {
-      "x": -473.30523608095336,
+      "x": -422.4287774794177,
-      "y": 166.93251319338754,
+      "y": 323.63311823261427,
-      "zoom": 0.41164535038506667
+      "zoom": 0.36739682737950574
     }
   },
   "description": "Create a travel planning chatbot that uses specialized agents to craft personalized trip itineraries.",