Agents

EnvironmentVariables

Composable environment variable editor with .env upload, bulk paste, reveal controls, and submit helpers.

Composition

The preferred shape for composing the installed agent from its exported parts.

Parts

Exported compound parts from the installed source.

EnvironmentVariablesRoot

├── EnvironmentVariablesHeader

├── EnvironmentVariablesToolbar

├── EnvironmentVariablesBulkInput

├── EnvironmentVariablesUploadButton

├── EnvironmentVariablesRows

├── EnvironmentVariablesRow

├── EnvironmentVariablesAddButton

├── EnvironmentVariablesResetButton

├── EnvironmentVariablesSubmitButton

├── EnvironmentVariablesActions

├── EnvironmentVariablesMessage

├── EnvironmentVariablesDuplicateKeysError

├── EnvironmentVariablesUploadError

├── EnvironmentVariablesReadOnlyList

├── EnvironmentVariablesReadOnlyItem

└── EnvironmentVariables

This agent installs from the environment-variables registry. Install the bundle with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/environment-variables.json

See registry manifest

Usage

import { EnvironmentVariables } from "@/components/refined-ui/environment-variables";

import type { EnvironmentVariableRow } from "@/components/refined-ui/hooks/use-environment-variables";

type MastraProjectEnv = Record<string, string>;

function rowsFromEnv(env: MastraProjectEnv): EnvironmentVariableRow[] {

const rows = Object.entries(env).map(([key, value]) => ({ key, value }));

return rows.length > 0 ? rows : [{ key: "", value: "" }];

}

export function Example({ env, saveEnv }: { env: MastraProjectEnv; saveEnv: (variables: MastraProjectEnv) => void | Promise<void> }) {

return <EnvironmentVariables initialRows={rowsFromEnv(env)} onSubmit={({ variables }) => saveEnv(variables)} />;

}

Installed dependencies

Installed with this agent because the visible component depends on them; they are support files, not separate product surfaces.

Behavior hooksrc/registry/hooks/use-environment-variables.tsHook

.env parsersrc/registry/lib/env-file.tsSupport

Raw code

Primary installed agent source

Component

src/registry/sources/refined/environment-variables.tsx

Primitives

This agent composes these library primitives, installed under components/refined-ui/ui/*.

Buttoncomponents/refined-ui/ui/button.tsxLibrary slot Button groupcomponents/refined-ui/ui/button-group.tsxLibrary slot Inputcomponents/refined-ui/ui/input.tsxLibrary slot Input groupcomponents/refined-ui/ui/input-group.tsxLibrary slot

Refined UI