@nocobase/plugin-ai 2.2.0-beta.5 → 2.2.0-beta.7

package/dist/ai/docs/nocobase/api/cli/source/download.md

@@ -33,6 +33,7 @@ nb source download [flags]
 | `--npm-registry` | string | Registry used for npm/Git downloads and dependency installation |
 | `--build` / `--no-build` | boolean | Whether to build after npm/Git dependency installation |
 | `--build-dts` | boolean | Whether to generate TypeScript declaration files during npm/Git build |
+| `--hook-script` | string | Hook module to run after npm scaffold or Git clone and before dependency installation; only applies to npm/Git source |
 
 ## Examples
 
@@ -47,8 +48,26 @@ nb source download --source git --version alpha --git-url=git@github.com:nocobas
 nb source download --source git --version fix/cli-v2
 nb source download -y --source npm --version alpha --build-dts
 nb source download -y --source npm --version alpha --npm-registry=https://registry.npmmirror.com
+nb source download -y --source git --version beta --hook-script ./hooks.mjs
 ```
 
+## Pre-install hook
+
+`--hook-script` only affects the current `nb source download` run. If you want the hook to be saved with the env and reused by `nb app upgrade` or local source restore, pass it through [`nb init --hook-script`](../init.md) instead.
+
+The hook file must default-export an object with `beforeDependencyInstall(context)`:
+
+```js
+export default {
+  beforeDependencyInstall: async ({ sourcePath, version, envConfig }) => {
+    // Runs after git clone / npm scaffold and before yarn install.
+  },
+};
+```
+
+When you run `nb source download --hook-script` directly, `beforeDependencyInstall` receives `context.phase` as `source-download` and `context.command` as `source:download`. This command does not run `beforeAppInstall` or `afterAppStart`; those hooks belong to app install, start, restart, and upgrade flows.
+
+
 ## Version Aliases
 
 With Git source, common dist-tags are resolved to branches: `latest` -> `main`, `beta` -> `next`, `alpha` -> `develop`.

package/dist/ai/docs/nocobase/data-sources/data-modeling/collection-fields/validation.md

@@ -78,6 +78,9 @@ After configuring field rules, the corresponding validation rules will be trigge
 
 ![20250819201027](https://nocobase-docs.oss-cn-beijing.aliyuncs.com/20250819201027.png)
 
+When the field is used in a form, field validation rules are also displayed in the field validation settings. These rules appear under **Server-side field validation rules** and are read-only there. If you need to change them, edit the field in Data source → Collection configuration.
+
+You can still add extra rules for the current form field under **Client-side validation rules**. These rules only apply to the current field component. The final validation result combines **Server-side field validation rules** and **Client-side validation rules**.
 
 Validation rules also apply to sub-table and sub-form components:
 
@@ -93,12 +96,12 @@ Note that in sub-form or sub-table scenarios, required validation for associatio
 ![20250819203016](https://nocobase-docs.oss-cn-beijing.aliyuncs.com/20250819203016.png)
 
 
-## Differences from Client-Side Field Validation
-Client-side and server-side field validation are applied in different scenarios, with significant differences in implementation and rule trigger timing, so they need to be managed separately.
+## Differences Between Server-Side Field Validation Rules and Client-Side Validation Rules
+Server-side field validation rules and client-side validation rules are configured in different places and have different scopes.
 
 ### Configuration Method Differences
-- **Client-side validation**: Configure rules in edit forms (as shown in the figure below)
-- **Server-side field validation**: Set field rules in Data Source → Collection Configuration
+- **Server-side field validation rules**: Set field rules in Data source → Collection configuration. These rules are the base rules of the field.
+- **Client-side validation rules**: Configure extra rules in a form field's settings. These rules only affect the current field component.
 
 ![20250819203836](https://nocobase-docs.oss-cn-beijing.aliyuncs.com/20250819203836.png)
 
@@ -109,7 +112,7 @@ Client-side and server-side field validation are applied in different scenarios,
 
 
 ### Validation Trigger Timing Differences
-- **Client-side validation**: Triggers validation in real-time as users fill in fields, displaying error messages immediately.
-- **Server-side field validation**: Validates on the server side before data entry after data submission, with error messages returned through API responses.
-- **Application scope**: Server-side field validation takes effect not only during form submission but also triggers in all scenarios involving data addition or modification, such as workflows and data imports.
-- **Error messages**: Client-side validation supports custom error messages, while server-side validation does not currently support custom error messages.
+- **Server-side field validation rules**: Trigger frontend validation when the field is used in a form, and also validate before data is written. They also apply to scenarios that create or update data, such as workflows and data imports.
+- **Client-side validation rules**: Trigger frontend validation in the current form field only.
+- **Rule display**: Server-side field validation rules are shown as inherited read-only rules. Client-side validation rules are shown separately and can be edited there.
+- **Error messages**: Client-side validation rules support custom error messages, while server-side field validation rules do not currently support custom error messages.

package/dist/ai/docs/nocobase/development/index.md

@@ -2,8 +2,8 @@
 pageType: home
 pageName: development
 title: "NocoBase Development Guide"
-description: "NocoBase development guide: plugin development, FlowEngine, RunJS, block/field/action extensions, data source extensions, workflow extensions, authentication extensions."
-keywords: "NocoBase,development guide,plugin development,FlowEngine,RunJS,NocoBase extensions"
+description: "NocoBase development guide: plugin development, shared components, FlowEngine, RunJS, block/field/action extensions, data source extensions, workflow extensions, authentication extensions."
+keywords: "NocoBase,development guide,plugin development,shared components,FlowEngine,RunJS,NocoBase extensions"
 features:
   - title: Core Development
     details: Master NocoBase's underlying extension mechanism and advanced development capabilities, including the plugin system, AI assistance, FlowEngine and RunJS environment, to build a solid development foundation.
@@ -24,6 +24,10 @@ features:
         details: JavaScript execution environment for JS blocks, JS fields, and JS actions, and similar scenarios.
         link: /runjs
         showOnHome: true
+      - title: Shared Components
+        details: Reuse the built-in form, filter, table, and icon components in NocoBase client v2 when building plugin pages.
+        link: /shared-components
+        showOnHome: true
   - title: Plugin Ecosystem
     details: Extend the capabilities of existing plugins through other plugins, building a hierarchical and modular plugin ecosystem to enhance system extensibility and collaboration.
     items:
@@ -46,4 +50,7 @@ features:
       - title: File Preview Extension
         details: Extend file preview capabilities to support online preview and rendering of more file formats.
         link: /file-manager/development
+      - title: Knowledge Base Extension
+        details: Connect external knowledge bases or custom retrieval services to extend RAG retrieval sources for AI employees.
+        link: /ai-employees/knowledge-base/dev/external-knowledge-base
 ---

package/dist/ai/docs/nocobase/interface-builder/fields/field-settings/validation-rules.md

@@ -30,10 +30,14 @@ Most fields support the configuration of validation rules. After a field is conf
 ![20251028230554](https://static-docs.nocobase.com/20251028230554.png)
 
 
-### Frontend Validation in Field Configuration
+### Client-Side Validation Rules in Field Settings
 
 Validation rules set in the field configuration will trigger frontend validation to ensure user input complies with the regulations.
 
+If the corresponding collection field already has validation rules, those rules are shown in the validation settings under **Server-side field validation rules**. They are inherited from the data source field configuration and are read-only here. If you need to change them, edit the collection field in Data source → Collection configuration.
+
+Rules added under **Client-side validation rules** only apply to the current field component. They do not change the collection field configuration. When both groups exist, NocoBase applies the inherited field rules and client-side validation rules together.
+
 
 ![20251028230105](https://static-docs.nocobase.com/20251028230105.png)
 
@@ -45,4 +49,4 @@ Validation rules set in the field configuration will trigger frontend validation
 **Text fields** also support custom regex validation to meet specific format requirements.
 
 
-![20251028230903](https://static-docs.nocobase.com/20251028230903.png)
+![20251028230903](https://static-docs.nocobase.com/20251028230903.png)

package/dist/ai/docs/nocobase/plugin-development/client/index.md

@@ -29,6 +29,7 @@ Specifically:
 1. **[Plugin](./plugin)**: The plugin entry class. Register routes, models, and other resources in lifecycle methods like `load()`.
 2. **[Router](./router)**: Register page routes via `router.add()` and plugin settings pages via `pluginSettingsManager`.
 3. **[Component](./component/index.md)**: Routes mount React components. Just use React + Antd by default -- no different from regular frontend development.
+| Find reusable form, filter, and table components       | [Shared Components](/shared-components/)                 |
 4. **[Context](./ctx/index.md)**: In plugins, access context via `this.context`; in components, use `useFlowContext()` to get the context. This gives you access to NocoBase capabilities -- making requests (`ctx.api`), internationalization (`ctx.t`), logging (`ctx.logger`), etc.
 5. **[FlowEngine](./flow-engine/index.md)**: If your components need to appear in the "Add Block / Field / Action" menus and support visual configuration by users, you need to wrap them with FlowModel.
 

package/dist/ai/docs/nocobase/plugins/@nocobase/plugin-multi-portal/index.md

@@ -0,0 +1,16 @@
+---
+title: "Multi-portal"
+keywords: "Multi-portal,Plugin,NocoBase"
+displayName: "Multi-portal"
+packageName: '@nocobase/plugin-multi-portal'
+supportedVersions:
+  - 2.x
+description: |
+  Provides multi-portal management with separate layouts and menus for different entry points.
+isFree: false
+builtIn: false
+defaultEnabled: false
+editionLevel: 2
+---
+
+# Multi-portal

package/dist/ai/docs/nocobase/plugins/@nocobase/plugin-ui-layout/index.md

@@ -0,0 +1,14 @@
+---
+title: "UI layout"
+keywords: "UI layout,Plugin,NocoBase"
+displayName: "UI layout"
+packageName: '@nocobase/plugin-ui-layout'
+description: |
+  Provides desktop layout, mobile layout, and route management pages.
+isFree: true
+builtIn: true
+defaultEnabled: false
+editionLevel: 0
+---
+
+# UI layout

package/dist/ai/docs/nocobase/shared-components/create-form-registry.md

@@ -0,0 +1,38 @@
+---
+title: "createFormRegistry"
+description: "createFormRegistry: Create an internal registry for plugin extension items."
+keywords: "createFormRegistry,NocoBase,client-v2"
+---
+
+# createFormRegistry
+
+`createFormRegistry` is used to create an internal registry for plugin extension items.
+
+## Basic Usage
+
+```ts
+import { createFormRegistry, type FormRegistryEntry } from '@nocobase/client-v2';
+
+interface StorageType extends FormRegistryEntry {
+  title: string;
+  Component: React.ComponentType;
+}
+
+const storageTypes = createFormRegistry<StorageType>('file-manager/storage-types');
+
+storageTypes.register({ name: 'local', title: 'Local', Component: LocalStorageForm });
+storageTypes.register({ name: 's3', title: 'Amazon S3', Component: S3StorageForm });
+
+const s3 = storageTypes.get('s3');
+const all = storageTypes.list();
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `register(entry)` | `-` | Register an entry |
+| `unregister(name)` | `-` | Remove an entry |
+| `get(name)` | `-` | Get an entry by name |
+| `has(name)` | `-` | Check whether an entry exists |
+| `list()` | `-` | Return all entries |

