AgentFlow AI

The AI-Native Automation Platform.
Workflows that think, plan, reason, remember, and self-heal — orchestrated by autonomous agents across 60+ integrations.

---

What is AgentFlow AI?

AgentFlow AI is a production-grade frontend for the next generation of workflow automation, where AI is the engine rather than a bolt-on. Every workflow runs inside an AI runtime that reasons over each step, stores long-term memory, recovers from failures automatically, and is continuously optimized by a copilot.

It is not an n8n clone. It ships as a fully runnable Next.js 16 app with a premium dark / glassmorphism design system, a React Flow visual builder, and a mock execution engine that makes every screen feel real — with zero external API cost.

Open the app and head straight to /dashboard for the live product, or / for the marketing site. The command palette is everywhere with ⌘K / Ctrl+K.

---

✨ Features

• Visual workflow builder — drag & drop, zoom, minimap, snap-to-grid, animated edges, custom nodes (icon, status, duration, retries, log line).
• 60+ node library across 8 categories, searchable, draggable onto the canvas.
• Mock execution engine — Run animates nodes through running → retrying → succeeded/failed, streams live logs, surfaces reasoning steps on AI nodes.
• AI Copilot panel — three tabs:
  • Build — natural language → planner generates a workflow
  • Advice — copilot suggestions (missing nodes, architecture, cost, performance, security) + chat
  • Self-heal — paste an error, diagnose root cause, apply fixes, "learn" the pattern
• Pages & dashboards — /dashboard, /workflows, /executions, /marketplace, /observability, /ai/agents, /ai/memory, /ai/rag, /settings, /settings/billing.
• Design system — Tailwind v4, glassmorphism, animated gradient text, mesh backgrounds, Framer Motion entrance animations, custom dark React Flow theming, command palette, keyboard shortcuts (⌘Z, ⌘C/V, Delete).
• Auth & billing — Auth.js v5 with Google/GitHub OAuth, Stripe-backed plans (Pro / Business) with usage, invoices, and portal integration.
• Mock-first — every backend (auth, execution, AI, billing) is mocked behind a clean lib/mock/* seam so a real backend drops in without touching the UI.

---

🧱 Tech stack

• Next.js 16.2 (App Router, Turbopack, React 19.2)
• TypeScript 5, Tailwind CSS v4
• @xyflow/react 12 (React Flow) · Framer Motion 12 · Recharts 3
• Auth.js v5 · Prisma 6 · Stripe 22 · Resend 6
• lucide-react · class-variance-authority · zod · bcryptjs

---

📸 Screenshots

Landing page	Dashboard	Workflow builder
Marketing site (/)	Live KPIs & charts (/dashboard)	Visual builder (/workflows/[id])

Execution timeline	AI Copilot	Observability
Animated run + reasoning	Build / Advise / Self-heal	Latency, cost, audit

Tip: Capture full-page screenshots with ?fullPage=1 in GoFullPage, or use a 1280×800 viewport in your browser devtools.

---

🚀 Quick start

# 1. Install
npm install

# 2. Set up env (optional — the app runs with mocks out of the box)
cp .env.example .env
# Fill in any keys you want to use (OAuth, Stripe, Resend, etc.).
# Leave them blank to stay in fully-mocked mode.

# 3. Generate the Prisma client (only needed if you wire up the real DB)
npx prisma generate

# 4. Run
npm run dev      # http://localhost:3000

Other scripts:

npm run build    # production build (Turbopack) — passes clean
npm run start    # serve the production build
npx tsc --noEmit # type-check

---

---

🔐 Security

• All secrets live in .env, which is gitignored.
• .env.example is a blank template — safe to commit.
• Auth uses Auth.js v5 with a Prisma adapter; passwords are hashed with bcryptjs.
• API keys are managed in the in-app Secrets Manager (/settings).
• See /security for the full policy.

If you find a vulnerability, please email zaydthirteen@gmail.com rather than opening a public issue.

---