AgentFlow lets you design, test, and deploy intelligent chatbots with a visual drag-and-drop flow editor. Connect to OpenAI, Claude, and Gemini in minutes. No coding required.

AgentFlow — Build AI Chatbots Visually, No Code Required, Zero Server Costs Hey Product Hunt!

I built AgentFlow because I wanted a free, no-code way to build AI chatbots without paying for another SaaS subscription.

AgentFlow is a visual AI chatbot builder where you drag and drop nodes to design conversation flows — triggers, AI responses, conditions, API calls — all on a custom SVG canvas. It runs entirely in your browser. You bring your own API key (OpenAI, Claude, or Gemini), and calls go directly from your browser to the provider. Zero server cost for me, zero cost for you.

Here's what's inside:

🧩 Visual Flow Editor — Custom SVG canvas with drag-and-drop node placement. No external dependencies, no React Flow — just a smooth, custom-built experience.
↩️ Undo/Redo — Ctrl+Z/Y for every action. Drag, drop, delete, edit, template load — all tracked.
👥 Collaborative Editing — Real-time sync across browser tabs via BroadcastChannel. Open the same flow in two tabs and watch changes appear instantly.
🎨 Resizable Panels — Drag handles between the palette, canvas, and properties panels. Adjust to your workflow.
🔍 Live Debug Mode — Step through nodes one by one. Trace decisions, pick condition branches, inspect AI prompt context. Color-coded messages for every step.
🎤 Voice Input — Built-in microphone button for hands-free testing. Uses Web Speech API — no extra services.
📦 Flow Templates — Start from Customer Support, Lead Qualification, or FAQ Bot presets. Save your own flows as custom templates.
📋 Flow Versioning — Save named snapshots, browse history, preview and restore any version.
🔗 Share Flows — Export as JSON, import from file, or share via an encoded URL. Your entire flow fits in a link.
🌐 Embeddable Widget — Drop a single <script> tag on any website. Floating chat button with popup. Full dark mode support.

🌙 Dark Mode — Full support across every page. Toggle in the sidebar.

📊 Analytics — Node usage tracking, agent performance charts, conversation metrics. All from localStorage — no backend needed.

Tech Stack: Next.js 16, TypeScript, Prisma 7 + SQLite, Tailwind CSS v4, Recharts. Open source under MIT.

Try it free: https://agentflow.rajaabbas.com

GitHub: https://github.com/Raja-Abbas/Agentflow

Would love your feedback and support!
@AgentFlow

Thanks for the feedback on AgentFlow — all three requests just shipped:

— Save snapshots of your flows, restore or preview any version. No more fear of breaking a working bot.
— Step through each node in real time. See exactly which path the flow takes, what each condition evaluates to, and what each AI response outputs. No more guesswork.
— Microphone button in the chat interface. Test your flows hands-free, just speak instead of typing every turn.

Try it: https://agentflow-next.netlify.app

@nebahat394361 @ali514664046464 @sra822918192513 @nurgl1593508

Also, this is an MVP and I'm open to your feedback. What else would make AgentFlow more useful for you? Anything you'd want to see next?