awel 0.1.1 → 0.1.2

package/README.md

@@ -12,9 +12,17 @@ AI-powered development overlay for Next.js. Awel runs a proxy in front of your d
 # Skip if you're already in a Next.js app
 npx create-next-app@latest my-app && cd my-app
 
+# Set up at least one AI provider (pick one):
+export ANTHROPIC_API_KEY="sk-ant-..."   # Anthropic API
+export OPENAI_API_KEY="sk-..."          # OpenAI
+export GOOGLE_GENERATIVE_AI_API_KEY="..." # Google AI
+# Or install the Claude CLI: https://docs.anthropic.com/en/docs/claude-code
+
 npx awel dev
 ```
 
+Awel needs at least one configured provider to function. See [Supported Models](#supported-models) for the full list.
+
 This starts Awel on port 3001 and proxies your Next.js dev server on port 3000. Open `http://localhost:3001` to see your app with the Awel overlay.
 
 ### Options

package/README.zh-CN.md

@@ -12,9 +12,17 @@
 # 如果你已经在一个 Next.js 项目中，可以跳过这一步
 npx create-next-app@latest my-app && cd my-app
 
+# 至少配置一个 AI 服务商（任选其一）：
+export ANTHROPIC_API_KEY="sk-ant-..."   # Anthropic API
+export OPENAI_API_KEY="sk-..."          # OpenAI
+export GOOGLE_GENERATIVE_AI_API_KEY="..." # Google AI
+# 或安装 Claude CLI：https://docs.anthropic.com/en/docs/claude-code
+
 npx awel dev
 ```
 
+Awel 需要至少一个已配置的服务商才能运行。完整列表见[支持的模型](#支持的模型)。
+
 Awel 会在端口 3001 启动，并代理运行在端口 3000 的 Next.js 开发服务器。打开 `http://localhost:3001` 即可看到带有 Awel 浮层的应用。
 
 ### 选项

package/dist/cli/awel-config.d.ts

@@ -0,0 +1,6 @@
+export interface AwelConfig {
+    babelPlugin?: boolean;
+    onboarded?: boolean;
+}
+export declare function readAwelConfig(projectCwd: string): AwelConfig;
+export declare function writeAwelConfig(projectCwd: string, config: AwelConfig): void;

package/dist/cli/awel-config.js

@@ -0,0 +1,20 @@
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
+import { join } from 'path';
+export function readAwelConfig(projectCwd) {
+    const configPath = join(projectCwd, '.awel', 'config.json');
+    if (!existsSync(configPath))
+        return {};
+    try {
+        return JSON.parse(readFileSync(configPath, 'utf-8'));
+    }
+    catch {
+        return {};
+    }
+}
+export function writeAwelConfig(projectCwd, config) {
+    const dir = join(projectCwd, '.awel');
+    if (!existsSync(dir)) {
+        mkdirSync(dir, { recursive: true });
+    }
+    writeFileSync(join(dir, 'config.json'), JSON.stringify(config, null, 2) + '\n', 'utf-8');
+}

package/dist/cli/babel-setup.js