package/dist/ai/docs/nocobase/shared-components/filter/collection-filter-panel.md

@@ -0,0 +1,44 @@
+---
+title: "CollectionFilterPanel"
+description: "CollectionFilterPanel: Embed a Collection filter panel in a page."
+keywords: "CollectionFilterPanel,NocoBase,client-v2"
+---
+
+# CollectionFilterPanel
+
+`CollectionFilterPanel` is used to embed a Collection filter panel in a page.
+
+## Basic Usage
+
+```tsx
+import { CollectionFilterPanel, type CollectionFilterPanelRef } from '@nocobase/client-v2';
+
+const ref = useRef<CollectionFilterPanelRef>(null);
+
+<CollectionFilterPanel ref={ref} collection={collection} t={t} />;
+
+const filter = ref.current?.getFilter();
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `collection` | `Collection | undefined` | Collection used as the field source |
+| `initialValue` | `Record<string, unknown>` | Initial filter value |
+| `onChange` | `(filter) => void` | Change callback |
+| `t` | `(key, options?) => string` | Translation function |
+| `filterableFieldNames` | `string[]` | Field allowlist |
+| `nonfilterableFieldNames` | `string[]` | Field blocklist |
+| `noIgnore` | `boolean` | Skip allowlist restrictions |
+
+## Methods
+
+| Method | Description |
+| --- | --- |
+| `getFilter()` | Get the compiled filter |
+| `reset()` | Clear all conditions |
+
+## Related Links
+
+- [CollectionFilter](./)

package/dist/ai/docs/nocobase/shared-components/filter/index.md

@@ -0,0 +1,44 @@
+---
+title: "CollectionFilter"
+description: "CollectionFilter: Filter a Collection with multiple conditions."
+keywords: "CollectionFilter,NocoBase,client-v2"
+---
+
+# CollectionFilter
+
+`CollectionFilter` is used to filter a Collection with multiple conditions.
+
+## Basic Usage
+
+```tsx
+import { CollectionFilter } from '@nocobase/client-v2';
+
+<CollectionFilter
+  collection={collection}
+  t={t}
+  onChange={(filter) => {
+    listRequest.run({ filter });
+  }}
+/>;
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `collection` | `Collection | undefined` | Collection used as the field source |
+| `initialValue` | `Record<string, unknown>` | Initial filter value |
+| `onChange` | `(filter) => void` | Change callback |
+| `t` | `(key, options?) => string` | Translation function |
+| `filterableFieldNames` | `string[]` | Field allowlist |
+| `nonfilterableFieldNames` | `string[]` | Field blocklist |
+| `noIgnore` | `boolean` | Skip allowlist restrictions |
+| `buttonText` | `React.ReactNode` | Custom button text |
+| `showCount` | `boolean` | Whether to show the number of conditions |
+| `popoverProps` | `PopoverProps` | Props passed to Antd Popover |
+| `buttonProps` | `ButtonProps` | Props passed to Antd Button |
+| `popoverMinWidth` | `number` | Minimum width of the Popover content |
+
+## Related Links
+
+- [CollectionFilterPanel](./collection-filter-panel)

