Back to Projects
Visual AI Orchestration
2025

Agflow

A visual orchestration platform for agentic workflows, RAG pipelines, and code-first custom nodes.

Visual flow editor
pgvector RAG
Custom Python nodes
Overview

Agflow brings agent workflow design into a visual canvas using React Flow, Supabase-backed storage, pgvector retrieval, external API execution, and custom Python extensibility.

Language DNA

TypeScript

Agflow feels like a frontend system first, so its visual identity leans into the builder side of TypeScript, React Flow, and interface orchestration. The interaction model is a major part of the product itself.

PythonReact FlowLangChainSupabase
Client-server-engine split
1

Agflow follows a client-server-engine model that keeps the visual builder, backend API layer, and execution engine clearly separated.

2

The frontend manages the graph canvas and interaction state, while the backend validates and proxies requests to a Python execution engine.

3

The execution engine parses node graphs into DAG-like flows and runs them through Agno with retrieval, models, and tool integrations.

Builder UX

Uses React Flow for drag-and-drop composition of models, agents, tools, and outputs.

Supports cloud-managed flows, auto-save, undo and redo, export, and clipboard workflows.

Adds a Monaco-powered code editor for custom Python nodes and dynamic input-handle generation.

Execution and integration

Supports Groq and OpenAI model routing plus RAG pipelines on Supabase pgvector.

Includes tool nodes for search, Gmail, calculator, and financial data.

Provides external API execution so saved flows can be called outside the UI.

System design

Saved flows can be executed externally through API-key based calls, which extends the builder beyond the UI itself.

The knowledge-base manager and custom-node pipeline are two of the strongest parts of the overall system.

Product capabilities

Built a React Flow interface for composing agent workflows visually.

Integrated chunking, embeddings, and retrieval with Supabase pgvector for RAG-ready pipelines.

Added multi-model support, external API access, and Monaco-based custom Python execution.

Workflow

How a flow gets built

1

Compose a graph visually from model, agent, tool, and retrieval nodes.

2

Attach knowledge-base or custom Python nodes where the workflow needs additional logic.

3

Save the flow, run it in the playground, and expose it through the external API path when needed.

Execution model

Agflow is shaped like a real product, with equal attention paid to the builder experience, the knowledge-base flow, and external API execution.

That balance makes the platform feel closer to a usable orchestration environment than a visual demo.

Actions
Case study

Design direction

Agflow was built to make agent orchestration inspectable instead of opaque. The visual canvas exposes how prompts, tools, retrieval steps, model calls, and outputs connect to each other, which makes it easier to debug, iterate, and explain complex flows. The interface is not just a convenience layer; it is part of how the product communicates system behavior.

Where it gets useful

The product becomes most useful when visual composition and code-level control are both available in the same environment. Custom Python nodes, knowledge-base integration, and external API execution let workflows move past drag-and-drop prototypes into something teams can actually extend. That balance gives the platform a stronger practical identity than a visual demo builder.