Skip to main content
← Back to Portfolio Web App

OneEngine — AI Agent Workflow Platform

A visual workflow builder for orchestrating AI agents: drag nodes onto a canvas, branch on conditions, and export the graph as JSON or cURL.

Web App UI/UX Design Dashboard Vue TypeScript

Client

OneStudio (produk sendiri)

Year

2026

Role

Product design & front-end engineering

Duration

2026 - in development

OneEngine — AI Agent Workflow Platform
Screenshot from OneEngine — AI Agent Workflow Platform

The Challenge

Building agent workflows usually means writing code. That puts the people closest to the process outside the loop, and turns every small change into a request for a developer.

The Approach

We designed OneEngine so the workflow is a diagram, not a script. A node graph runs the agents, while the builder is the interface people actually touch day to day. Because that graph is plain JSON, a workflow can be exported, versioned, and triggered from anywhere - including a chat window.

What Was Built

11 · 3 with screenshots

Screenshot from the running project.

OneEngine — AI Agent Workflow Platform — Visual Workflow Builder
01

Visual Workflow Builder

Drag agent, condition, split, merge, and loop nodes onto a canvas and wire them together. The graph updates as you build, so the shape of a flow is readable long before it runs. Nodes can be repositioned freely, and each one opens a config panel for its own parameters.

Screenshot from the running project
OneEngine — AI Agent Workflow Platform — Tool Library with Categories
02

Tool Library with Categories

Every capability the agents can call is listed in one place, grouped by category (file, api, database, llm) and filterable by origin - local, MCP, agent, or workflow. Search covers names, descriptions, and servers.

Screenshot from the running project
OneEngine — AI Agent Workflow Platform — Multi-Provider LLM Configuration
03

Multi-Provider LLM Configuration

Register several model providers side by side rather than binding one to the whole workflow. Each provider keeps its own model selection and enabled state, so cost and capability can be balanced per step.

Screenshot from the running project

Also built

8

MCP Server Integration

Connect external tool servers over the Model Context Protocol so a workflow can reach services we did not build, and keep them reachable as those tools change.

Streaming Execution & Traces

Responses stream over SSE with live scheduling, run history, and a per-run trace view, so you can see exactly which node failed instead of guessing where a run died.

Chat Interface with Tool Call Trace

A conversational front end that shows the tool calls behind each answer inline, including results and execution groups, so an agent run is legible while it happens.

Scheduler & Execution History

Runs can be scheduled ahead of time, and every past execution is kept with its own detail view for comparing outcomes across runs.

Agent Library

Specialised agents are defined once, with their model and permitted tools, then reused across any workflow instead of being rewritten each time.

Skill Library

Reusable prompt fragments and instruction sets that can be selected when composing a node, keeping consistent behaviour across workflows.

Graph & JSON Export

Any workflow can be viewed as a diagram, exported as JSON, or copied as a cURL request, so a flow can move between the interface and a terminal without being rebuilt.

WhatsApp & Telegram Triggers

Automation can be started from a chat the team already uses, so runs happen where people are rather than only inside the dashboard.

Tech Stack

Vue 3 TypeScript Tailwind CSS Vue Flow Pinia Python FastAPI LangGraph PostgreSQL SSE

The Outcome

The result is a tool an operations team can actually run on its own. What used to need a developer and a deploy now happens in a browser, and every run leaves a trace you can inspect when something goes wrong.

About This Project

OneEngine is a self-hosted runtime platform for building and running AI agent workflows.

The design problem was not the agents themselves - it was that the only way to arrange them was a text file. We moved that arrangement into a canvas so a workflow is something you can look at, argue about, and change without opening an editor.

The graph is deliberately plain JSON. That keeps it inspectable, diffable, and portable: a workflow built in the interface is the same object a developer gets when they export it. Nothing is locked inside the tool.

The interface is the main design work - a graph canvas where agents, conditions, splits, merges, and loops connect visually, with live execution traces drawn back onto the canvas so a run reads as a journey through the diagram.