package/dist/ai/docs/nocobase/shared-components/form/code-scanner.md

@@ -0,0 +1,34 @@
+---
+title: "CodeScanner"
+description: "CodeScanner: Control the low-level full-screen scanner."
+keywords: "CodeScanner,NocoBase,client-v2"
+---
+
+# CodeScanner
+
+`CodeScanner` is used to control the low-level full-screen scanner.
+
+## Basic Usage
+
+```tsx
+import { CodeScanner } from '@nocobase/client-v2';
+
+<CodeScanner
+  visible={visible}
+  onClose={() => setVisible(false)}
+  onScanSuccess={(text) => setValue(text)}
+/>;
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `visible` | `boolean` | Whether the scanner is visible |
+| `formatsToSupport` | `Html5QrcodeSupportedFormats[]` | Supported QR code or barcode formats |
+| `onClose` | `() => void` | Called when the scanner closes |
+| `onScanSuccess` | `(result: string) => void` | Called after a successful scan |
+
+## Related Links
+
+- [ScanInput](./scan-input)

package/dist/ai/docs/nocobase/shared-components/form/dialog-form-layout.md

@@ -0,0 +1,45 @@
+---
+title: "DialogFormLayout"
+description: "DialogFormLayout: Put a standard form in a dialog."
+keywords: "DialogFormLayout,NocoBase,client-v2"
+---
+
+# DialogFormLayout
+
+`DialogFormLayout` is used to put a standard form in a dialog.
+
+## Basic Usage
+
+```tsx
+import { DialogFormLayout } from '@nocobase/client-v2';
+
+ctx.viewer.dialog({
+  closable: true,
+  content: () => (
+    <DialogFormLayout title={t('Bind verifier')} onSubmit={handleSubmit}>
+      <Form form={form} layout="vertical">
+        <Form.Item name="code" label={t('Code')}>
+          <Input />
+        </Form.Item>
+      </Form>
+    </DialogFormLayout>
+  ),
+});
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `React.ReactNode` | Title content |
+| `children` | `React.ReactNode` | Content rendered inside the component |
+| `onCancel` | `() => void | Promise<void>` | Called before Cancel closes the view |
+| `onSubmit` | `() => void | Promise<void>` | Called when Submit is clicked |
+| `submitting` | `boolean` | Loading state of the submit button |
+| `submitText` | `React.ReactNode` | Submit button text |
+| `cancelText` | `React.ReactNode` | Cancel button text |
+| `footer` | `React.ReactNode` | Replace the default footer |
+
+## Related Links
+
+- [DrawerFormLayout](./drawer-form-layout)

