Building a Dynamic ConfigViewer Component for XGen

Why Configuration Management Matters

An AI platform requires a wide range of settings — OpenAI API keys, PostgreSQL connection details, Qdrant configuration, and more. XGen's configuration system manages all of these dynamically.

Configuration Architecture

graph TD
    A[Settings 컴포넌트] --> B[ConfigViewer]
    B --> C[OpenAI Config]
    B --> D[Database Config]
    B --> E[Workflow Config]
    B --> F[VectorDB Config]

    B --> G{편집 모드}
    G -->|인라인 편집| H[값 수정]
    H --> I[API 저장]
    I --> J[실시간 반영]

The ConfigViewer Component

The 7/11 commit introduced a general-purpose component for viewing and editing configuration values:

interface ConfigItem {
  key: string;
  value: string | number | boolean;
  type: 'string' | 'number' | 'boolean' | 'select';
  options?: string[];
  status: 'configured' | 'default';
}

function ConfigViewer({ items, onSave }: Props) {
  const [editingKey, setEditingKey] = useState<string | null>(null);

  return (
    <div className={styles.configViewer}>
      {items.map(item => (
        <div className={styles.configItem} key={item.key}>
          <span className={styles.typeBadge}>{item.type}</span>
          <span className={styles.key}>{item.key}</span>
          {editingKey === item.key ? (
            <InlineEditor
              value={item.value}
              onSave={(newValue) => {
                onSave(item.key, newValue);
                setEditingKey(null);
              }}
            />
          ) : (
            <span
              className={styles.value}
              onDoubleClick={() => setEditingKey(item.key)}
            >
              {item.value}
            </span>
          )}
          <span className={styles.status}>
            {item.status === 'configured' ? '설정됨' : '기본값'}
          </span>
        </div>
      ))}
    </div>
  );
}

Removing Legacy Configuration Components

On 7/12, all per-service configuration components — AWS, Azure, Google, MongoDB, and others — were removed and consolidated into ConfigViewer. This resulted in a significant reduction in overall code size.

The devLog Utility

On 7/11, a refactor replaced all console.log calls with devLog:

// No log output in production
const devLog = (...args: any[]) => {
  if (process.env.NODE_ENV !== 'production') {
    console.log(...args);
  }
};

Roughly 15 commits related to the configuration system were concentrated in the 7/10–7/12 window.