@eyeglass/cli 0.1.4 → 0.1.5

package/README.md

@@ -8,20 +8,38 @@ CLI for initializing [Eyeglass](https://github.com/donutboyband/eyeglass) in you
 npx @eyeglass/cli init
 ```
 
-This single command will:
-
-1. **Install** `@eyeglass/inspector` as a dev dependency
-2. **Create** `.claude/settings.json` with MCP server configuration
-3. **Configure** your bundler (Vite, Next.js, CRA, or Remix)
+This will interactively prompt you to select which AI coding agents to configure:
+- **Claude Code** - stdio MCP (`.claude/settings.json`)
+- **GitHub Copilot CLI** - local MCP (`.copilot/mcp-config.json`)
+- **OpenAI Codex CLI** - HTTP API (`.codex/eyeglass.md`)
 
 ## Options
 
 ```bash
+# Interactive setup (prompts for agent selection)
+npx @eyeglass/cli init
+
+# Configure specific agents
+npx @eyeglass/cli init --claude           # Claude Code only
+npx @eyeglass/cli init --copilot          # GitHub Copilot CLI only
+npx @eyeglass/cli init --codex            # OpenAI Codex only
+npx @eyeglass/cli init --claude --copilot # Multiple agents
+
+# Other options
 npx @eyeglass/cli init --dry-run      # Preview changes without making them
 npx @eyeglass/cli init --skip-install # Skip installing @eyeglass/inspector
 npx @eyeglass/cli help                # Show help
 ```
 
+## What It Does
+
+1. **Installs** `@eyeglass/inspector` as a dev dependency
+2. **Creates** agent-specific config files:
+   - Claude: `.claude/settings.json` + `.claude/skills/eyeglass.md`
+   - Copilot CLI: `.copilot/mcp-config.json`
+   - Codex: `.codex/eyeglass.md` (HTTP API instructions)
+3. **Configures** your bundler (Vite, Next.js, CRA, or Remix)
+
 ## Supported Frameworks
 
 | Framework | Auto-Detection | Component Names | File Paths |
@@ -34,8 +52,11 @@ npx @eyeglass/cli help                # Show help
 ## After Setup
 
 1. Start your dev server (`npm run dev`)
-2. Run `claude` in your project directory
-3. Tell Claude: `watch eyeglass` or `eg`
+2. Start the Eyeglass bridge: `npx eyeglass-bridge`
+3. Start your AI coding agent:
+   - **Claude Code**: Run `claude` and say "watch eyeglass" or "/eyeglass"
+   - **Copilot CLI**: Run `gh copilot` in your project directory
+   - **Codex**: See `.codex/eyeglass.md` for HTTP API usage
 4. Select elements in your browser and submit requests!
 
 See the [main repo](https://github.com/donutboyband/eyeglass) for full documentation.

package/dist/index.js

@@ -1,10 +1,21 @@
 #!/usr/bin/env node
 import * as fs from 'fs';
 import * as path from 'path';
+import * as readline from 'readline';
 import { execFileSync } from 'child_process';
 // ============================================================================
 // Templates
 // ============================================================================
+// ASCII art logo based on eyeglass.svg - glasses with cursor pointer in right lens
+// SVG has: two round lenses, short vertical bridge, temples angling up-outward, pointer in right lens
+const LOGO = `
+\x1b[36m  ╱                             ╲
+   ╲ ╭───────╮     ╭───────╮ ╱
+     │       │     │  \x1b[34m▲\x1b[36m    │
+     │       │  │  │  \x1b[34m█▸\x1b[36m   │
+     ╰───────╯     ╰───────╯\x1b[0m
+          \x1b[1meyeglass\x1b[0m
+`;
 const NEXT_CONFIG_ADDITION = `
 // Eyeglass configuration - Auto-generated by eyeglass init
 const withEyeglass = (nextConfig) => {
@@ -26,14 +37,28 @@ const withEyeglass = (nextConfig) => {
   };
 };
 `;
+const MCP_STDIO_CONFIG = {
+    command: 'npx',
+    args: ['eyeglass-bridge'],
+};
 const CLAUDE_CONFIG = {
+    mcpServers: {
+        eyeglass: MCP_STDIO_CONFIG,
+    },
+};
+// GitHub Copilot CLI agent config format (.copilot/mcp-config.json)
+const COPILOT_MCP_CONFIG = {
     mcpServers: {
         eyeglass: {
+            type: 'local',
             command: 'npx',
             args: ['eyeglass-bridge'],
+            tools: ['*'],
         },
     },
 };
+// Codex CLI uses HTTP endpoints, so we just provide instructions
+const CODEX_BASE_URL = 'http://localhost:3300/api';
 const EYEGLASS_SKILL = `---
 name: eyeglass
 description: Listen for Eyeglass requests from the browser and make UI changes
@@ -120,6 +145,48 @@ function readFile(filePath) {
 function writeFile(filePath, content) {
     fs.writeFileSync(filePath, content, 'utf-8');
 }
+async function promptAgentSelection() {
+    const agents = [
+        { key: '1', name: 'Claude Code', type: 'claude', selected: false },
+        { key: '2', name: 'GitHub Copilot CLI', type: 'copilot', selected: false },
+        { key: '3', name: 'OpenAI Codex CLI', type: 'codex', selected: false },
+    ];
+    const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+    });
+    const question = (prompt) => {
+        return new Promise((resolve) => {
+            rl.question(prompt, resolve);
+        });
+    };
+    console.log('\n\x1b[1mSelect coding agents to configure:\x1b[0m');
+    console.log('\x1b[2m(Enter numbers separated by spaces, or "a" for all)\x1b[0m\n');
+    for (const agent of agents) {
+        console.log(`  ${agent.key}) ${agent.name}`);
+    }
+    console.log('');
+    const answer = await question('\x1b[36m>\x1b[0m ');
+    rl.close();
+    const input = answer.trim().toLowerCase();
+    if (input === 'a' || input === 'all') {
+        return agents.map((a) => a.type);
+    }
+    const selected = [];
+    const parts = input.split(/[\s,]+/);
+    for (const part of parts) {
+        const agent = agents.find((a) => a.key === part);
+        if (agent && !selected.includes(agent.type)) {
+            selected.push(agent.type);
+        }
+    }
+    // Default to Claude if nothing selected
+    if (selected.length === 0) {
+        log('No selection made, defaulting to Claude Code', 'warn');
+        return ['claude'];
+    }
+    return selected;
+}
 function detectPackageManager() {
     const cwd = process.cwd();
     if (fileExists(path.join(cwd, 'bun.lockb')))
@@ -268,6 +335,132 @@ function setupClaudeConfig(dryRun) {
     }
     return true;
 }
+function setupCopilotConfig(dryRun) {
+    const cwd = process.cwd();
+    const copilotDir = path.join(cwd, '.copilot');
+    const configPath = path.join(copilotDir, 'mcp-config.json');
+    if (fileExists(configPath)) {
+        try {
+            const existing = JSON.parse(readFile(configPath));
+            if (existing.mcpServers?.eyeglass) {
+                log('Copilot CLI MCP config already exists', 'success');
+                return true;
+            }
+            // Merge with existing config
+            const merged = {
+                ...existing,
+                mcpServers: {
+                    ...existing.mcpServers,
+                    ...COPILOT_MCP_CONFIG.mcpServers,
+                },
+            };
+            if (dryRun) {
+                log('Would update .copilot/mcp-config.json with eyeglass MCP config');
+            }
+            else {
+                writeFile(configPath, JSON.stringify(merged, null, 2));
+                log('Added eyeglass to existing Copilot CLI MCP config', 'success');
+            }
+            return true;
+        }
+        catch {
+            log('Could not parse existing .copilot/mcp-config.json', 'warn');
+            return false;
+        }
+    }
+    if (dryRun) {
+        log(`Would create ${configPath}`);
+    }
+    else {
+        if (!fileExists(copilotDir)) {
+            fs.mkdirSync(copilotDir, { recursive: true });
+        }
+        writeFile(configPath, JSON.stringify(COPILOT_MCP_CONFIG, null, 2));
+        log('Created .copilot/mcp-config.json for GitHub Copilot CLI', 'success');
+    }
+    return true;
+}
+function setupCodexConfig(dryRun) {
+    const cwd = process.cwd();
+    const codexDir = path.join(cwd, '.codex');
+    const configPath = path.join(codexDir, 'eyeglass.md');
+    const codexInstructions = `# Eyeglass Integration for Codex CLI
+
+Eyeglass provides HTTP endpoints for interacting with UI elements selected in the browser.
+
+## Base URL
+\`${CODEX_BASE_URL}\`
+
+## Endpoints
+
+### Wait for Request (blocking)
+\`\`\`
+GET /api/wait?timeout=300000
+\`\`\`
+Blocks until user selects an element. Returns markdown with element context.
+
+### Get Current Focus
+\`\`\`
+GET /api/focus
+\`\`\`
+Returns the currently focused element as markdown.
+
+### Update Status
+\`\`\`
+POST /api/status
+Content-Type: application/json
+
+{"status": "fixing", "message": "Working on it..."}
+\`\`\`
+Status values: \`idle\`, \`pending\`, \`fixing\`, \`success\`, \`failed\`
+
+### Report Action
+\`\`\`
+POST /api/action
+Content-Type: application/json
+
+{"action": "reading", "target": "src/components/Button.tsx"}
+\`\`\`
+Actions: \`reading\`, \`writing\`, \`searching\`, \`thinking\`
+
+### Send Thought
+\`\`\`
+POST /api/thought
+Content-Type: application/json
+
+{"content": "I think we should use a CSS variable for this color..."}
+\`\`\`
+
+### Get History
+\`\`\`
+GET /api/history
+\`\`\`
+Returns up to 5 previous focus requests.
+
+## Workflow
+
+1. Start the bridge: \`npx eyeglass-bridge\`
+2. Call \`GET /api/wait\` to block until user selects an element
+3. Make your changes based on the returned context
+4. Call \`POST /api/status\` with \`{"status": "success", "message": "Done!"}\`
+5. Loop back to step 2
+`;
+    if (fileExists(configPath)) {
+        log('Codex eyeglass instructions already exist', 'success');
+        return true;
+    }
+    if (dryRun) {
+        log(`Would create ${configPath}`);
+    }
+    else {
+        if (!fileExists(codexDir)) {
+            fs.mkdirSync(codexDir, { recursive: true });
+        }
+        writeFile(configPath, codexInstructions);
+        log('Created .codex/eyeglass.md with HTTP API instructions', 'success');
+    }
+    return true;
+}
 function setupVite(configFile, dryRun) {
     const cwd = process.cwd();
     // Find entry file (main.tsx, main.ts, main.jsx, main.js, src/main.*, etc.)
@@ -402,12 +595,25 @@ function setupCRA(entryFile, dryRun) {
     }
     return true;
 }
-function init(options) {
+async function init(options) {
     const { dryRun, skipInstall } = options;
-    console.log('\n\x1b[1m🔍 Eyeglass Setup\x1b[0m\n');
+    let { agents } = options;
+    console.log(LOGO);
     if (dryRun) {
         log('Running in dry-run mode - no changes will be made\n', 'warn');
     }
+    // Prompt for agent selection if not provided
+    if (!agents || agents.length === 0) {
+        agents = await promptAgentSelection();
+    }
+    const agentNames = agents.map((a) => {
+        switch (a) {
+            case 'claude': return 'Claude Code';
+            case 'copilot': return 'GitHub Copilot CLI';
+            case 'codex': return 'OpenAI Codex CLI';
+        }
+    });
+    log(`Configuring for: ${agentNames.join(', ')}\n`);
     // Detect project
     const project = detectProject();
     log(`Detected: ${project.type}${project.typescript ? ' (TypeScript)' : ''}`);
@@ -426,10 +632,22 @@ function init(options) {
             }
         }
     }
-    // Step 2: Setup Claude Code MCP config
-    setupClaudeConfig(dryRun);
-    // Step 3: Setup Eyeglass skill for Claude
-    setupEyeglassSkill(dryRun);
+    // Step 2: Setup agent-specific configs
+    console.log('');
+    for (const agent of agents) {
+        switch (agent) {
+            case 'claude':
+                setupClaudeConfig(dryRun);
+                setupEyeglassSkill(dryRun);
+                break;
+            case 'copilot':
+                setupCopilotConfig(dryRun);
+                break;
+            case 'codex':
+                setupCodexConfig(dryRun);
+                break;
+        }
+    }
     // Step 4: Setup project-specific integration
     console.log('');
     switch (project.type) {
@@ -453,45 +671,75 @@ function init(options) {
             console.log('  2. Or add <script type="module">import "@eyeglass/inspector";</script> to your HTML\n');
     }
     // Done!
-    console.log('\n\x1b[1m✨ Setup complete!\x1b[0m\n');
+    console.log('\n\x1b[1mSetup complete!\x1b[0m\n');
+    printUsageInstructions(agents);
+}
+function printUsageInstructions(agents) {
     console.log('\x1b[1mHow to use Eyeglass:\x1b[0m\n');
     console.log('  1. Start your dev server');
-    console.log('  2. Run \x1b[36mclaude\x1b[0m in this directory');
-    console.log('  3. Tell Claude: \x1b[36m"watch eyeglass"\x1b[0m or \x1b[36m"eg"\x1b[0m');
-    console.log('     → Claude will start listening for requests');
-    console.log('  4. In your browser, hover over any element and click it to select for Eyeglass context. You can multi-select up to 5 items.');
-    console.log('  5. Type your request (e.g., "make this blue") and submit');
-    console.log('     → Claude automatically receives it and starts working!\n');
-    console.log('\x1b[2mTip: You never need to leave your browser - Claude watches for requests.\x1b[0m\n');
+    console.log('  2. Start the Eyeglass bridge: \x1b[36mnpx eyeglass-bridge\x1b[0m');
+    console.log('');
+    if (agents.includes('claude')) {
+        console.log('  \x1b[1mClaude Code:\x1b[0m');
+        console.log('    - Run \x1b[36mclaude\x1b[0m in this directory');
+        console.log('    - Say \x1b[36m"watch eyeglass"\x1b[0m or \x1b[36m"/eyeglass"\x1b[0m');
+        console.log('');
+    }
+    if (agents.includes('copilot')) {
+        console.log('  \x1b[1mGitHub Copilot CLI:\x1b[0m');
+        console.log('    - Run \x1b[36mgh copilot\x1b[0m in this directory');
+        console.log('    - Copilot will auto-connect to the eyeglass MCP server');
+        console.log('');
+    }
+    if (agents.includes('codex')) {
+        console.log('  \x1b[1mOpenAI Codex CLI:\x1b[0m');
+        console.log('    - See \x1b[36m.codex/eyeglass.md\x1b[0m for HTTP API docs');
+        console.log('    - Use \x1b[36mGET http://localhost:3300/api/wait\x1b[0m to listen');
+        console.log('');
+    }
+    console.log('  3. In your browser, hover over any element and click to select');
+    console.log('  4. Type your request (e.g., "make this blue") and submit');
+    console.log('     → Your agent automatically receives it and starts working!\n');
+    console.log('\x1b[2mTip: You never need to leave your browser - your agent watches for requests.\x1b[0m\n');
 }
 function help() {
-    console.log(`
-\x1b[1mEyeglass\x1b[0m - Visual debugging for AI coding agents
+    console.log(LOGO);
+    console.log(`\x1b[2mVisual debugging for AI coding agents\x1b[0m
 
-Point at UI elements in your browser and tell Claude what to change.
-Claude watches for requests, so you never need to leave your browser.
+Point at UI elements in your browser and tell your AI agent what to change.
+Works with Claude Code, GitHub Copilot CLI, and OpenAI Codex CLI.
 
 \x1b[1mUSAGE\x1b[0m
   npx @eyeglass/cli <command> [options]
 
 \x1b[1mCOMMANDS\x1b[0m
-  init          Initialize Eyeglass in your project
+  init          Initialize Eyeglass in your project (interactive)
   help          Show this help message
 
 \x1b[1mOPTIONS\x1b[0m
   --dry-run       Preview changes without making them
   --skip-install  Skip installing @eyeglass/inspector
+  --claude        Configure for Claude Code (stdio MCP)
+  --copilot       Configure for GitHub Copilot CLI (local MCP)
+  --codex         Configure for OpenAI Codex CLI (HTTP API)
 
 \x1b[1mEXAMPLES\x1b[0m
-  npx @eyeglass/cli init              # Full automatic setup
+  npx @eyeglass/cli init              # Interactive agent selection
+  npx @eyeglass/cli init --claude     # Setup for Claude Code only
+  npx @eyeglass/cli init --copilot --codex  # Setup for multiple agents
   npx @eyeglass/cli init --dry-run    # Preview what would change
 
+\x1b[1mSUPPORTED AGENTS\x1b[0m
+  Claude Code      - Uses stdio MCP (.claude/settings.json)
+  GitHub Copilot CLI - Uses local MCP (.copilot/mcp-config.json)
+  OpenAI Codex     - Uses HTTP API (.codex/eyeglass.md)
+
 \x1b[1mWORKFLOW\x1b[0m
   1. Run \x1b[36mnpx @eyeglass/cli init\x1b[0m in your project
   2. Start your dev server
-  3. Run \x1b[36mclaude\x1b[0m and say "watch eyeglass" or "eg"
-  4. In your browser: hover over element → press E → type request
-  5. Claude automatically picks up requests and makes changes!
+  3. Start your AI coding agent
+  4. In your browser: hover over element → click → type request
+  5. Your agent automatically picks up requests and makes changes!
 
 \x1b[1mMORE INFO\x1b[0m
   https://github.com/donutboyband/eyeglass
@@ -503,13 +751,25 @@ Claude watches for requests, so you never need to leave your browser.
 const args = process.argv.slice(2);
 const command = args.find((arg) => !arg.startsWith('-'));
 const flags = args.filter((arg) => arg.startsWith('-'));
+// Parse agent flags
+const agentFlags = [];
+if (flags.includes('--claude'))
+    agentFlags.push('claude');
+if (flags.includes('--copilot'))
+    agentFlags.push('copilot');
+if (flags.includes('--codex'))
+    agentFlags.push('codex');
 const options = {
     dryRun: flags.includes('--dry-run'),
     skipInstall: flags.includes('--skip-install'),
+    agents: agentFlags.length > 0 ? agentFlags : undefined,
 };
 switch (command) {
     case 'init':
-        init(options);
+        init(options).catch((err) => {
+            console.error('Error:', err.message);
+            process.exit(1);
+        });
         break;
     case 'help':
     case undefined:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eyeglass/cli",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Visual debugging for AI coding agents - CLI",
   "type": "module",
   "bin": {