AgentFlow is a visual platform that makes multi-agent AI orchestration accessible to everyone. Design agent workflows using an intuitive org-chart interface—no coding required.

Companies struggle to coordinate multiple AI agents for complex workflows. Traditional solutions require:

• Complex code and technical expertise
• Manual orchestration between agents
• Difficult-to-visualize agent hierarchies
• Time-consuming setup and iteration

AgentFlow provides a visual, drag-and-drop interface where users can:

• Create agents with custom instructions (like employees in an org chart)
• Define hierarchies by drawing arrows between agents
• Execute workflows by passing data through the visual pipeline
• See results in real-time with visual feedback

• 🎨 Visual Canvas - Drag-and-drop agent creation and positioning
• 🔗 Connection System - Draw arrows to define agent hierarchy
• 🤖 Claude Integration - Each agent powered by Claude 3.5 Sonnet
• ⚡ Real-time Execution - Watch your workflow execute step-by-step
• 📊 Visual Feedback - Active agent highlighting and status indicators

• Intake Agents - Receive and categorize initial requests
• Processing Agents - Perform main tasks and transformations
• Response Agents - Format and deliver final outputs

• 📋 Customer Support Workflow - Automated ticket triage and resolution
• More templates coming soon

• Node.js 18+ installed
• An Anthropic API key (get one here)

1. Clone the repository

   git clone https://github.com/yourusername/agentflow.git
   cd agentflow

2. Install dependencies

   npm install

3. Configure environment variables

   cp .env.example .env.local

   Edit .env.local and add your Anthropic API key:

   ANTHROPIC_API_KEY=your_api_key_here
   

4. Run the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

1. Load a Template - Click "📋 Load Template" to see an example workflow
2. Add Input - Enter a test query in the Execution Panel
3. Run Workflow - Click "▶️ Run Workflow" to see it in action

1. Create Agents

   • Click "+ Create Agent"
   • Give it a name (e.g., "Email Classifier")
   • Choose agent type (Intake, Processing, or Response)
   • Write instructions for what the agent should do

2. Connect Agents

   • Drag from the right handle of one agent to the left handle of another
   • This defines the flow direction

3. Test Your Workflow

   • Enter a test input in the Execution Panel
   • Click "Run Workflow"
   • Watch as each agent processes the data in sequence

• Frontend: Next.js 16 + React + TypeScript
• UI Components: React Flow (visual canvas), Tailwind CSS
• State Management: Zustand
• AI Integration: Anthropic Claude 3.5 Sonnet API
• Deployment: Vercel

app/
├── api/execute/          # API endpoint for workflow execution
├── layout.tsx            # Root layout with metadata
└── page.tsx              # Main application page

components/
├── FlowCanvas.tsx        # React Flow canvas container
├── AgentNode.tsx         # Custom node component for agents
├── AgentModal.tsx        # Agent creation/editing modal
└── ExecutionPanel.tsx    # Workflow execution interface

store/
└── useFlowStore.ts       # Zustand state management

types/
└── index.ts              # TypeScript type definitions

1. User Input → Enters query in Execution Panel
2. Topological Sort → Determines agent execution order based on connections
3. Sequential Processing → Each agent:
   • Receives context from previous agent (or initial input)
   • Calls Claude API with its specific instructions
   • Returns output to next agent
4. Real-time Updates → UI shows active agent and results as they come in
5. Final Output → Last agent's response shown to user

• Intake Agent: Categorizes tickets (billing, technical, general)
• Processing Agent: Provides solutions or escalation recommendations
• Response Agent: Formats empathetic customer-facing response

• Intake Agent: Analyzes new hire information
• Processing Agent: Generates onboarding checklist
• Response Agent: Creates welcome email

• Intake Agent: Extracts lead information
• Processing Agent: Scores and qualifies lead
• Response Agent: Generates personalized outreach

• ✅ Reduces agent setup time from hours to minutes
• ✅ Makes AI workflows accessible to non-technical teams
• ✅ Solves real coordination challenges companies face

• ✅ First visual org-chart interface for AI agents
• ✅ Intuitive business metaphor (employees → agents)
• ✅ Makes complex AI orchestration simple

• ✅ Multi-agent architecture powered by Claude 3.5 Sonnet
• ✅ Each agent maintains context through conversation
• ✅ Demonstrates Claude's versatility across different roles

1. Push to GitHub

   git add .
   git commit -m "Initial commit"
   git push origin main

2. Deploy to Vercel

   • Go to vercel.com
   • Import your GitHub repository
   • Add environment variable: ANTHROPIC_API_KEY
   • Click "Deploy"

3. Done! Your app is now live

We welcome contributions! Here's how:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is built for the Claude Builder Club x ACT Rice Hackathon (Nov 8-9, 2025).

• Anthropic - For Claude AI and the hackathon opportunity
• React Flow - For the excellent flowchart library
• Vercel - For seamless deployment

Built with ❤️ for the Claude Builder Club Hackathon

Made with Claude AI 🤖