@@ -1,6 +1,7 @@
-import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
+import { existsSync, readFileSync, writeFileSync } from 'fs';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
+import { readAwelConfig, writeAwelConfig } from './awel-config.js';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const BABEL_CONFIG_FILES = [
     'babel.config.js',
@@ -37,24 +38,6 @@ function findExistingBabelConfig(projectCwd) {
         return 'package.json';
     return null;
 }
-function readAwelConfig(projectCwd) {
-    const configPath = join(projectCwd, '.awel', 'config.json');
-    if (!existsSync(configPath))
-        return {};
-    try {
-        return JSON.parse(readFileSync(configPath, 'utf-8'));
-    }
-    catch {
-        return {};
-    }
-}
-function writeAwelConfig(projectCwd, config) {
-    const dir = join(projectCwd, '.awel');
-    if (!existsSync(dir)) {
-        mkdirSync(dir, { recursive: true });
-    }
-    writeFileSync(join(dir, 'config.json'), JSON.stringify(config, null, 2) + '\n', 'utf-8');
-}
 // ANSI 256-color helpers — darker shades that stay visible on light backgrounds
 const bold = (s) => `\x1b[1m${s}\x1b[22m`;
 const dim = (s) => `\x1b[2m${s}\x1b[22m`;

package/dist/cli/index.js

@@ -3,6 +3,7 @@ import { startServer } from './server.js';
 import { AWEL_PORT, USER_APP_PORT } from './config.js';
 import { setVerbose } from './verbose.js';
 import { ensureBabelPlugin } from './babel-setup.js';
+import { ensureProvider } from './onboarding.js';
 import { awel } from './logger.js';
 import { spawnDevServer } from './subprocess.js';
 program
@@ -18,6 +19,7 @@ program
     const targetPort = parseInt(options.port, 10);
     if (options.verbose)
         setVerbose(true);
+    await ensureProvider(process.cwd());
     await ensureBabelPlugin(process.cwd());
     awel.log('🌟 Starting Awel...');
     awel.log(`   Target app port: ${targetPort}`);

package/dist/cli/onboarding.d.ts

@@ -0,0 +1 @@
+export declare function ensureProvider(projectCwd: string): Promise<void>;

package/dist/cli/onboarding.js

@@ -0,0 +1,58 @@
+import { readAwelConfig } from './awel-config.js';
+import { getAvailableProviders, PROVIDER_ENV_KEYS, PROVIDER_LABELS } from './providers/registry.js';
+import { awel } from './logger.js';
+function printSetupInstructions() {
+    awel.log('No LLM providers are configured.');
+    awel.log('Awel needs at least one AI provider to function.');
+    awel.log('');
+    awel.log('Set up a provider by exporting its API key:');
+    awel.log('');
+    // List all providers with their setup commands
+    for (const [provider, envKey] of Object.entries(PROVIDER_ENV_KEYS)) {
+        const label = PROVIDER_LABELS[provider] ?? provider;
+        awel.log(`  ${label}`);
+        awel.log(`  export ${envKey}="..."`);
+        awel.log('');
+    }
+    // Claude Code is special — no env var, needs CLI install
+    const label = PROVIDER_LABELS['claude-code'] ?? 'Claude Code';
+    awel.log(`  ${label}`);
+    awel.log('  Install the Claude CLI: https://docs.anthropic.com/en/docs/claude-code');
+    awel.log('');
+    awel.log('Then run `awel dev` again.');
+}
+export async function ensureProvider(projectCwd) {
+    const config = readAwelConfig(projectCwd);
+    const providers = getAvailableProviders();
+    const available = providers.filter(p => p.available);
+    const isFirstRun = !config.onboarded;
+    if (isFirstRun && available.length > 0) {
+        // First run with providers available — show welcome
+        awel.log('');
+        awel.log('Welcome to Awel!');
+        awel.log('AI-powered development overlay for Next.js');
+        awel.log('');
+        awel.log(`\u2714 ${available.length} provider${available.length === 1 ? '' : 's'} available:`);
+        for (const p of available) {
+            awel.log(`  \u25CF ${p.label}`);
+        }
+        awel.log('');
+        printSetupInstructions();
+        process.exit(1);
+    }
+    if (isFirstRun && available.length === 0) {
+        // First run with NO providers — show welcome + instructions, exit
+        awel.log('');
+        awel.log('Welcome to Awel!');
+        awel.log('AI-powered development overlay for Next.js');
+        awel.log('');
+        printSetupInstructions();
+        process.exit(1);
+    }
+    if (!isFirstRun && available.length === 0) {
+        // Subsequent run with NO providers — instructions only, exit
+        printSetupInstructions();
+        process.exit(1);
+    }
+    // Subsequent run with providers available — silent pass-through
+}

package/dist/cli/providers/registry.d.ts

@@ -1,5 +1,17 @@
 import type { StreamProvider, ModelDefinition } from './types.js';
 export declare const PROVIDER_ENV_KEYS: Record<string, string>;
+export declare const PROVIDER_LABELS: Record<string, string>;
+export interface ProviderAvailability {
+    provider: string;
+    label: string;
+    available: boolean;
+    envVar: string | null;
+}
+/**
+ * Returns deduplicated provider availability info.
+ * Checks each provider once (claude-code via binary check, others via env var).
+ */
+export declare function getAvailableProviders(): ProviderAvailability[];
 export declare function resolveProvider(modelId: string): {
     provider: StreamProvider;
     modelProvider: string;

package/dist/cli/providers/registry.js

@@ -59,6 +59,47 @@ function isClaudeBinaryAvailable() {
     }
     return _claudeBinaryAvailable;
 }
+// ─── Provider Availability ────────────────────────────────────
+export const PROVIDER_LABELS = {
+    'claude-code': 'Claude Code',
+    anthropic: 'Anthropic API',
+    openai: 'OpenAI',
+    'google-ai': 'Google AI',
+    'vercel-gateway': 'Vercel AI Gateway',
+    qwen: 'Qwen',
+    minimax: 'MiniMax',
+};
+/**
+ * Returns deduplicated provider availability info.
+ * Checks each provider once (claude-code via binary check, others via env var).
+ */
+export function getAvailableProviders() {
+    const seen = new Set();
+    const result = [];
+    for (const model of MODEL_CATALOG) {
+        if (seen.has(model.provider))
+            continue;
+        seen.add(model.provider);
+        const label = PROVIDER_LABELS[model.provider] ?? model.provider;
+        if (model.provider === 'claude-code') {
+            result.push({
+                provider: model.provider,
+                label,
+                available: isClaudeBinaryAvailable(),
+                envVar: null,
+            });
+            continue;
+        }
+        const envKey = PROVIDER_ENV_KEYS[model.provider];
+        result.push({
+            provider: model.provider,
+            label,
+            available: envKey ? !!process.env[envKey] : true,
+            envVar: envKey ?? null,
+        });
+    }
+    return result;
+}
 // ─── Provider Resolution ─────────────────────────────────────
 export function resolveProvider(modelId) {
     const model = MODEL_CATALOG.find(m => m.id === modelId);

package/dist/host/host.js

@@ -37,7 +37,8 @@
     justify-content: center;
     gap: 8px;
     background: var(--bg);
-    border: 1px solid var(--border);
+    border: none;
+    border-radius: 8px;
     color: var(--fg);
     font-family: inherit;
     font-size: 13px;
@@ -49,24 +50,18 @@
 
   .awel-trigger {
     padding: 10px 16px;
-    border-radius: 8px 0 0 8px;
   }
 
   .awel-inspector-btn {
     padding: 10px 12px;
-    border-radius: 0;
-    border-left: none;
   }
 
   .awel-screenshot-btn {
     padding: 10px 12px;
-    border-radius: 0 8px 8px 0;
-    border-left: none;
   }
 
   .awel-trigger:hover, .awel-inspector-btn:hover, .awel-screenshot-btn:hover {
     background: var(--hover-bg);
-    border-color: var(--hover-border);
   }
 
   .awel-trigger:active, .awel-inspector-btn:active, .awel-screenshot-btn:active {
@@ -75,7 +70,6 @@
 
   .awel-inspector-btn.active {
     background: var(--active-bg);
-    border-color: var(--active-border);
     color: var(--fg);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "awel",
-    "version": "0.1.1",
+    "version": "0.1.2",
     "private": false,
     "type": "module",
     "bin": {