Official Form Materials
How to Use?
Via Package Reference
Official form materials can be used directly via package reference:
npm install @flowgram.ai/form-materials
import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
Adding Material Source Code via CLI
If customization of components is required (e.g., changing text, styles, or business logic), it is recommended to add the material source code to the project for customization via CLI:
npx @flowgram.ai/form-materials@latest
After running, the CLI will prompt the user to select the material 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 the source code of a specified material via CLI:
npx @flowgram.ai/form-materials@latest components/json-schema-editor
After the CLI runs successfully, the relevant materials will be automatically added to the src/form-materials directory in the current project.
Notes
- Official materials are currently implemented based on Semi Design. If there is a need for a different underlying component library, the source code can be copied via CLI for replacement.
- Some materials may depend on third-party npm libraries, which will be automatically installed during CLI execution.
- Some materials may depend on other official materials. The source code of these dependent materials will also be added to the project during CLI execution.
Currently Supported Component Materials
TypeSelector
import { TypeSelector } from '@flowgram.ai/form-materials'
TypeSelector is used for variable type selection.
VariableSelector
import { VariableSelector } from '@flowgram.ai/form-materials'
VariableSelector is used to display a variable tree and select a single variable from it.
JsonSchemaEditor
import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
JsonSchemaEditor is used for visually editing JsonSchema.
Commonly used for visually configuring the output variables of nodes.
DynamicValueInput
import { DynamicValueInput } from '@flowgram.ai/form-materials'
DynamicValueInput is used for configuring values (constant values + variable values).
JsonEditorWithVariables
import { JsonEditorWithVariables } from '@flowgram.ai/form-materials'
A JSON editor that supports variables.
CodeEditor
import { CodeEditor } from '@flowgram.ai/form-materials'
A code editor, currently only supports TypeScript (JavaScript).
ConditionRow
import { ConditionRow } from '@flowgram.ai/form-materials'
The first condition checks if the query variable contains Hello Flow, the second condition checks if the enable variable is true.
ConditionRow is used for configuring a single row of condition judgment.
PromptEditorWithVariables
import { PromptEditorWithVariables } from '@flowgram.ai/form-materials'
LLM_3 and LLM_4 use variables from batch item of Loop
PromptEditorWithVariables is a Prompt editor that supports variable configuration.
Below is a configuration example for the Prompt editor, where the query variable is of string type and the enable variable is of boolean type:
{
type: "template",
content: "#User Input:\nquery:{{start_0.query}}\nenable:{{start_0.enable}}"
}
PromptEditorWithInputs
import { PromptEditorWithInputs } from '@flowgram.ai/form-materials'
A Prompt editor with input variables. You need to pass the value of inputsValues when using it:
<PromptEditorWithInputs
inputsValues={{
a: { type: 'constant', content: "test" },
b: { type: 'ref', content: ["a", "b", "c"] }
}}
/>
InputsValues
import { InputsValues } from '@flowgram.ai/form-materials'
Key-value pair input, you can configure the infer-inputs-plugin material to implement inputs type inference.
BatchOutputs
import { BatchOutputs } from '@flowgram.ai/form-materials'
Loop output, you need to configure the batch-outputs-plugin material to implement loop output scope limitation + output variable automatic linkage derivation.
Currently Supported Effect Materials
provideBatchInput
import { provideBatchInputEffect } from '@flowgram.ai/form-materials'
Type of item is automatically inferred based on preceding type.
provideBatchInputEffect is used for configuring loop batch input derivation. It automatically derives two variables based on the input:
- item: Derived from the input variable array type, representing each item in the loop.
- index: Numeric type, representing the iteration count.
autoRenameRef
import { autoRenameRefEffect } from '@flowgram.ai/form-materials'
When the query variable name changes, automatically rename references in downstream inputs.
When the name of a preceding output variable changes:
- All references to that variable in form items are automatically renamed.
syncVariableTitle
import { syncVariableTitle } from '@flowgram.ai/form-materials'
The node name in the variable system changes automatically.
provideJsonSchemaOutputs
import { provideJsonSchemaOutputs } from '@flowgram.ai/form-materials'
The node JsonSchema is synchronized to the node output of the variable system, so that the downstream of the node can be selected.
Currently Supported FormPlugin Materials
batch-outputs-plugin
import { createBatchOutputsFormPlugin } from '@flowgram.ai/form-materials'
The plugin limits the loop scope to only reference variables of nodes within the loop
Downstream nodes are automatically inferred based on the process
Loop output plugin, needs to be used with the BatchOutputs material
const formMeta = {
plugins: [createBatchOutputsFormPlugin({ outputKey: 'loopOutputs' })],
}
infer-inputs-plugin
import { inferInputsPlugin } from '@flowgram.ai/form-materials'
inputs is the JsonSchema type of inputsValues
When passing to the backend, the JsonSchema type of inputsValues is automatically calculated based on the variable engine
const formMeta = {
plugins: [
// headers stores the type definition of headersValues
createInferInputsPlugin({ sourceKey: 'headersValues', targetKey: 'headers' }),
// params stores the type definition of paramsValues
createInferInputsPlugin({ sourceKey: 'paramsValues', targetKey: 'params' }),
],
}
