#Material Management CLI

Flowgram provides a dedicated CLI command-line tool to help you manage official materials in your project.

#Installation

You can run it directly with npx:

npx @flowgram.ai/cli@latest [command]

#Sync Materials to Project

Use the materials command to add the source code of official materials to your project for customization:

# Interactive material selection
npx @flowgram.ai/cli@latest materials

# Directly specify material
npx @flowgram.ai/cli@latest materials components/json-schema-editor

# Specify multiple materials (comma-separated)
npx @flowgram.ai/cli@latest materials components/variable-selector,effect/provideJsonSchemaOutputs

# Select multiple materials (interactive multi-select)
npx @flowgram.ai/cli@latest materials --select-multiple

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

🚀 Welcome to @flowgram.ai form-materials CLI!
📁 Project: /path/to/your/project
🎯 Flowgram Version: 1.0.0
  - Target material root: /path/to/your/project/src/form-materials

🚀 The following materials will be added to your project
📦 components/json-schema-editor
📦 components/variable-selector
📦 effect/provideJsonSchemaOutputs

✅ These npm dependencies is added to your package.json
- @semi-design/icons
- lodash-es
- classnames

➡️ Please run npm install to install dependencies

#Advanced Options

The materials command supports the following options:

#Find Used Materials

Use the find-used-materials command to analyze project code and find all used official materials:

npx @flowgram.ai/cli@latest find-used-materials

Output example:

🚀 Welcome to @flowgram.ai form-materials CLI!
📁 Project: /path/to/your/project
🎯 Flowgram Version: 1.0.0

👀 The exports of components/json-schema-editor is JsonSchemaEditor,JsonSchemaEditorProps
👀 The exports of components/variable-selector is VariableSelector,VariableSelectorProps

👀 Searching src/components/MyForm.tsx
🔍 import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
import components/json-schema-editor by JsonSchemaEditor

👀 Searching src/pages/Settings.tsx
🔍 import { VariableSelector } from '@flowgram.ai/form-materials'
import components/variable-selector by VariableSelector

📦 All used materials:
components/json-schema-editor,components/variable-selector

This command will:

• Scan all TypeScript files in the project
• Analyze import statements from @flowgram.ai/form-materials
• Identify specific materials being used
• Output detailed usage location information

#Case Run Down

#Sync all used official materials in the project to the src/custom-materials directory

1. Use the find-used-materials command to see the official materials used in the project.

npx @flowgram.ai/cli@latest find-used-materials

After the command runs, it will output a list of official materials used in the project.

📦 All used materials:
components/json-schema-editor,components/variable-selector

2. Use the materials command to add the source code of these materials to the project's src/custom-materials directory.

npx @flowgram.ai/cli@latest materials components/json-schema-editor,components/variable-selector \
  --target-material-root-dir src/custom-materials \
  --refresh-project-imports

• The --refresh-project-imports option will refresh the import paths for copied materials in the project, ensuring the latest customized versions are used.
• The --target-material-root-dir src/custom-materials option specifies the target directory for material copying as src/custom-materials.

#FAQ

#Q: Can't find the newly added dependencies after CLI adds them?

A: Please check if you have run npm install to install the newly added dependencies.