flowgram.ai

本技能為開發人員提供在 FlowGram.ai 生態系統中構建自定義節點的全面架構。它專為 demo-free-layout 環境而設計，旨在將專業功能整合到可視化的 AI 工作流中。無論您是要構建需要標準輸入的簡單實用節點，還是需要自定義佈局、狀態管理和獨特用戶交互的複雜節點，本指南都概述了必要的結構、註冊步驟和最佳實踐。

• 通過提供簡單節點（基於 JSON Schema 的自動表單）和複雜節點（自定義 React 組件）的模板，簡化節點創建過程。

• 標準化節點數據結構，包括 inputsValues、輸入 schema 和輸出定義，以確保與運行時引擎的兼容性。

• 促進與 FlowGram 核心組件的深度整合，如 PromptEditorWithVariables、VariableSelector 和 JsonCodeEditor。

• 管理 demo-free-layout 架構內的依賴注入和註冊，確保節點在畫布中可被識別。

• 使用 FlowGram Field 組件管理字段，處理驗證、綁定和響應式狀態。

• 對於基本的 API 調用或足夠使用自動表單的實用操作，請使用簡單節點模板。

• 對於高交互性的組件（如高級 HTTP 調試器、數據可視化工具或多步驟配置表單），請使用複雜節點模式。

• 所有節點必須遵守 WorkflowNodeType 常量註冊，以保持模組化。

• 利用預留的 SVG/JPG 圖標路徑，確保節點面板的視覺一致性。

• 務必為輸入和輸出定義清晰的 JSON schema，以促進畫布中互連節點之間的數據流暢傳輸。

• 遵循單一職責原則：每個自定義節點應代表工作流中一個特定且明確的工作單元。