package/dist/ai/docs/nocobase/shared-components/form/drawer-form-layout.md

@@ -0,0 +1,45 @@
+---
+title: "DrawerFormLayout"
+description: "DrawerFormLayout: Put a standard form in a drawer."
+keywords: "DrawerFormLayout,NocoBase,client-v2"
+---
+
+# DrawerFormLayout
+
+`DrawerFormLayout` is used to put a standard form in a drawer.
+
+## Basic Usage
+
+```tsx
+import { DrawerFormLayout } from '@nocobase/client-v2';
+
+ctx.viewer.drawer({
+  width: '50%',
+  closable: true,
+  content: () => (
+    <DrawerFormLayout title={t('Add provider')} onSubmit={handleSubmit}>
+      <Form form={form} layout="vertical">
+        <Form.Item name="name" label={t('Name')} rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+      </Form>
+    </DrawerFormLayout>
+  ),
+});
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `React.ReactNode` | Title content |
+| `children` | `React.ReactNode` | Content rendered inside the component |
+| `onSubmit` | `() => void | Promise<void>` | Called when Submit is clicked |
+| `submitting` | `boolean` | Loading state of the submit button |
+| `submitText` | `React.ReactNode` | Submit button text |
+| `cancelText` | `React.ReactNode` | Cancel button text |
+| `footer` | `React.ReactNode` | Replace the default footer |
+
+## Related Links
+
+- [DialogFormLayout](./dialog-form-layout)

package/dist/ai/docs/nocobase/shared-components/form/env-variable-input.md

@@ -0,0 +1,30 @@
+---
+title: "EnvVariableInput"
+description: "EnvVariableInput: Allow only `$env` is used to environment variables."
+keywords: "EnvVariableInput,NocoBase,client-v2"
+---
+
+# EnvVariableInput
+
+`EnvVariableInput` is used to allow only `$env` environment variables.
+
+## Basic Usage
+
+```tsx file="../_demos/env-variable-input.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | Current value |
+| `onChange` | `(value: string) => void` | Change callback |
+| `addonBefore` | `React.ReactNode` | Content before the input |
+| `disabled` | `boolean` | Whether disabled |
+| `password` | `boolean` | Mask plain non-variable values |
+| `placeholder` | `string` | Placeholder text |
+
+## Related Links
+
+- [VariableInput](./variable-input)
+- [TypedVariableInput](./typed-variable-input)

