Stack AI UI design & app screens

A node canvas that has to make abstract logic feel physical

Stack AI's core surface is an infinite, pannable canvas where an AI workflow is built from draggable nodes wired together left to right. Inputs sit on the left, an LLM or logic node in the middle, outputs on the right, and Bézier connector lines carry data along visible edges. The central design problem — making an invisible thing (a chain of prompts, retrieval steps, and API calls) into something you can point at — is solved the way Figma and n8n solve it: give every step a card with a title bar, colored to its type, and let the wires do the explaining.

Each node exposes typed ports as small dots on its edges; you drag from an output dot to an input dot to form a connection, and the connector snaps and animates. Node categories are color-coded (input sources, models, data/knowledge bases, logic, output), so a dense graph stays parseable at a glance even zoomed out. For anyone designing a visual programming or automation tool, the takeaway is that consistent port affordances plus type-colored nodes let a beginner reason about data flow without reading a single field label.

The right-hand config panel and the canvas/inspector split

Clicking a node slides in a right-hand inspector panel where the real configuration happens — the prompt template with variable insertion, model and temperature selectors, and the knowledge base a retrieval node should query. This keeps the canvas as a clean topological map while pushing dense form controls into a dedicated column, a classic and effective canvas-plus-inspector division of labor. The prompt editor supports referencing upstream node outputs as inserted variables, visually reinforcing that data flows along the wires you drew.

Stack AI leans on a light, near-white workspace with a dotted or grid background so the colored nodes and connector lines carry all the visual weight. A top toolbar holds the run, save, and deploy controls plus project naming, and a left rail lists the node types you can drag in. The overall composition — quiet background, loud nodes, controls at the edges — is a template worth internalizing for any builder-style tool where the user's own graph should be the brightest thing on screen.

Closing the loop: test, then ship as an interface

What separates Stack AI from a diagramming toy is that the same canvas runs. A testing panel lets you fire a sample input through the graph and watch each node's output populate inline, so debugging happens in the same spatial context where you built the logic — no jump to a separate console. Errors surface on the offending node rather than as a detached stack trace, which keeps the mental model intact while you iterate.

Deployment is treated as a first-class, separate surface: a workflow can be published as a hosted chat assistant, a form, an API endpoint, or an embedded widget, each with its own configuration screen for branding and access. The design move to study is how the tool cleanly separates the two modes of work — an editing mode (the node canvas) and a delivery mode (the deployment surfaces) — so that building the logic and shipping a usable product feel like distinct, well-bounded stages rather than one overloaded screen.

Frequently asked questions