openclaw-config-ui

OpenClaw 可视化配置表单组件 — 支持 13 家 AI 供应商选择、11 个消息渠道配置、双文件 JSON 导出，内置中英文双语。

Install

npm install openclaw-config-ui

# peer dependencies
npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled

Quick Start

import { ConfigForm } from "openclaw-config-ui";

function App() {
  return <ConfigForm locale="zh-CN" />;
}

Component manages its own state internally. Includes default values, import/export, and reset out of the box.

Controlled Mode

import { useState } from "react";
import { ConfigForm, DEFAULT_CONFIG } from "openclaw-config-ui";
import type { ConfigData, ConfigChangeEvent } from "openclaw-config-ui";

function SetupPage() {
  const [config, setConfig] = useState<ConfigData>(
    structuredClone(DEFAULT_CONFIG),
  );

  return (
    <ConfigForm
      value={config}
      onChange={({ config: next }: ConfigChangeEvent) => setConfig(next)}
      locale="zh-CN"
    />
  );
}

Split Export (Two JSON Files)

The form produces a single unified config internally. Use splitConfig() to separate it into the two files OpenClaw expects at runtime:

| File | Path | Content | |------|------|---------| | openclaw.json | ~/.openclaw/openclaw.json | Gateway, channels, model metadata (no secrets) | | auth-profiles.json | ~/.openclaw/agents/main/agent/auth-profiles.json | API keys ({ version: 1, profiles: { ... } }) |

import { splitConfig } from "openclaw-config-ui";

function handleSave(config: ConfigData) {
  const { openclawJson, authProfilesJson } = splitConfig(config);

  // openclawJson     → ~/.openclaw/openclaw.json
  // authProfilesJson → ~/.openclaw/agents/main/agent/auth-profiles.json

  fetch("/api/save", {
    method: "POST",
    body: JSON.stringify({ openclawJson, authProfilesJson }),
  });
}

The built-in Export button downloads both files automatically.

Custom Export Behavior

<ConfigForm
  value={config}
  onChange={handleChange}
  onExport={(config) => {
    const { openclawJson, authProfilesJson } = splitConfig(config);
    myApi.deploy(openclawJson, authProfilesJson);
  }}
/>

Override Translations

<ConfigForm
  locale="zh-CN"
  messages={{
    "toolbar.title": "My Assistant Setup",
    "toolbar.subtitle": "Custom Wizard",
  }}
/>

Custom Theme

import { createTheme } from "@mui/material/styles";

const myTheme = createTheme({
  palette: { mode: "dark", primary: { main: "#4fc3f7" } },
});

<ConfigForm theme={myTheme} />;

// Default: built-in dark theme (accent #ff5c5c, bg #12141a)

Hide Toolbar / Preview

<ConfigForm
  showToolbar={false}  // hide import/export/reset bar
  showPreview={false}  // hide JSON preview tabs
  readOnly             // disable all fields
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | ConfigData | — | Controlled config value | | defaultValue | ConfigData | DEFAULT_CONFIG | Initial value (uncontrolled mode) | | onChange | (e: ConfigChangeEvent) => void | — | Called on every field change | | locale | "en-US" \| "zh-CN" | "en-US" | UI language | | messages | Record<string, string> | — | Override translation keys | | theme | Theme | Built-in dark | MUI theme | | showPreview | boolean | true | Show JSON preview tabs | | showToolbar | boolean | true | Show top toolbar | | onExport | (config: ConfigData) => void | Download 2 files | Custom export handler | | onReset | () => void | Reset to defaults | Custom reset handler | | maxWidth | number | 720 | Max container width (px) | | readOnly | boolean | false | Disable all fields |

Supported Providers

Locale-aware ordering: EN puts international providers first; ZH puts domestic providers first.

| Provider | Models | Region | |----------|--------|--------| | Anthropic | Claude Opus 4.6, Claude Sonnet 4.5 | International | | OpenAI | o3, GPT-5.2 | International | | Google | Gemini 3 Pro, Gemini 3 Flash | International | | xAI | Grok 3, Grok 3 Mini | International | | Mistral | Mistral Large, Codestral | International | | DeepSeek | DeepSeek R1, DeepSeek V3 | China | | Qwen | Qwen Max, Qwen Plus | China | | Zhipu AI | GLM-4 Plus, GLM-4 FlashX | China | | Moonshot | Kimi K2.5 | China | | Doubao | Doubao Pro, Doubao 1.5 Pro | China | | MiniMax | MiniMax M2.1, MiniMax VL-01 | China | | Xiaomi | MiMo V2 Flash | China | | Baidu Qianfan | ERNIE 5.0 Thinking, ERNIE 4.5 Turbo | China |

Supported Channels

Locale-aware ordering: EN puts global platforms first; ZH puts Feishu first.

| Channel | Token Required | |---------|---------------| | Telegram | Bot Token | | Discord | Bot Token | | Slack | Bot Token + App Token | | WhatsApp | No (QR pairing) | | Microsoft Teams | App ID + App Secret | | Google Chat | Service Account Key | | Feishu (Lark) | App ID + App Secret | | Signal | No (signal-cli) | | iMessage | No (macOS only) | | Matrix | Access Token | | LINE | Channel Access Token + Secret |

Exports

// Components
export { ConfigForm, defaultTheme } from "openclaw-config-ui";

// i18n
export { I18nProvider, useT, enUS, zhCN } from "openclaw-config-ui";

// Data
export { DEFAULT_CONFIG } from "openclaw-config-ui";

// Utilities
export { splitConfig, toSplitJson } from "openclaw-config-ui";

// Types
export type {
  ConfigFormProps,
  ConfigData,
  ConfigChangeEvent,
  SplitResult,
  SectionId,
  LocaleId,
  DetailLevel,
} from "openclaw-config-ui";

License

MIT