package/dist/ai/docs/nocobase/shared-components/form/file-size-input.md

@@ -0,0 +1,24 @@
+---
+title: "FileSizeInput"
+description: "FileSizeInput: Enter a file size and store it as bytes."
+keywords: "FileSizeInput,NocoBase,client-v2"
+---
+
+# FileSizeInput
+
+`FileSizeInput` is used to enter a file size and store it as bytes.
+
+## Basic Usage
+
+```tsx file="../_demos/file-size-input.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `number` | Current value |
+| `onChange` | `(value: number | null) => void` | Change callback |
+| `disabled` | `boolean` | Whether disabled |
+| `min` | `number` | Minimum value |
+| `max` | `number` | Maximum value |

package/dist/ai/docs/nocobase/shared-components/form/json-text-area.md

@@ -0,0 +1,28 @@
+---
+title: "JsonTextArea"
+description: "JsonTextArea: Edit JSON / JSON5 configuration."
+keywords: "JsonTextArea,NocoBase,client-v2"
+---
+
+# JsonTextArea
+
+`JsonTextArea` is used to edit JSON / JSON5 configuration.
+
+## Basic Usage
+
+```tsx file="../_demos/json-text-area.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `unknown` | Current value |
+| `onChange` | `(value: unknown) => void` | Change callback |
+| `space` | `number` | Stringify indentation |
+| `json5` | `boolean` | Whether to parse with JSON5 |
+| `showError` | `boolean` | Whether to show parse errors |
+
+## Related Links
+
+- [VariableJsonTextArea](./variable-json-text-area)

package/dist/ai/docs/nocobase/shared-components/form/password-input.md

