Langflow

Learn how to integrate Membit’s real-time context with your Langflow workflows using MCP tools.

Langflow is a visual framework for building multi-agent and RAG applications using a drag-and-drop interface. By integrating Membit with Langflow, you can enhance your AI agents with real-time social context, enabling them to access current trends, breaking news, and live conversations from across the web through a node-based visual workflow.

Prerequisites

Before you begin, make sure you have:

• Langflow application installed (download here)
• A Membit account with an API key (get one here)
• Basic familiarity with Langflow’s visual workflow builder
• A Google AI Studio API key for the chat model (optional)

Langflow provides an intuitive visual interface for building complex AI workflows - perfect for both beginners and advanced users!

Setting Up Membit MCP Tools

Follow these steps to integrate Membit with your Langflow workflows:

1. Create New Flow

   Open the Langflow application and click Add New Flow to start building a new workflow.

   
2. Select Blank Flow

   Choose Blank Flow to start with a clean workspace where you can build your custom workflow.

   
3. Search for MCP Tools

   In the component search bar, type “MCP tools” to find the Model Context Protocol integration component.

   

   The MCP Tools component enables Langflow to connect with external MCP servers like Membit, providing real-time context to your workflows.

4. Configure MCP Server

   Configure the MCP Tools component by adding a new MCP server:

   1. Click Add MCP Server
   2. Select STDIO as the connection type

   

   STDIO Configuration:

   • Name: membit-mcp
   • Command: npx -y mcp-remote https://mcp.membit.ai/mcp/?Membit-Api-Key=<your-api-key>

   Replace <your-api-key> with your actual Membit API key. Keep this credential secure and don’t share it with unauthorized users.

   3. Click Add Server to save the configuration
   4. Click Toggle Tool Mode to enable the MCP tools

   

Building Your First Workflow

Now let’s create a complete workflow that uses Membit’s real-time context:

1. Add Agent Component

   Search for “agent” in the component library and click Add to add an Agent component to your workflow.

   

   The Agent component acts as the orchestrator, managing how your workflow processes requests and coordinates responses.

2. Configure Agent Model

   Configure the Agent component with your preferred language model:

   

   • Model Provider: Select “Gemini 2.5 Flash” (or your preferred model)
   • API Key: Set your Google AI Studio API key

   You can use other model providers like OpenAI, Anthropic, or local models depending on your preference and requirements.

3. Connect MCP Tools

   Connect the Membit MCP component to the Agent Tools input to provide real-time context capabilities.

   This connection enables your agent to access Membit’s real-time social media context when processing user queries.

4. Add Chat Components

   Add Chat Input and Chat Output components to create an interactive interface:

   1. Chat Input - To receive user messages
   2. Chat Output - To display agent responses

   

   Connection Pattern:

   • Chat Input → Agent Input
   • Agent Response → Chat Output

   
5. Test Your Workflow

   Click Playground to test your workflow with real-time context from Membit.

   

   Try asking questions like:

   • “Tell me about crypto trends”
   • “What’s happening in AI today?”
   • “Give me the latest tech news”

   

   Testing the workflow with real-time context from Membit

   If successful, your agent will respond with current information about your query topic, powered by Membit’s real-time data feed.