Skip to main content
ClaudeWave
Skill78.6k estrellas del repoactualizado today

add-setting-env

This Claude Code skill provides a structured process for adding server-side environment variables that set default values for user settings in LobeHub, following a priority hierarchy where user customizations override server environment variables, which in turn override hardcoded defaults. Use this skill when configuring new application settings that administrators need to control at deployment time across multiple domains like AI image generation or other feature modules.

Instalar en Claude Code
Copiar
git clone --depth 1 https://github.com/lobehub/lobehub /tmp/add-setting-env && cp -r /tmp/add-setting-env/.agents/skills/add-setting-env ~/.claude/skills/add-setting-env
Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

SKILL.md

# Adding Environment Variable for User Settings

Add server-side environment variables to configure default values for user settings.

**Priority**: User Custom > Server Env Var > Hardcoded Default

## Steps

### 1. Define Environment Variable

Create `src/envs/<domain>.ts`:

```typescript
import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';

export const get<Domain>Config = () => {
  return createEnv({
    server: {
      YOUR_ENV_VAR: z.coerce.number().min(MIN).max(MAX).optional(),
    },
    runtimeEnv: {
      YOUR_ENV_VAR: process.env.YOUR_ENV_VAR,
    },
  });
};

export const <domain>Env = get<Domain>Config();
```

### 2. Update Type (if new domain)

Add to `packages/types/src/serverConfig.ts`:

```typescript
import { User<Domain>Config } from './user/settings';

export interface GlobalServerConfig {
  <domain>?: PartialDeep<User<Domain>Config>;
}
```

**Prefer reusing existing types** from `packages/types/src/user/settings`.

### 3. Assemble Server Config (if new domain)

In `apps/server/src/globalConfig/index.ts`:

```typescript
import { <domain>Env } from '@/envs/<domain>';

export const getServerGlobalConfig = async () => {
  const config: GlobalServerConfig = {
    <domain>: cleanObject({
      <settingName>: <domain>Env.YOUR_ENV_VAR,
    }),
  };
  return config;
};
```

### 4. Merge to User Store (if new domain)

In `src/store/user/slices/common/action.ts`:

```typescript
const serverSettings: PartialDeep<UserSettings> = {
  <domain>: serverConfig.<domain>,
};
```

### 5. Update .env.example

```bash
# <Description> (range/options, default: X)
# YOUR_ENV_VAR=<example>
```

### 6. Update Documentation

- `docs/self-hosting/environment-variables/basic.mdx` (EN)
- `docs/self-hosting/environment-variables/basic.zh-CN.mdx` (CN)

## Example: AI_IMAGE_DEFAULT_IMAGE_NUM

```typescript
// src/envs/image.ts
AI_IMAGE_DEFAULT_IMAGE_NUM: z.coerce.number().min(1).max(20).optional(),

// packages/types/src/serverConfig.ts
image?: PartialDeep<UserImageConfig>;

// apps/server/src/globalConfig/index.ts
image: cleanObject({ defaultImageNum: imageEnv.AI_IMAGE_DEFAULT_IMAGE_NUM }),

// src/store/user/slices/common/action.ts
image: serverConfig.image,

// .env.example
# AI_IMAGE_DEFAULT_IMAGE_NUM=4
```