@@ -0,0 +1,23 @@
+---
+title: "PasswordInput"
+description: "PasswordInput: Enter a password with a strength indicator."
+keywords: "PasswordInput,NocoBase,client-v2"
+---
+
+# PasswordInput
+
+`PasswordInput` is used to enter a password with a strength indicator.
+
+## Basic Usage
+
+```tsx file="../_demos/password-input.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | Current value |
+| `onChange` | `(event) => void` | Change callback |
+| `disabled` | `boolean` | Whether disabled |
+| `placeholder` | `string` | Placeholder text |

package/dist/ai/docs/nocobase/shared-components/form/remote-select.md

@@ -0,0 +1,34 @@
+---
+title: "RemoteSelect"
+description: "RemoteSelect: Load Select options asynchronously from an API."
+keywords: "RemoteSelect,NocoBase,client-v2"
+---
+
+# RemoteSelect
+
+`RemoteSelect` is used to load Select options asynchronously from an API.
+
+## Basic Usage
+
+```tsx
+import { RemoteSelect } from '@nocobase/client-v2';
+
+<RemoteSelect<{ name: string; title: string }>
+  request={async () => {
+    const { data } = await ctx.api.resource('providers').list();
+    return data.data;
+  }}
+  fieldNames={{ label: 'title', value: 'name' }}
+/>;
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `request` | `() => Promise<T[]>` | Async request for loading options |
+| `fieldNames` | `{ label; value }` | Map option label and value fields |
+| `options` | `DefaultOptionType[]` | Static options |
+| `mode` | `SelectProps['mode']` | Select mode |
+| `showSearch` | `boolean` | Whether search is enabled |
+| `filterOption` | `boolean | function` | Client-side option filtering |

package/dist/ai/docs/nocobase/shared-components/form/scan-input.md

@@ -0,0 +1,27 @@
+---
+title: "ScanInput"
+description: "ScanInput: Add scanning support to an input."
+keywords: "ScanInput,NocoBase,client-v2"
+---
+
+# ScanInput
+
+`ScanInput` is used to add scanning support to an input.
+
+## Basic Usage
+
+```tsx file="../_demos/scan-input.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `disableManualInput` | `boolean` | Make the input read-only |
+| `enableScan` | `boolean` | Reserved prop; the scan button is always rendered |
+| `formatsToSupport` | `Html5QrcodeSupportedFormats[]` | Supported QR code or barcode formats |
+| `onChange` | `(value: string | ChangeEvent<HTMLInputElement>) => void` | Change callback |
+
+## Related Links
+
+- [CodeScanner](./code-scanner)

package/dist/ai/docs/nocobase/shared-components/form/typed-variable-input.md

@@ -0,0 +1,30 @@
+---
+title: "TypedVariableInput"
+description: "TypedVariableInput: Allow a field to accept both constants and variables."
+keywords: "TypedVariableInput,NocoBase,client-v2"
+---
+
+# TypedVariableInput
+
+`TypedVariableInput` is used to allow a field to accept both constants and variables.
+
+## Basic Usage
+
+```tsx file="../_demos/typed-variable-input.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `unknown` | Current value |
+| `onChange` | `(next: unknown) => void` | Change callback |
+| `types` | `TypedConstantSpec[]` | Allowed constant types |
+| `namespaces` | `string[]` | Allowed top-level variable namespaces |
+| `extraNodes` | `MetaTreeNode[]` | Additional local variable nodes |
+| `nullable` | `boolean` | Whether null is allowed |
+| `delimiters` | `[string, string]` | Variable delimiters |
+| `disabled` | `boolean` | Whether disabled |
+| `placeholder` | `string` | Placeholder text |
+| `style` | `React.CSSProperties` | Custom style |
+| `className` | `string` | Custom class name |

package/dist/ai/docs/nocobase/shared-components/form/variable-input.md

@@ -0,0 +1,35 @@
+---
+title: "VariableInput"
+description: "VariableInput: Let a single-line field accept variables such as `{{ $env.X }}` is used to and `{{ $user.name }}`."
+keywords: "VariableInput,NocoBase,client-v2"
+---
+
+# VariableInput
+
+`VariableInput` is used to let a single-line field accept variables such as `{{ $env.X }}` and `{{ $user.name }}`.
+
+## Basic Usage
+
+```tsx file="../_demos/variable-input.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | Current value |
+| `onChange` | `(value: string) => void` | Change callback |
+| `disabled` | `boolean` | Whether disabled |
+| `placeholder` | `string` | Placeholder text |
+| `addonBefore` | `React.ReactNode` | Content before the input |
+| `namespaces` | `string[]` | Allowed top-level variable namespaces |
+| `extraNodes` | `MetaTreeNode[]` | Additional local variable nodes |
+| `delimiters` | `[string, string]` | Variable delimiters |
+| `className` | `string` | Custom class name |
+| `style` | `React.CSSProperties` | Custom style |
+
+## Related Links
+
+- [VariableTextArea](./variable-text-area)
+- [EnvVariableInput](./env-variable-input)
+- [TypedVariableInput](./typed-variable-input)