flowgram.ai

This skill provides a comprehensive framework for developers building custom nodes within the FlowGram.ai ecosystem. Designed for the demo-free-layout environment, it enables the integration of specialized functionality into visual AI workflows. Whether you are building a simple utility node that requires standard inputs or a sophisticated node with custom layout, state management, and unique user interactions, this guide outlines the necessary structure, registration steps, and best practices.

• Streamlines node creation by providing templates for simple nodes (JSON Schema-based auto-forms) and complex nodes (custom React components).

• Standardizes node data structures including inputsValues, input schemas, and output definitions to ensure compatibility with the runtime engine.

• Facilitates deep integration with FlowGram core materials such as PromptEditorWithVariables, VariableSelector, and JsonCodeEditor.

• Manages dependency injection and registry registration within the demo-free-layout architecture to ensure nodes are discoverable in the canvas.

• Supports advanced field management using the FlowGram Field component to handle validation, binding, and reactivity.

• Use simple node templates for basic API calls or utility operations where automatic form generation is sufficient.

• Use complex node patterns for high-interaction components like advanced HTTP debuggers, data visualizers, or multi-step configuration forms.

• Ensure all nodes adhere to the WorkflowNodeType constant registration to maintain modularity.

• Leverage the provided SVG/JPG icon placement for visual consistency in the node panel.

• Always define clear JSON schemas for inputs and outputs to facilitate seamless data flow between interconnected nodes in the canvas.

• Adhere to the Single Responsibility Principle: each custom node should represent one specific, clear unit of work in the workflow.