AI Workflow Nodes

The YH-UI Flow component library provides out-of-the-box custom node components designed specifically for AIGC / LLM agent orchestration. This allows developers to bypass tedious low-level custom node implementation and build workflow panels similar to Coze or Dify rapidly.

Features

The AI workflow nodes are visually enhanced for specfic semantic contexts and come pre-configured with fields like prompt, model, and status. Provide these attributes inside each node's data. Here are the supported type strings and common data parameters:

• Start Node (ai-start): Entry point of the workflow.
• Prompt Node (ai-prompt): Displays data.prompt as a preview string, for system prompts or template configuration.
• LLM Node (ai-llm): Displays data.model (like GPT-4) and data.status ('pending', 'running', 'success') to exhibit progress properly.
• Condition Node (ai-condition): Contains a data.condition displaying the rule. Has top/bottom extra handles natively for multiple outcome paths.
• Tool Node (ai-tool): Third-party tool invocations (plugins).
• Agent Node (ai-agent): A distinct AI Agent processing loop.
• Memory Node (ai-memory): Hook context or memories.
• End Node (ai-end): End of the workflow pipe.

Demo: Basic Chatbot Pipeline

This demo exhibits a standard process: Start -> Prompt Config -> LLM -> End.

Chat Start

Dataset Assembling

Intent Classification

Debugger Agent

Q&A Chatbot

Return message

Interactive Diagram

API Reference

AI native nodes consume the same Node interface as default nodes do but have customized UIs. To activate them, do run registerAiWorkflowNodes() first or register those nodes using standard registerCustomNode() API.

Node Type	Extra payload (inject from `data`)	Description
ai-start	-	Start Node, rounded component with start icon.
ai-prompt	prompt (string)	System prompt preview. Overflown long texts will visually vanish via ellipses natively.
ai-llm	model (string) status ('pending'|'running'|'success')	The Core. Highlight the execution sequence dynamically via the status text-coloring rules.
ai-condition	condition (string)	Split condition branches.
ai-tool	tool (string, optional)	Hook for API integrations.
ai-end	-	Finalize output Node, colored differently.

Advanced Features & Best Practices

1. Super Template Engine

Leveraging YH-UI Flow's fully data-driven ecosystem, you can architect a one-click Template Generation Engine. Instead of forcing users to rigidly drag and arrange primitives on a canvas, we guide developers to bypass traditional orchestration paradigms. Through an easy-to-use JSON DSL config, you can dynamically `render` an interconnected lattice of logic. Imagine instantly assembling an inclusive "Standard Customer Service Agent": immediately conjuring a Memory Node (AiMemoryNode), branching off with an Agent Orchestration node (AiAgentNode), or spawning a RAG retrieval subtree from a raw JSON payload – transforming the graph to a one-click logic grid.

2. "Zero-Config" Integration with Vercel AI SDK / LangChain

To re-mold the developer mindset, remember this: YH-UI Flow is absolutely not just another "drawing interface," but a competent Logical Stream Control Engine. Since the architecture relies on native Vue components, developers can effortlessly tether external states gracefully (like `useAiStream` or MCP callbacks) directly to the `AiLlmNode`. We instruct users to embrace bidirectional data bindings: as you ping LLM networks and funnel down streamed sequences or token accumulation metrics, those variables map directly to your Node props. This gracefully mutates status fields (pending -> running -> success), causing nodes to emit a native "glowing" feedback, and sequentially drives the next active edge illumination. This dimension of native UI/data synchronization is unparalleled and near-impossible for rendering-only libraries like AntV!

3. Native Vue 3 Ultimate Performance Showcase

Built around a pure-blooded Vue 3 component architecture, we outscale the heavy vanilla-JS wrapper boundaries typically endured when adopting AntV X6. When structuring massive AIGC forms and configuration sheets, we empower developers to boldly implement Vue's `Teleport` mechanism. Confidently map internal canvas slots outward onto robust right-side drawer panels! No archaic `node.setData` needed—all UI interactions stay seamlessly unified with `ref` reactive data bridging. Bolstered by inner virtual scrolling thresholds and targeted `shallowRef` pipelines, our engine proudly pledges rock-solid capabilities. We're endorsing flawlessly synchronized renders spanning up to 2,000 parallel pulsing/animating stream nodes, providing flawless viewport pannings without inflicting massive synchronization fatigue onto the developers.