Design, connect, and chat with AI agents in real time through visual diagrams built with React Flow.
This project combines a Next.js frontend for the user interface and a NestJS backend for orchestrating agents, tools, and sessions.

📌 Goal: Enable users to visually create agent flows (nodes), configure their behavior, and chat with them — without touching code.

• Visual editor for agents and flows (React Flow).
• Live chat with one or more agents in the diagram.
• Per-node configuration (prompts, tools, transfers, etc.).
• Modular API in NestJS for orchestration and execution.
• Container-ready: Docker for backend and Next.js production build.

.
├── client/               # Frontend (Next.js)
├── server/               # Backend (NestJS)
├── docker-compose.yml    # Docker-Compose
└── README.md

• Node.js 18+ (for local development)
• Docker and Docker Compose (for containers)
• .env files (see environment variables below)

If using Docker, you only need Docker and the .env files.

Create the following .env files:

client/.env.development

NEXT_PUBLIC_CLIENT_HOST=http://localhost:3000
NEXT_PUBLIC_HOST=http://localhost:8080

server/.env

ENVIRONMENT=development
PORT=8080

server/.env.development

CLIENT_HOST=http://localhost:3000
HOST=http://localhost:8080
OPENAI_API_KEY=sk-proj...
MONGO_DATABASE=mongodb://localhost:27017/agents

Adjust values to match your infrastructure (DB, LLM providers, etc.).

cd client
npm install
npm run dev
# Open http://localhost:3000

cd server
npm install
npm run start:dev
# Runs at http://localhost:8080 (or your .env PORT)

cd client
npm ci
npm run build
npm run start

cd server
npm ci
npm run build
npm run start:prod

On production servers, consider using a reverse proxy (Nginx/Caddy) and PM2/systemd for process management.

services:
  mongo:
    image: mongo:7
    ports:
      - 27017:27017
    volumes:
      - mongo_data:/data/db
    networks:
      - app-network

  server:
    build:
      context: ./server
      dockerfile: Dockerfile
    container_name: server
    ports:
      - 8080:8080
    environment:
      - MONGODB_URI=mongodb://mongo:27017/agents
    depends_on:
      - mongo
    networks:
      - app-network
    env_file:
      - ./server/.env
      - ./server/.env.development
    restart: unless-stopped

volumes:
  mongo_data:

networks:
  app-network:

Then run:

docker compose up -d --build
# Frontend: http://localhost:3000
# Backend:  http://localhost:8080

In production, expose only the frontend publicly and connect to the backend internally or via proxy.

1. Open the frontend and create a diagram with nodes/agents.
2. Configure each node (prompt, tools, transfer conditions, etc.).
3. Save / publish the flow.
4. Open the chat and interact with one or more agents from the diagram.
5. Iterate visually until the desired behavior is achieved.

• Frontend: Next.js (React), React Flow, TypeScript.
• Backend: NestJS, LangChain, TypeScript.
• Infrastructure: Docker / Docker Compose.
• Integrations: LLM providers, WebSockets.

Ideas and PRs are welcome!
Open an issue to suggest new nodes/templates, integrations, or UX improvements for the editor.

Matias N. Salas
This project is licensed under the GNU Affero General Public License v3 (AGPL-3.0).
This ensures that:

• Any modifications must be released under the same license.
• Public use of the software as a service (SaaS) still requires releasing the source code.
• No one can take the project private without contributing back.

For details, see LICENSE.