devlens-mcp 0.1.1 → 0.1.2

package/README.md

@@ -17,18 +17,13 @@ DevLens keeps a single Chromium instance alive for the duration of your Claude C
 
 ## Setup
 
-```bash
-npm install -g devlens-mcp
-npx playwright install chromium
-```
-
-Then in your project root:
+In your project root:
 
 ```bash
 npx devlens-mcp init
 ```
 
-This creates `.mcp.json`, `.claude/skills/devlens.md`, and `devlens.config.ts` automatically.
+This creates `.mcp.json`, `.claude/skills/devlens.md`, and `devlens.config.ts`, and installs the Chromium browser automatically.
 
 Edit `devlens.config.ts` to map your source files to dev server routes, then restart Claude Code.
 

package/dist/index.js

@@ -3,6 +3,7 @@
 // src/cli/init.ts
 import { writeFileSync, mkdirSync, existsSync, readFileSync } from "fs";
 import { resolve, join } from "path";
+import { spawnSync } from "child_process";
 var SKILL_CONTENT = `---
 name: devlens
 description: Real-time visual QA for frontend development. Auto-invoked when editing frontend files.
@@ -103,15 +104,19 @@ async function runInit() {
   } else {
     console.log("  \u2713 devlens.config.ts already exists \u2014 skipped");
   }
+  console.log("  Installing Chromium browser...");
+  const result = spawnSync("npx", ["playwright", "install", "chromium"], { stdio: "inherit", shell: true });
+  if (result.status === 0) {
+    console.log("  \u2713 Chromium installed");
+  } else {
+    console.warn('  \u26A0 Chromium install failed \u2014 run "npx playwright install chromium" manually');
+  }
   console.log("");
-  console.log("DevLens initialized. Next steps:");
-  console.log("");
-  console.log("  1. Install Chromium (one-time):");
-  console.log("     npx playwright install chromium");
+  console.log("DevLens initialized. Next step:");
   console.log("");
-  console.log("  2. Edit devlens.config.ts to map your pages to routes");
+  console.log("  1. Edit devlens.config.ts to map your pages to routes");
   console.log("");
-  console.log("  3. Restart Claude Code");
+  console.log("  2. Restart Claude Code");
   console.log("");
   console.log("  Claude will then automatically screenshot your UI after every file write.");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devlens-mcp",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Real-time visual feedback plugin for Claude Code frontend development",
   "type": "module",
   "main": "dist/index.js",