A visual flow editor for creating and managing AI agent workflows using the Google AI Development Kit (ADK). Build complex agent pipelines with an intuitive drag-and-drop interface and export them as ready-to-run Python code.
- Visual Flow Editor: Drag-and-drop interface for creating agent workflows
- Agent Types: Support for both basic LLM agents and sequential agent compositions
- Code Generation: Export your visual flows as Python code using Google ADK
- Tool Integration: Connect agents with various tools and capabilities
- Real-time Preview: See your agent network in action as you build
- Modern UI: Built with Radix UI components and Tailwind CSS
- TypeScript: Fully typed for better development experience
- Node.js 18+
- pnpm (recommended) or npm
- Clone the repository:
git clone https://github.com/your-username/adkflow.git
cd adkflow- Install dependencies:
pnpm install- Start the development server:
pnpm dev- Open http://localhost:3000 in your browser.
- Framework: Next.js 15
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: Radix UI
- Flow Editor: ReactFlow
- Form Handling: React Hook Form + Zod
- Icons: Lucide React
- Package Manager: pnpm
adkflow/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # UI components (Atomic Design)
│ ├── atoms/ # Basic UI elements
│ ├── molecules/ # Composite components
│ ├── organisms/ # Complex components
│ ├── templates/ # Page layouts
│ └── ui/ # Shared UI components
├── lib/ # Utility functions and configurations
├── types/ # TypeScript type definitions
├── hooks/ # Custom React hooks
├── styles/ # Additional styles
└── public/ # Static assets
- Start with an Agent: Drag a Basic Agent node onto the canvas
- Configure Properties: Click on the agent to edit its properties:
- Name and description
- Model selection (Gemini models supported)
- Instructions and system prompts
- Available tools
- Connect Agents: Create sequential workflows by connecting agents
- Add Tools: Enhance agents with various ADK tools
- Export Code: Generate production-ready Python code
- Basic Agent: Individual LLM agents with specific roles and tools
- Sequential Agent: Orchestrates multiple agents in a pipeline
- Tool Nodes: Specialized tools that can be connected to agents
Your visual flow automatically generates Python code using the Google ADK:
from google.adk.agents import LlmAgent, SequentialAgent
from google.adk.tools import tool1, tool2
# Generated agents based on your flow
agent_1 = LlmAgent(
model="gemini-2.0-flash-exp",
name="analyzer",
instruction="Analyze the input data...",
tools=[tool1, tool2]
)
sequential_agent = SequentialAgent(
name="main_pipeline",
agents=[agent_1, ...]
)pnpm dev- Start development serverpnpm build- Build for productionpnpm start- Start production serverpnpm lint- Run ESLint
The project follows Atomic Design principles:
- Atoms: Basic UI elements (buttons, inputs)
- Molecules: Simple combinations of atoms
- Organisms: Complex UI components
- Templates: Page-level layouts
- Define the type in
types/flow-types.ts - Create a new node component in
components/organisms/ - Register the node type in the flow editor
- Update the Python code generator
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow TypeScript best practices
- Use the existing component structure
- Add proper type definitions
- Test your changes thoroughly
- Follow the existing code style
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with ReactFlow for the visual editor
- UI components from Radix UI
- Styling with Tailwind CSS
- Powered by Next.js
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with a detailed description
- Include steps to reproduce the problem
Made with ❤️ for the AI development community