Agent Builder

An AI-powered web application for building, visualizing, and executing complex automated workflows through a conversational interface.

Overview

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

Tech Stack

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

Getting Started

Prerequisites

• Node.js 18+
• An OpenAI API key

Installation

git clone <repo-url>
cd agentbuilding
npm install

Environment Setup

Create a .env.local file in the project root:

NEXT_PUBLIC_OPENAI_API_KEY=sk-proj-...
NEXT_PUBLIC_USE_LLM=true

Set NEXT_PUBLIC_USE_LLM=false to use the deterministic fallback planner (no API key required).

Running Locally

npm run dev

Open http://localhost:3000 in your browser.

Production Build

npm run build
npm start

Project Structure

agentbuilding/
├── 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

How It Works

1. Describe your task — Type a goal in the chat (e.g., "Review the Q3 contract and notify legal via Slack").
2. Answer clarifying questions — The AI asks follow-up questions to refine the workflow.
3. Graph is generated — A workflow graph is created with nodes (tasks) and edges (dependencies).
4. Inspect and edit — Click any node to view details, adjust parameters, or reposition nodes.
5. Simulate — Run the workflow to see step-by-step execution with logs and output payloads.
6. Memory updates — The app learns preferences and context from your interactions for future sessions.

Supported Node Types

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

Supported Integrations

Box · Google Drive · Slack · Workday · Google Calendar · Email · Jira · Notion · GitHub · DocuSign · Salesforce · QuickBooks · Stripe · Linear · Figma · Zendesk · AWS · Snowflake · Databricks · HubSpot · Confluence · GitLab

Available Scripts

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

Notes

• 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.