Agent Flow is a modular, extensible agent platform inspired by modern no-code and agent orchestration tools, built with Composio and LanggraphJS. It enables developers to rapidly build, customize, and extend AI-powered workflows using a visual node-based interface and robust API. The platform is designed for flexibility, developer experience, and seamless integration with third-party tools.

• Visual Workflow Builder: Drag-and-drop interface using ReactFlow for creating agent graphs (nodes and edges)
• Core Node Types:
  • Input Node: Entry point for data
  • Output Node: Where results are produced
  • LLM Node: Decision-making using large language models
  • Tool Node: Executes external actions
  • Agent Node: Combines LLM and Tool nodes for complex orchestration
• API-First: Each workflow is represented as a JSON graph and can be executed via a single API route
• Composio Integration: One SDK for hundreds of pre-built tools with automatic authentication handling
• Agent Patterns:
  • Prompt chaining
  • Parallelization
  • Routing
  • Evaluator-optimizer loops
  • Augmented LLMs with tool calls

• Framework: Next.js (React, TypeScript)
• UI: Tailwind CSS, shadcn/ui, ReactFlow
• Agent Orchestration: LangGraph
• Tool Integration: Composio SDK

{
  "nodes": [
    { "id": "input_1", "type": "customInput", "position": { "x": 100, "y": 100 }, "data": { "label": "User Query" } },
    { "id": "agent_1", "type": "agent", "position": { "x": 300, "y": 100 }, "data": { "tools": ["search", "summarize"] } },
    { "id": "output_1", "type": "customOutput", "position": { "x": 500, "y": 100 }, "data": { "label": "Result" } }
  ],
  "edges": [
    { "source": "input_1", "target": "agent_1" },
    { "source": "agent_1", "target": "output_1" }
  ]
}

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open your browser: Visit http://localhost:3000 to see the app.

• app/ – Main application code (pages, api routes)
• components/ - Components code
• public/ – Static assets
• README.md – Project documentation

• Add new nodes: Create new node types in the components/ directory and register them in the workflow builder.
• Authentication: Composio handles OAuth, API keys, and other auth flows automatically via a unified modal.

• Fork the repo and create a feature branch
• Make your changes and submit a pull request
• Follow the code style and use modern React/Next.js best practices

• Inspiration and architecture: I Replicated Gumloop in a Weekend with Vibe Coding
• Next.js Documentation
• shadcn/ui
• Tailwind CSS