Building UI for Cascaide

Agents are new, and perhaps chat isn’t the right UX primitive. With these tools, it becomes easier to craft novel user experiences. If you build something imaginative, do reach out — we’d love to showcase it (https://forms.gle/xJ4eSsmUPnYnhDJL7 )

Prerequisites

• React
• Understanding of the useWorkflow and useCascade hooks

Understanding WorkflowRenderer

If you look at the code for WorkflowRenderer, it is quite straightforward. All it does is:

• Look for active nodes
• Render UI components for all active UI nodes

<div>
  {uiNodes.map(nodeId => {
    const node = activeNodes[nodeId];
    const ComponentToRender = uiComponentRegistry[node.nodeName];
    if (!ComponentToRender) {
      console.error(`UI component for node '${node.nodeName}' not found.`);
      return null;
    }
    return (
      <div key={nodeId}>
        <ComponentToRender nodeId={nodeId} />
      </div>
    );
  })}
</div>

You can think of the viewport as a stage and the renderer as a conductor that reads from the list of active UI nodes.

WorkflowRenderer is unopinionated. It simply renders, your component decides everything else. Interesting UI/UX patterns emerge via two methods:

• Playing around with the outermost div of the uiNodes
• Using React portals

Your UI nodes are React components, it has an extra superpower, it can control and communicate with the graph.

In this section, we discuss some ideas around what’s possible by playing with the outermost div of the uiNodes.

The image below shows some rough possibilities: a sticky banner node, a draggable agent UI overlay, a sidebar-like chat node, a task list UI node that portals, and a stack of UI nodes showing parallel agents in the bottom left.

A few patterns worth calling out:

• Sticky banners — Pin a node to the top or bottom of the viewport as a persistent status bar.
• Draggable overlays — Float an agent UI as a moveable panel over the main content.
• Sidebars — Slide in a chat or task node alongside existing content.
• Stacked parallel agents — Render multiple concurrent agent nodes as a stack (bottom left).
• Portalled task lists — Use React portals to render a node’s UI into a designated space

Placement Cheatsheet

The outermost div of your UI node component controls where it appears. Here are common effects and the CSS classes that produce them.

Use these as a starting point and try ideas out.

Modifying the WorkflowRenderer

Depending on your use case, there is merit in modifying the renderer. Simply change the layout in which activeNodes are rendered. In general, keep the renderer agnostic, but if needed feel free to modify it.