Variable Binding Editor

Bind workflow target fields to upstream node outputs and typed variables.

string

array

"use client"

import { useState } from "react"

import {
  VariableBindingEditor,
  type VariableBinding,
} from "@/components/ui/variable-binding-editor"
import type { VariableSelectorItem } from "@/components/ui/variable-selector"

const variables: VariableSelectorItem[] = [
  {
    id: "start.query",
    group: "Start",
    label: "User query",
    path: "{{start.query}}",
    type: "string",
  },
  {
    id: "llm.intent",
    group: "Classify intent",
    label: "Intent",
    path: "{{llm.intent}}",
    type: "enum",
  },
  {
    id: "rag.documents",
    group: "Retrieve knowledge",
    label: "Documents",
    path: "{{rag.documents}}",
    type: "array",
  },
]

const initialBindings: VariableBinding[] = [
  { id: "query", target: "query", source: "start.query", type: "string" },
  { id: "context", target: "context", source: "rag.documents", type: "array" },
]

export function VariableBindingEditorDemo() {
  const [bindings, setBindings] = useState(initialBindings)

  return (
    <VariableBindingEditor
      value={bindings}
      onValueChange={setBindings}
      variables={variables}
      className="w-full max-w-3xl"
    />
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add https://ui.zgi.ai/r/variable-binding-editor.json

npm


pnpm dlx shadcn@latest add https://ui.zgi.ai/r/variable-binding-editor.json

yarn

yarn dlx shadcn@latest add https://ui.zgi.ai/r/variable-binding-editor.json

Component

components/ui/variable-binding-editor.tsx

"use client"

import * as React from "react"
import { ArrowRightIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import {
  VariableSelector,
  type VariableSelectorItem,
} from "@/components/ui/variable-selector"

export interface VariableBinding {
  id: string
  target: string
  source?: string
  type?: string
}

export interface VariableBindingEditorProps
  extends React.ComponentProps<"div"> {
  value: VariableBinding[]
  variables: VariableSelectorItem[]
  onValueChange?: (value: VariableBinding[]) => void
  disabled?: boolean
}

export function VariableBindingEditor({
  value,
  variables,
  onValueChange,
  disabled = false,
  className,
  ...props
}: VariableBindingEditorProps) {
  function updateBinding(index: number, patch: Partial<VariableBinding>) {
    onValueChange?.(
      value.map((binding, bindingIndex) =>
        bindingIndex === index ? { ...binding, ...patch } : binding
      )
    )
  }

  return (
    <div className={cn("space-y-2", className)} {...props}>
      {value.map((binding, index) => (
        <div
          key={binding.id}
          className="border-border bg-card grid items-center gap-2 rounded-lg border p-2 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1.2fr)_auto]"
        >
          <Input
            value={binding.target}
            onChange={(event) =>
              updateBinding(index, { target: event.target.value })
            }
            placeholder="target field"
            disabled={disabled}
            className="h-9 font-mono text-sm"
          />
          <ArrowRightIcon className="text-muted-foreground mx-auto size-4" />
          <VariableSelector
            variables={variables}
            value={binding.source}
            disabled={disabled}
            onValueChange={(source, item) =>
              updateBinding(index, { source, type: item.type })
            }
            placeholder="Select source variable"
          />
          {binding.type ? (
            <Badge variant="secondary" className="h-7 rounded-md">
              {binding.type}
            </Badge>
          ) : null}
        </div>
      ))}
    </div>
  )
}

Usage

import { VariableBindingEditor } from "@/components/ui/variable-binding-editor"
 
export function Example() {
  return <VariableBindingEditor value={[]} variables={[]} />
}

Usage Stat Card Variable Selector

On This Page

Installation Component Usage

Deploy and Scale Agents with ZGI

ZGI delivers the infrastructure and developer experience you need to ship reliable audio & agent applications at scale.