import { PackageManagerTabs } from '@theme';

# Getting Started

## How to Use?

### Use via Package Import

Official form materials can be used directly through package import:

<PackageManagerTabs command="install @flowgram.ai/form-materials" />

```tsx
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**:

```bash
npx @flowgram.ai/cli@latest materials
```

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

```console
? 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:

```bash
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.

:::warning Notes

1. Official materials are currently implemented based on [Semi Design](https://semi.design/). If your business has underlying component library requirements, you can replace them by copying the source code via CLI
2. Some materials depend on third-party npm libraries, which will be automatically installed when the CLI runs
3. 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](./components/inputs-values), [InputsValuesTree](./components/inputs-values-tree)
- Node Output: [JsonSchemaEditor](./components/json-schema-editor)
- Input Validation: [validateFlowValue](./validate/validate-flow-value)
- Output Variable Generation: [provideJsonSchemaOutputs](./effects/provide-json-schema-outputs)

**Parameter Display**
- Input Display: [DisplayInputsValues](./components/display-inputs-values)
- Output Display: [DisplayOutputs](./components/display-outputs)

### Implementing Code Nodes

- Code Editor: [CodeEditor](./components/code-editor)

### Implementing LLM Nodes

- Prompt Editor: [PromptEditor](./components/prompt-editor)
- Prompt Editor with Variables: [PromptEditorWithVariables](./components/prompt-editor-with-variables)

### Implementing Condition Branch Nodes

- Single-line Condition Branch Configuration: [ConditionRow](./components/condition-row)
- Variable Listening for Branch Linkage: [listenRefSchemaChange](./effects/listen-ref-schema-change), [listenRefValueChange](./effects/listen-ref-value-change)

### Implementing Database Nodes

- Single-line Database Query Condition Configuration: [DBConditionRow](./components/db-condition-row)
- SQL Editor: [SQLCodeEditor](./components/code-editor)
- SQL Editor with Variables: [SQLEditorWithVariables](./components/sql-editor-with-variables)


#### Implementing Loop Nodes

**Loop Input**
- Loop Input Array Variable Selector: [BatchVariableSelector](./components/batch-variable-selector)
- Item, Index Derivation: [provideBatchInput](./effects/provide-batch-input)

**Loop Output**
- Loop Output Array Variable Selector: [BatchOutputs](./components/batch-outputs)
- Output Variable Scope Chain Adjustment + Type Derivation: [batchOutputsPlugin](./form-plugins/batch-outputs-plugin)


### Implementing HTTP Nodes

- JSON Editor: [JsonCodeEditor](./components/code-editor)
- JSON Editor with Variables: [JsonEditorWithVariables](./components/json-editor-with-variables)

### Implementing Variable Assignment/Declaration Nodes

- Single-line Variable Assignment, Declaration: [AssignRow](./components/assign-row)
- Variable Assignment, Declaration Configuration List: [AssignRows](./components/assign-rows)
- Variable Declaration Type Automatic Derivation: [inferAssignPlugin](./form-plugins/infer-assign-plugin)
