An AI-powered web application for building, visualizing, and executing complex automated workflows through a conversational interface.
Agent Builder lets you describe a task in plain English, then automatically generates an executable workflow graph. You can visualize the graph, inspect and edit nodes, simulate execution, and monitor run logs — all without writing code.
Key capabilities:
- Natural language → workflow graph (powered by GPT-4o)
- Clarifying questions to refine intent before graph generation
- Interactive node-based graph editor (pan, zoom, edit)
- Workflow simulation with step-by-step execution logs
- Persistent memory that learns your preferences across sessions
- 20+ enterprise integrations (Slack, Jira, GitHub, Salesforce, AWS, and more)
- Specialized AI agents: Legal Review, Code Review, Financial Analysis, Compliance Check
| Layer | Technology |
|---|---|
| Framework | Next.js 14 (App Router) |
| Language | TypeScript 5 |
| UI | React 18, Tailwind CSS, Radix UI |
| Graph | ReactFlow |
| State | Zustand (with localStorage persistence) |
| AI | OpenAI API (GPT-4o) |
| Validation | Zod |
- Node.js 18+
- An OpenAI API key
git clone <repo-url>
cd agentbuilding
npm installCreate a .env.local file in the project root:
NEXT_PUBLIC_OPENAI_API_KEY=sk-proj-...
NEXT_PUBLIC_USE_LLM=trueSet NEXT_PUBLIC_USE_LLM=false to use the deterministic fallback planner (no API key required).
npm run devOpen http://localhost:3000 in your browser.
npm run build
npm startagentbuilding/
├── app/ # Next.js app directory
│ ├── page.tsx # Main page — orchestrates the full user flow
│ ├── layout.tsx # Root layout
│ └── globals.css # Global styles
├── components/
│ ├── chat/ # Chat interface (Composer, MessageList, ClarifyPrompt)
│ ├── graph/ # Graph visualization (GraphCanvas, GraphNode, NodeInspector)
│ ├── tabs/ # Tab panels (Memory, RunLog, Integrations, Widgets)
│ └── common/ # Shared UI primitives
├── services/
│ ├── llm.ts # OpenAI API calls (intent analysis, graph generation, node execution)
│ ├── planner.ts # Graph planning (LLM-based + deterministic fallback)
│ ├── simulator.ts # Graph execution simulation (topological sort, mock payloads)
│ └── memory.ts # Memory conflict detection and extraction
├── state/
│ └── useAppStore.ts # Zustand store — all app state and actions
├── schemas/
│ └── graph.ts # Core TypeScript types (Graph, GraphNode, Memory, etc.)
└── lib/
└── utils.ts # Utility functions
- Describe your task — Type a goal in the chat (e.g., "Review the Q3 contract and notify legal via Slack").
- Answer clarifying questions — The AI asks follow-up questions to refine the workflow.
- Graph is generated — A workflow graph is created with nodes (tasks) and edges (dependencies).
- Inspect and edit — Click any node to view details, adjust parameters, or reposition nodes.
- Simulate — Run the workflow to see step-by-step execution with logs and output payloads.
- Memory updates — The app learns preferences and context from your interactions for future sessions.
The workflow engine supports 20+ node types including:
lookup · search · schedule · create_doc · notify · transform · summarize · extract · approve · branch_if · merge · wait · retry · send_message · legal_review · code_review · financial_analysis · compliance_check · translate · data_validation · research_synthesis
Box · Google Drive · Slack · Workday · Google Calendar · Email · Jira · Notion · GitHub · DocuSign · Salesforce · QuickBooks · Stripe · Linear · Figma · Zendesk · AWS · Snowflake · Databricks · HubSpot · Confluence · GitLab
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Build for production |
npm start |
Run the production server |
npm run lint |
Lint with ESLint |
- Integrations are currently simulated with mock payloads. Real connectors are not yet implemented.
- No authentication layer is included. Add auth before deploying publicly.
- No tests exist yet. Jest or Vitest would be a natural addition.