feat(chat): write API keys to OpenClaw and embed Control UI for chat

Part 1: API Key Integration
- Create electron/utils/openclaw-auth.ts to write keys to
  ~/.openclaw/agents/main/agent/auth-profiles.json
- Update provider:save and provider:setApiKey IPC handlers to
  persist keys to OpenClaw auth-profiles alongside ClawX storage
- Save API key to OpenClaw on successful validation in Setup wizard
- Pass provider API keys as environment variables when starting
  the Gateway process (ANTHROPIC_API_KEY, OPENROUTER_API_KEY, etc.)

Part 2: Embed OpenClaw Control UI for Chat
- Replace custom Chat UI with <webview> embedding the Gateway's
  built-in Control UI at http://127.0.0.1:{port}/?token={token}
- Add gateway:getControlUiUrl IPC handler to provide tokenized URL
- Enable webviewTag in Electron BrowserWindow preferences
- Override X-Frame-Options/CSP headers to allow webview embedding
- Suppress noisy control-ui token_mismatch stderr messages
- Add loading/error states for the embedded webview

This fixes the "No API key found for provider" error and replaces
the buggy custom chat implementation with OpenClaw's battle-tested
Control UI.
This commit is contained in:
Haze
2026-02-06 03:12:17 +08:00
Unverified
parent b01952fba7
commit 284861a0f5
7 changed files with 414 additions and 380 deletions

View File

@@ -15,6 +15,8 @@ import {
isOpenClawInstalled
} from '../utils/paths';
import { getSetting } from '../utils/store';
import { getApiKey } from '../utils/secure-storage';
import { getProviderEnvVar } from '../utils/openclaw-auth';
import { GatewayEventType, JsonRpcNotification, isNotification, isResponse } from './protocol';
/**
@@ -370,6 +372,24 @@ export class GatewayManager extends EventEmitter {
console.log(`Spawning Gateway: ${command} ${args.join(' ')}`);
console.log(`Working directory: ${openclawDir}`);
// Load provider API keys from secure storage to pass as environment variables
const providerEnv: Record<string, string> = {};
const providerTypes = ['anthropic', 'openai', 'google', 'openrouter'];
for (const providerType of providerTypes) {
try {
const key = await getApiKey(providerType);
if (key) {
const envVar = getProviderEnvVar(providerType);
if (envVar) {
providerEnv[envVar] = key;
console.log(`Loaded API key for ${providerType} -> ${envVar}`);
}
}
} catch (err) {
console.warn(`Failed to load API key for ${providerType}:`, err);
}
}
return new Promise((resolve, reject) => {
this.process = spawn(command, args, {
cwd: openclawDir,
@@ -378,6 +398,8 @@ export class GatewayManager extends EventEmitter {
shell: process.platform === 'win32', // Use shell on Windows for pnpm
env: {
...process.env,
// Provider API keys
...providerEnv,
// Skip channel auto-connect during startup for faster boot
OPENCLAW_SKIP_CHANNELS: '1',
CLAWDBOT_SKIP_CHANNELS: '1',
@@ -407,9 +429,18 @@ export class GatewayManager extends EventEmitter {
console.log('Gateway:', data.toString());
});
// Log stderr
// Log stderr (filter out noisy control-ui token_mismatch messages)
this.process.stderr?.on('data', (data) => {
console.error('Gateway error:', data.toString());
const msg = data.toString();
// Suppress the constant Control UI token_mismatch noise
// These come from the browser-based Control UI auto-polling with no token
if (msg.includes('openclaw-control-ui') && msg.includes('token_mismatch')) {
return;
}
if (msg.includes('closed before connect') && msg.includes('token mismatch')) {
return;
}
console.error('Gateway error:', msg);
});
// Store PID
@@ -516,7 +547,7 @@ export class GatewayManager extends EventEmitter {
}, 10000);
this.pendingRequests.set(connectId, {
resolve: (result) => {
resolve: (_result) => {
clearTimeout(connectTimeout);
handshakeComplete = true;
console.log('WebSocket handshake complete, gateway connected');