Design AI agents that understand, think, and take action — without writing a single line of code.
A no-code, visual workflow builder for creating intelligent AI agents powered by Google Gemini.
MetaFlow is a full-stack SaaS platform that empowers users to create, configure, and deploy custom AI agents through an intuitive visual drag-and-drop workflow editor. Built on top of Google Gemini AI, it enables anyone — from developers to non-technical users — to build sophisticated AI-powered chatbots and task automators without writing code.
Think of it as a Zapier meets ChatGPT builder — visually wire up logic flows with AI reasoning, conditional branching, API integrations, and human-in-the-loop approvals, then deploy your agent with a single click.
- Drag-and-drop node-based canvas powered by React Flow
- Connect nodes with edges to define agent execution pipelines
- Real-time editing with auto-save to Convex backend
- Backed by Google Gemini 2.5 Flash for fast, intelligent responses
- Custom system instructions per agent for specialized behavior
- Built-in function calling / tool use support
| Node | Description |
|---|---|
| 🟢 Start | Entry point of the workflow |
| 🤖 Agent | AI reasoning node with custom instructions & model config |
| 🔌 API | HTTP request node for external API integrations |
| 🔀 If/Else | Conditional branching logic |
| 🔁 While | Looping construct for iterative tasks |
| 👤 User Approval | Human-in-the-loop decision gate |
| 🔴 End | Terminal node of the workflow |
- Clerk integration for secure user authentication (Sign In / Sign Up)
- Protected routes via Next.js middleware
- Arcjet rate limiting with token-bucket algorithm (5,000 requests/month)
- RESTful API endpoint (
/api/agent-sdk) to interact with published agents externally - Streaming responses for real-time chat experiences
- Conversation persistence via Convex
- View and manage all your AI agents in one place
- Create new agents with a single click
- Agent publishing workflow (draft → published)
- Built-in pricing page for monetization
- Token-based usage tracking per user
- Subscription tier management
agentbuilder/
├── app/
│ ├── (auth)/ # Clerk auth pages (sign-in, sign-up)
│ ├── agent-builder/ # Visual workflow editor
│ │ ├── [agentId]/ # Dynamic agent editor page
│ │ ├── _components/ # Builder UI (Header, SettingPanel, ToolsPanel)
│ │ ├── _customNodes/ # Node components (Agent, API, IfElse, While, etc.)
│ │ └── _nodeSettings/ # Per-node configuration panels
│ ├── api/
│ │ ├── agent-chat/ # Internal chat API route
│ │ └── agent-sdk/ # External SDK API endpoint
│ ├── dashboard/
│ │ ├── _components/ # Dashboard UI components
│ │ ├── my-agents/ # Agent management page
│ │ ├── pricing/ # Pricing page
│ │ └── profile/ # User profile page
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Landing page (hero section)
│ └── provider.tsx # Theme & context providers
├── components/
│ └── ui/ # Reusable shadcn/ui components
├── config/
│ ├── Arject.ts # Arcjet rate-limiting configuration
│ └── OpenAiModel.ts # OpenAI client setup
├── context/
│ ├── UserDetailContext.tsx # User state context
│ └── WorkflowContext.tsx # Workflow nodes/edges state
├── convex/
│ ├── schema.ts # Database schema (Users, Agents, Conversations)
│ ├── agent.ts # Agent CRUD mutations & queries
│ ├── conversation.ts # Conversation management
│ └── user.ts # User management
├── hooks/
│ └── use-mobile.ts # Responsive breakpoint hook
├── lib/
│ └── utils.ts # Utility functions (cn, etc.)
├── types/
│ └── AgentType.tsx # TypeScript type definitions
├── middleware.ts # Clerk auth middleware
└── package.json
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Frontend | React 19, TypeScript 5 |
| Styling | Tailwind CSS 4, Framer Motion |
| UI Components | shadcn/ui (Radix UI primitives) |
| Workflow Canvas | @xyflow/react (React Flow) |
| Backend / DB | Convex (real-time serverless backend) |
| AI Engine | Google Gemini 2.5 Flash |
| Authentication | Clerk |
| Rate Limiting | Arcjet |
| Charts | Recharts |
| Form Handling | React Hook Form + Zod |
- Node.js ≥ 18.x
- npm or yarn or pnpm
- A Convex account
- A Clerk account
- A Google AI Studio API key (Gemini)
- An Arcjet account (optional, for rate limiting)
git clone https://github.com/your-username/agentbuilder.git
cd agentbuildernpm installCreate a .env.local file in the project root:
# Convex
CONVEX_DEPLOYMENT=dev:your-deployment-slug
NEXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
# Google Gemini AI
GEMINI_API_KEY=your-gemini-api-key
# Arcjet Rate Limiting
ARCJET_KEY=your-arcjet-keynpx convex devIn a separate terminal:
npm run devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Create an optimized production build |
npm run start |
Start the production server |
npm run lint |
Run ESLint for code quality checks |
npx convex dev |
Start the Convex development backend |
AgentBuilder uses Convex as its real-time backend with the following tables:
// UserTable — Stores authenticated user profiles
{
name: string,
email: string,
imageUrl: string,
subscription: string, // "free" | "pro" | "enterprise"
token: number // Usage token balance
}
// AgentTable — Stores agent configurations & workflows
{
agentId: string, // Unique agent identifier
name: string, // Agent display name
instruction?: string, // System prompt / persona
config?: any, // Model configuration
nodes?: any, // React Flow nodes (workflow)
edges?: any, // React Flow edges (connections)
published: boolean, // Deployment status
userId: Id<"UserTable">, // Owner reference
agentToolConfig?: any // Tool/function definitions
}
// ConversationTable — Tracks chat sessions
{
conversationId: string,
agentId: Id<"AgentTable">,
userId: Id<"UserTable">
}POST /api/agent-chat
| Field | Type | Description |
|---|---|---|
messages |
Array<{role, content}> |
Chat history |
agentToolConfig |
{agents, tools} |
Agent & tool configuration |
Response: Streaming text (text/plain)
POST /api/agent-sdk
| Field | Type | Description |
|---|---|---|
userId |
string |
User identifier |
agentId |
string |
Target agent ID |
messages |
Array<{role, content}> |
Chat history |
agentToolConfig |
{tools} |
Tool definitions |
Response: Streaming text (text/plain; charset=utf-8)
💡 Use this endpoint to embed your published agents into any external application.
- Sign up at localhost:3000/sign-up
- Navigate to the Dashboard
- Click "Create New Agent"
- You'll be taken to the Visual Workflow Editor
- Drag nodes from the toolbox onto the canvas:
- Add a Start node → connect to an Agent node
- Configure the Agent with custom instructions
- Add API nodes for external integrations
- Use If/Else for conditional logic
- Add User Approval for human-in-the-loop
- End with an End node
- Configure each node's settings in the side panel
- Publish your agent to make it available via the SDK API
- Push your code to GitHub
- Import the repo on Vercel
- Add all environment variables from
.env.local - Deploy!
npx convex deployContributions are welcome! 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
This project is licensed under the MIT License. See the LICENSE file for details.