AgentFlow — Chat-First AI Agent Builder

Overview

AgentFlow lets people who have never used n8n or written code build working AI agents. You type something like "make me an agent that writes a daily news summary and emails it to me", and a builder agent assembles the workflow on screen node by node, explaining each step as it goes.

How it works

The app has three resizable panels:

• Chat: you talk to the Builder Agent in plain English.
• Canvas: built with React Flow. Nodes appear, connect and animate as the agent creates them, and you can also edit them by hand.
• Inspector: streams the timeline, network calls, logs, variables and cost of each run.

The Builder Agent runs on Claude with tool use. Its tools are add_node, connect_nodes, update_node, delete_node, run_workflow and explain_error, which edit the canvas in real time. The execution engine makes real API calls. The node library covers:

• Triggers: manual, schedule and webhook.
• AI generation: Claude, fal.ai images, Kling video, ElevenLabs voice.
• Social posting and email via Resend.
• HTTP requests, web search and scraping.
• Branching, loops and waits.
• A multi-step video pipeline that turns a script into scenes, stills, clips and voiceovers, then compiles the final video with Cloudinary.

Engineering notes

Correctness is enforced at three layers. The API handler applies schema defaults and rejects placeholder values, the client store offers one-click auto-fix, and the execution engine re-validates before each run. Every node type has a schema with required fields and sensible defaults. Supabase handles authentication, the PostgreSQL database and edge functions.