AgentFlow

AgentFlow is a local-first agent workflow builder for creating practical AI agents visually or by talking to an agent creator.

The project makes it easy for anyone to design agent systems for lead generation, marketing, copywriting, deep research, product analysis, strategy, support triage, and other repeatable knowledge-work tasks. You can build workflows by dragging nodes on a canvas, or describe what you want in chat and let AgentFlow create the graph, prompts, handoffs, request fields, and layout for you.

What It Does

AgentFlow turns an agent idea into an executable workflow graph.

• Start from a dashboard of saved workflows.
• Create request inputs for text and images.
• Add Gemma agent nodes, image crop tool nodes, and final response nodes.
• Connect nodes visually with type-safe handles.
• Ask the AgentFlow creator chat to build or edit a workflow from plain English.
• Run a full workflow, selected nodes, or a single node locally.
• Inspect run history, node inputs, outputs, duration, and failures.
• Import and export workflow JSON.
• Persist workflows and run history with PostgreSQL and Prisma.

Why It Exists

Most people know the outcome they want, but not how to turn that outcome into a reliable agent architecture. AgentFlow bridges that gap.

Instead of asking users to write orchestration code, AgentFlow gives them two creation paths:

• Visual creation: build the agent system directly on a React Flow canvas.
• Conversational creation: tell the workflow creator what you need, such as "build a lead generation agent for SaaS founders" or "create a deep research workflow with a verifier," and AgentFlow edits the graph for you.

The workflow creator follows practical long-running-agent design principles:

• Start with the smallest useful workflow.
• Use multiple agents only when decomposition improves quality, reliability, review, or multimodal handling.
• Give each agent a narrow role and a clear output contract.
• Prefer planner, worker, critic/verifier, and synthesizer patterns for complex work.
• Make handoffs explicit so each node produces the artifact the next node needs.
• Keep a shared workflow graph as the source of truth instead of relying on chat history.
• Add verifier or critic agents for research, strategy, compliance, decisions, and polished final output.
• Keep tools bounded and type-safe so workflows remain debuggable.

Example Workflows

AgentFlow can create workflows such as:

• Lead generation: brief -> lead researcher -> qualification analyst -> outreach writer -> response.
• Marketing strategy: project brief -> strategy agent, risk agent, execution agent -> response.
• Copywriting: product brief and image -> visual inspector -> copywriter -> brand critic -> response.
• Deep research: research brief -> planner -> analyst -> critic/verifier -> final writer -> response.
• Support triage: ticket -> triage agent -> response.
• Product image analysis: image input -> crop tools and visual inspector -> final copy or findings.

Current Node Types

• Request Inputs: locked workflow entry point for user-provided text and image fields.
• Gemma Agent: Cerebras-hosted Gemma 4 model node for text and image-grounded reasoning.
• Crop Image: local image crop tool using percentage bounds.
• Response: locked workflow output node that collects final results.

Current workflows are intentionally bounded. AgentFlow does not invent unavailable tools such as web search, database queries, browser automation, or code execution nodes. For those use cases, provide the required source material through request fields or extend the node system.

Stack

• Next.js App Router with TypeScript strict mode
• React Flow canvas
• Zustand workflow state
• PostgreSQL via Prisma
• Local in-process workflow execution
• Cerebras Gemma 4 via the Chat Completions API
• Local image previews and FFmpeg-backed crop nodes
• Tailwind CSS, Zod, and Lucide React

Local Setup

1. Install dependencies:

   npm install

2. Create .env.local from .env.example and set DATABASE_URL to a local PostgreSQL database.

3. Generate the Prisma client and apply migrations:

   npm run prisma:generate
   npm run prisma:migrate

4. Start the app:

   npm run dev

5. Open http://localhost:3000/dashboard.

Environment Values

• DATABASE_URL is required for persisted workflows and run history.
• CEREBRAS_API_KEY is required when using the workflow creator chat or executing Gemma agent nodes.
• CEREBRAS_MODEL optionally overrides the default Gemma model id, which is gemma-4-31b.
• NEXT_PUBLIC_CANDIDATE_LINKEDIN is optional and only used by the existing console attribution log.

Useful Scripts

npm run dev
npm run build
npm run lint
npm run typecheck
npm run prisma:studio