Node Palette

A searchable list of blocks to click or drag onto the canvas.

"use client";

import { toast } from "sonner";

import { WorkflowNodePalette } from "../components/workflow-node-palette";
import {
  WorkflowShell,
  WorkflowShellCard,
  WorkflowShellHeader,
} from "../components/workflow-shell";
import { WORKFLOW_BLOCKS } from "../constants/workflow-blocks";

export default function WorkflowNodePaletteExample() {
  return (
    <WorkflowShell className="w-72">
      <WorkflowShellHeader>Blocks</WorkflowShellHeader>
      <WorkflowShellCard className="h-96 overflow-hidden">
        <WorkflowNodePalette
          blocks={WORKFLOW_BLOCKS}
          className="h-full"
          onAdd={(block) => toast(`Added ${block.title}`)}
        />
      </WorkflowShellCard>
    </WorkflowShell>
  );
}

$ bunx --bun shadcn@latest add @notra/workflow-node-palette

WorkflowNodePalette groups blocks by their group and filters them as you type. Clicking a block calls onAdd. Dragging one onto a WorkflowCanvas with onDropBlock drops it where you let go. WORKFLOW_BLOCKS ships triggers, AI models, logic, deterministic tasks, integrations and email steps for GEO work.

Used in

GEO Workflow Builder

A workflow builder with a block palette, a playable canvas, a run log and a node sheet.