diff --git a/.github/styles/config/vocabularies/Docs/accept.txt b/.github/styles/config/vocabularies/Docs/accept.txt index 457c4f2d6..e7ba9b1c2 100644 --- a/.github/styles/config/vocabularies/Docs/accept.txt +++ b/.github/styles/config/vocabularies/Docs/accept.txt @@ -92,6 +92,10 @@ preconfigured asyncio parallelization IMDb + + +Langflow + iPhone iPhones iPad diff --git a/sources/platform/integrations/ai/langflow.md b/sources/platform/integrations/ai/langflow.md new file mode 100644 index 000000000..c3acc42ee --- /dev/null +++ b/sources/platform/integrations/ai/langflow.md @@ -0,0 +1,129 @@ +--- +title: Langflow integration +sidebar_label: Langflow +description: Learn how to integrate Apify with Langflow low-code tool to build powerful AI agents and workflows that can use any API, model, or database. +sidebar_position: 1 +slug: /integrations/langflow +--- + +**Learn how to integrate Apify with Langflow to run complex AI agent workflows.** + +--- + +## What is Langflow + +[Langflow](https://langflow.org/) is a low-code, visual tool that enables developers to build powerful AI agents and workflows that can use any API, models, or databases. + +:::note Explore Langflow + +For more information on Langflow, visit its [documentation](https://docs.langflow.org/). + +::: + +## How to use Apify with Langflow + +This guide will demonstrate two different ways to use Apify Actors with Langflow: + +- **Calling Apify Actors in Langflow**: We will use the [RAG Web Browser](https://apify.com/apify/rag-web-browser) Actor to search Google for a query and extract the search results. +- **Building a flow to search for a company's social media profiles**: We will use the [Google Search Results Scraper](https://apify.com/apify/google-search-scraper) Actor to search the web for social media profiles of a given company. Then, we will use the [TikTok Data Extractor](https://apify.com/clockworks/free-tiktok-scraper) Actor to extract data from the TikTok profiles. + +### Prerequisites + +- **Apify API token**: To use Apify Actors in Langflow, you need an Apify API token. If you don't have one, you can learn how to obtain it in the [Apify documentation](https://docs.apify.com/platform/integrations/api). + +- **OpenAI API key**: In order to work with agents in Langflow, you need an OpenAI API key. If you don't have one, you can get it from the [OpenAI platform](https://platform.openai.com/account/api-keys). + +#### Langflow + +:::note Cloud vs local setup + +Langflow can either be installed locally or used in the cloud. The cloud version is available on the [Langflow](http://langflow.org/) website. If you are using the cloud version, you can skip the installation step, and go straight to [Creating a new flow](#creating-a-new-flow) + +::: + +First, we need to install the Langflow platform using python package and project manager [uv](https://docs.astral.sh/uv/): + +```bash +uv pip install langflow +``` + +After successfully installing Langflow, we can start the platform: + +```bash +uv run langflow run +``` + +When the platform is started, open the [Langflow UI](http://127.0.0.1:7860) in your browser. + +> Other installation methods can be found in the [Langflow documentation](https://docs.langflow.org/get-started-installation). + +### Creating a new flow + +On the Langflow welcome screen, click the **New Flow** button and then create **Blank Flow**: +![New Flow screen - Blank Flow](../images/langflow/new_blank_flow.png) + +Now, we can start building our flow. + +### Calling Apify Actors in Langflow + +To call Apify Actors in Langflow, we need to add the **Apify Actors** component to the flow. +From the bundle menu, add **Apify Actors** component: +![Flow - Add Apify Actors](../images/langflow/bundles_apify.png) + +Next, we need to configure the Apify Actors components. First, input your API token (learn how to get it [here](https://docs.apify.com/platform/integrations/api)). Then, set the Actor ID of the component to `apify/rag-web-browser` to use the [RAG Web Browser](https://apify.com/apify/rag-web-browser). Set the **Run input** field to pass arguments to the Actor run, allowing it to search Google with the query `"what is monero?"` (full Actor input schema can be found [here](https://apify.com/apify/rag-web-browser/input-schema)): + +```json +{"query": "what is monero?", "maxResults": 3} +``` + +Now, we can run the component by clicking the **Run** button. +![Flow - Apify Actors Run](../images/langflow/apify_actors_run.png) + +Once the run is finished, we can view the output by clicking the **Output** button. +![Flow - Apify Actors Output](../images/langflow/apify_actors_output.png) + +The output should look similar to this: +![Flow - Apify Actors Output Data](../images/langflow/apify_actors_output_data.png) + +To filter only the `metadata` and `markdown` fields, set **Output fields** to `metadata,markdown`. Additionally, enable **Flatten output** by setting it to `true`. This will output only the metadata and text content from the search results. +> Flattening is necessary when you need to access nested dictionary fields in the output data object; they cannot be accessed directly otherwise in the Data object. + +![Flow - Apify Actors Output Filter](../images/langflow/apify_actors_output_filter.png) + +When you run the component again, the output contains only the `markdown` and flattened `metadata` fields: + +![Flow - Apify Actors Output Filtered](../images/langflow/apify_actors_output_data_filtered.png) + +Now that we understand how to call Apify Actors, let's build a practical example where we search for a company's social media profiles and extract data from them. + +### Building a flow to search for a company's social media profiles + +Create a new flow and add two **Apify Actors** components from the menu. + +Input your API token (learn how to get it [here](https://docs.apify.com/platform/integrations/api)) and set the Actor ID of the first component to `apify/google-search-scraper` and the second one to `clockworks/free-tiktok-scraper`: +![Flow - Actors configuration](../images/langflow/apify_actors_configuration.png) + +Add the **Agent** component from the menu and set your OpenAI API key (get it [here](https://platform.openai.com/account/api-keys)): + +:::tip Optimize Agent results + +For better results, switch the model to `gpt-4o` instead of `gpt-4o-mini` in the Agent configuration + +::: + +![Flow - Agent configuration](../images/langflow/agent_configuration.png) + +To be able to interact with the agent, add **Chat Input** and **Chat Output** components from the menu and connect them to the Agent component **Input** and **Response**. +Then connect both Apify Actor components **Tool** outputs to the Agent component **Tools** input so that the agent can call the Apify Actors. The final flow that can search the web for a company's social media profiles and extract data from them should look like this: +![Flow - Final](../images/langflow/flow.png) + +Click the **Playground** button and chat with the agent to test the flow: +![Flow - Playground](../images/langflow/playground.png) + +Here is an example agent output for the following query: + +```text +find tiktok profile of company openai using google search and then show me the profile bio and their latest video +``` + +![Flow - agent output](../images/langflow/agent_output.png) diff --git a/sources/platform/integrations/images/langflow/agent_configuration.png b/sources/platform/integrations/images/langflow/agent_configuration.png new file mode 100644 index 000000000..642c04fce Binary files /dev/null and b/sources/platform/integrations/images/langflow/agent_configuration.png differ diff --git a/sources/platform/integrations/images/langflow/agent_output.png b/sources/platform/integrations/images/langflow/agent_output.png new file mode 100644 index 000000000..c8d026e9f Binary files /dev/null and b/sources/platform/integrations/images/langflow/agent_output.png differ diff --git a/sources/platform/integrations/images/langflow/apify_actors_configuration.png b/sources/platform/integrations/images/langflow/apify_actors_configuration.png new file mode 100644 index 000000000..e74aada63 Binary files /dev/null and b/sources/platform/integrations/images/langflow/apify_actors_configuration.png differ diff --git a/sources/platform/integrations/images/langflow/apify_actors_output.png b/sources/platform/integrations/images/langflow/apify_actors_output.png new file mode 100644 index 000000000..dac19000f Binary files /dev/null and b/sources/platform/integrations/images/langflow/apify_actors_output.png differ diff --git a/sources/platform/integrations/images/langflow/apify_actors_output_data.png b/sources/platform/integrations/images/langflow/apify_actors_output_data.png new file mode 100644 index 000000000..fc1c75aef Binary files /dev/null and b/sources/platform/integrations/images/langflow/apify_actors_output_data.png differ diff --git a/sources/platform/integrations/images/langflow/apify_actors_output_data_filtered.png b/sources/platform/integrations/images/langflow/apify_actors_output_data_filtered.png new file mode 100644 index 000000000..2b3b7db83 Binary files /dev/null and b/sources/platform/integrations/images/langflow/apify_actors_output_data_filtered.png differ diff --git a/sources/platform/integrations/images/langflow/apify_actors_output_filter.png b/sources/platform/integrations/images/langflow/apify_actors_output_filter.png new file mode 100644 index 000000000..fa6ac4585 Binary files /dev/null and b/sources/platform/integrations/images/langflow/apify_actors_output_filter.png differ diff --git a/sources/platform/integrations/images/langflow/apify_actors_run.png b/sources/platform/integrations/images/langflow/apify_actors_run.png new file mode 100644 index 000000000..c0a6a49c4 Binary files /dev/null and b/sources/platform/integrations/images/langflow/apify_actors_run.png differ diff --git a/sources/platform/integrations/images/langflow/bundles_apify.png b/sources/platform/integrations/images/langflow/bundles_apify.png new file mode 100644 index 000000000..0d2409b61 Binary files /dev/null and b/sources/platform/integrations/images/langflow/bundles_apify.png differ diff --git a/sources/platform/integrations/images/langflow/chat_message_output.png b/sources/platform/integrations/images/langflow/chat_message_output.png new file mode 100644 index 000000000..5a1bb3246 Binary files /dev/null and b/sources/platform/integrations/images/langflow/chat_message_output.png differ diff --git a/sources/platform/integrations/images/langflow/flow.png b/sources/platform/integrations/images/langflow/flow.png new file mode 100644 index 000000000..33ae53700 Binary files /dev/null and b/sources/platform/integrations/images/langflow/flow.png differ diff --git a/sources/platform/integrations/images/langflow/new_blank_flow.png b/sources/platform/integrations/images/langflow/new_blank_flow.png new file mode 100644 index 000000000..0fe8ae948 Binary files /dev/null and b/sources/platform/integrations/images/langflow/new_blank_flow.png differ diff --git a/sources/platform/integrations/images/langflow/playground.png b/sources/platform/integrations/images/langflow/playground.png new file mode 100644 index 000000000..dfcfce397 Binary files /dev/null and b/sources/platform/integrations/images/langflow/playground.png differ