Getting Started

How to Use?

Use via Package Import

Official form materials can be used directly through package import:

npm

yarn

pnpm

bun

deno

npm install @flowgram.ai/form-materials

import { JsonSchemaEditor } from '@flowgram.ai/form-materials'

Add Material Source Code via CLI

If your business has customization requirements for components (e.g., changing text, styles, business logic), it is recommended to add material source code to the project via CLI for customization:

npx @flowgram.ai/cli@latest materials

After running, the CLI will prompt the user to select materials to add to the project:

? Select one material to add: (Use arrow keys)
❯ components/json-schema-editor
  components/type-selector
  components/variable-selector

Users can also directly add source code for specified materials via CLI:

npx @flowgram.ai/cli@latest materials components/json-schema-editor

After the CLI runs successfully, the relevant materials will be automatically added to the src/form-materials directory under the current project.

Notes

Official materials are currently implemented based on Semi Design. If your business has underlying component library requirements, you can replace them by copying the source code via CLI
Some materials depend on third-party npm libraries, which will be automatically installed when the CLI runs
Some materials depend on other official materials, and the source code of these dependent materials will be added to the project together when the CLI runs

Appendix: Finding Materials by Node Type

Implementing Node Input and Output

Parameter Configuration

Node Input: InputsValues, InputsValuesTree
Node Output: JsonSchemaEditor
Input Validation: validateFlowValue
Output Variable Generation: provideJsonSchemaOutputs

Parameter Display

Input Display: DisplayInputsValues
Output Display: DisplayOutputs

Implementing Code Nodes

Code Editor: CodeEditor

Implementing LLM Nodes

Prompt Editor: PromptEditor
Prompt Editor with Variables: PromptEditorWithVariables

Implementing Condition Branch Nodes

Single-line Condition Branch Configuration: ConditionRow
Variable Listening for Branch Linkage: listenRefSchemaChange, listenRefValueChange

Implementing Database Nodes

Single-line Database Query Condition Configuration: DBConditionRow
SQL Editor: SQLCodeEditor
SQL Editor with Variables: SQLEditorWithVariables

Implementing Loop Nodes

Loop Input

Loop Input Array Variable Selector: BatchVariableSelector
Item, Index Derivation: provideBatchInput

Loop Output

Loop Output Array Variable Selector: BatchOutputs
Output Variable Scope Chain Adjustment + Type Derivation: batchOutputsPlugin

Implementing HTTP Nodes

JSON Editor: JsonCodeEditor
JSON Editor with Variables: JsonEditorWithVariables

Implementing Variable Assignment/Declaration Nodes

Single-line Variable Assignment, Declaration: AssignRow
Variable Assignment, Declaration Configuration List: AssignRows
Variable Declaration Type Automatic Derivation: inferAssignPlugin

#Getting Started

#How to Use?

#Use via Package Import

#Add Material Source Code via CLI

#Appendix: Finding Materials by Node Type

#Implementing Node Input and Output

#Implementing Code Nodes

#Implementing LLM Nodes

#Implementing Condition Branch Nodes

#Implementing Database Nodes

#Implementing Loop Nodes

#Implementing HTTP Nodes

#Implementing Variable Assignment/Declaration Nodes