@oro.ad/nuxt-claude-devtools 1.0.6

package/dist/module.mjs

@@ -0,0 +1,81 @@
+import { defineNuxtModule, createResolver } from '@nuxt/kit';
+import { existsSync } from 'node:fs';
+import { SOCKET_PORT, getClaudeSession, destroyClaudeSession } from '../dist/runtime/server/claude-session.js';
+
+const DEVTOOLS_UI_ROUTE = "/__claude-devtools";
+const DEVTOOLS_UI_LOCAL_PORT = 3300;
+function setupDevToolsUI(nuxt, resolver) {
+  const clientPath = resolver.resolve("./client");
+  const isProductionBuild = existsSync(clientPath);
+  if (isProductionBuild) {
+    nuxt.hook("vite:serverCreated", async (server) => {
+      const sirv = await import('sirv').then((r) => r.default || r);
+      server.middlewares.use(
+        DEVTOOLS_UI_ROUTE,
+        sirv(clientPath, { dev: true, single: true })
+      );
+    });
+  } else {
+    nuxt.hook("vite:extendConfig", (config) => {
+      config.server = config.server || {};
+      config.server.proxy = config.server.proxy || {};
+      config.server.proxy[DEVTOOLS_UI_ROUTE] = {
+        target: "http://localhost:" + DEVTOOLS_UI_LOCAL_PORT + DEVTOOLS_UI_ROUTE,
+        changeOrigin: true,
+        followRedirects: true,
+        rewrite: (path) => path.replace(DEVTOOLS_UI_ROUTE, "")
+      };
+    });
+  }
+  nuxt.hook("devtools:customTabs", (tabs) => {
+    tabs.push({
+      name: "claude-ai",
+      title: "AI",
+      icon: "carbon:machine-learning-model",
+      view: {
+        type: "iframe",
+        src: DEVTOOLS_UI_ROUTE
+      }
+    });
+  });
+}
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@oro.ad/nuxt-claude-devtools",
+    configKey: "claudeDevtools"
+  },
+  defaults: {
+    enabled: true,
+    claude: {
+      command: "claude",
+      args: []
+    }
+  },
+  setup(options, nuxt) {
+    if (!nuxt.options.dev || !options.enabled) {
+      return;
+    }
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.runtimeConfig.claudeDevtools = {
+      claude: options.claude,
+      rootDir: nuxt.options.rootDir
+    };
+    nuxt.hook("ready", () => {
+      console.log(`[claude-devtools] Starting Socket.IO server on port ${SOCKET_PORT}`);
+      const session = getClaudeSession({
+        command: options.claude.command,
+        args: options.claude.args,
+        rootDir: nuxt.options.rootDir
+      });
+      session.startSocketServer();
+    });
+    nuxt.hook("close", () => {
+      console.log("[claude-devtools] Cleaning up Claude session");
+      destroyClaudeSession();
+    });
+    setupDevToolsUI(nuxt, resolver);
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/server/claude-session.d.ts

@@ -0,0 +1,22 @@
+export declare const SOCKET_PORT = 3355;
+export interface ClaudeSessionConfig {
+    command: string;
+    args: string[];
+    rootDir: string;
+}
+export declare class ClaudeSession {
+    private config;
+    private io;
+    private httpServer;
+    private isProcessing;
+    private continueSession;
+    constructor(config: ClaudeSessionConfig);
+    startSocketServer(): void;
+    destroy(): void;
+    private sendMessage;
+    private getMcpServers;
+    private addMcpServer;
+    private removeMcpServer;
+}
+export declare function getClaudeSession(config: ClaudeSessionConfig): ClaudeSession;
+export declare function destroyClaudeSession(): void;

package/dist/runtime/server/claude-session.js

@@ -0,0 +1,213 @@
+import { createServer } from "node:http";
+import { execSync, spawn } from "node:child_process";
+import { Server as SocketServer } from "socket.io";
+function getErrorMessage(error) {
+  if (error instanceof Error) return error.message;
+  return String(error);
+}
+export const SOCKET_PORT = 3355;
+function log(message, data) {
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+  console.log(`[claude-session] [${timestamp}] ${message}`, data !== void 0 ? data : "");
+}
+export class ClaudeSession {
+  config;
+  io = null;
+  httpServer = null;
+  isProcessing = false;
+  continueSession = false;
+  constructor(config) {
+    this.config = config;
+  }
+  startSocketServer() {
+    this.httpServer = createServer();
+    this.io = new SocketServer(this.httpServer, {
+      cors: {
+        origin: "*",
+        methods: ["GET", "POST"]
+      }
+    });
+    this.io.on("connection", (socket) => {
+      log("Client connected", { socketId: socket.id });
+      socket.emit("session:status", {
+        active: true,
+        processing: this.isProcessing
+      });
+      socket.on("message:send", (message) => {
+        log("Message received", { length: message.length, preview: message.substring(0, 100) });
+        this.sendMessage(message);
+      });
+      socket.on("session:reset", () => {
+        log("Resetting session (new conversation)");
+        this.continueSession = false;
+        this.io?.emit("session:status", { active: true, processing: false });
+      });
+      socket.on("mcp:list", () => {
+        log("MCP list requested");
+        const servers = this.getMcpServers();
+        socket.emit("mcp:list", servers);
+      });
+      socket.on("mcp:add", (data) => {
+        log("MCP add requested", data);
+        this.addMcpServer(data, socket);
+      });
+      socket.on("mcp:remove", (data) => {
+        log("MCP remove requested", data);
+        this.removeMcpServer(data, socket);
+      });
+      socket.on("disconnect", () => {
+        log("Client disconnected", { socketId: socket.id });
+      });
+    });
+    this.httpServer.listen(SOCKET_PORT, () => {
+      log(`Socket.IO server started on port ${SOCKET_PORT}`);
+    });
+  }
+  destroy() {
+    this.io?.close();
+    this.httpServer?.close();
+  }
+  sendMessage(message) {
+    if (this.isProcessing) {
+      log("Already processing, ignoring message");
+      return;
+    }
+    this.isProcessing = true;
+    this.io?.emit("session:status", { active: true, processing: true });
+    const args = [
+      ...this.config.args,
+      "-p",
+      message,
+      "--dangerously-skip-permissions"
+    ];
+    if (this.continueSession) {
+      args.push("--continue");
+    }
+    log("Spawning Claude process", { command: this.config.command, args, cwd: this.config.rootDir });
+    const child = spawn(this.config.command, args, {
+      cwd: this.config.rootDir,
+      env: {
+        ...process.env,
+        FORCE_COLOR: "0",
+        NO_COLOR: "1"
+      },
+      stdio: ["pipe", "pipe", "pipe"]
+    });
+    log("Claude process spawned", { pid: child.pid });
+    child.stdout?.on("data", (data) => {
+      const chunk = data.toString();
+      log("stdout chunk", { length: chunk.length });
+      this.io?.emit("output:chunk", chunk);
+    });
+    child.stderr?.on("data", (data) => {
+      const chunk = data.toString();
+      log("stderr chunk", { length: chunk.length, preview: chunk.substring(0, 200) });
+    });
+    child.on("error", (error) => {
+      log("Process error", { error: error.message });
+      this.io?.emit("session:error", error.message);
+      this.isProcessing = false;
+      this.io?.emit("session:status", { active: true, processing: false });
+    });
+    child.on("close", (code) => {
+      log("Process closed", { exitCode: code });
+      this.isProcessing = false;
+      if (code === 0) {
+        this.continueSession = true;
+        this.io?.emit("output:complete");
+      } else {
+        this.io?.emit("session:error", `Process exited with code ${code}`);
+      }
+      this.io?.emit("session:status", { active: true, processing: false });
+    });
+    child.stdin?.end();
+  }
+  getMcpServers() {
+    const servers = [];
+    try {
+      const output = execSync(`${this.config.command} mcp list`, {
+        cwd: this.config.rootDir,
+        encoding: "utf-8",
+        stdio: ["pipe", "pipe", "pipe"]
+      });
+      log("MCP list output", { output });
+      const lines = output.split("\n").filter((line) => line.trim() && !line.includes("Checking"));
+      for (const line of lines) {
+        const match = line.match(/^(\S+):\s(\S+(?:\s\S+)*)\s\((\w+)\)/);
+        if (match) {
+          const [, name, urlOrCommand, type] = match;
+          const transport = type.toLowerCase();
+          servers.push({
+            name,
+            url: transport !== "stdio" ? urlOrCommand : void 0,
+            command: transport === "stdio" ? urlOrCommand.split(" ")[0] : void 0,
+            args: transport === "stdio" ? urlOrCommand.split(" ").slice(1) : [],
+            transport,
+            scope: "local"
+            // We'll determine scope separately if needed
+          });
+        }
+      }
+    } catch (error) {
+      log("Error getting MCP servers", { error: getErrorMessage(error) });
+    }
+    log("MCP servers found", { count: servers.length });
+    return servers;
+  }
+  addMcpServer(data, socket) {
+    const scopeArg = data.scope === "global" ? "--scope user" : "--scope local";
+    let cmd;
+    if (data.transport === "stdio") {
+      const argsStr = (data.args || []).join(" ");
+      cmd = `${this.config.command} mcp add ${scopeArg} ${data.name} -- ${data.command} ${argsStr}`;
+    } else {
+      cmd = `${this.config.command} mcp add --transport ${data.transport} ${scopeArg} ${data.name} ${data.url}`;
+    }
+    log("Running MCP add command", { cmd });
+    try {
+      execSync(cmd, {
+        cwd: this.config.rootDir,
+        encoding: "utf-8",
+        stdio: ["pipe", "pipe", "pipe"]
+      });
+      socket.emit("mcp:added", { success: true, name: data.name });
+      const servers = this.getMcpServers();
+      socket.emit("mcp:list", servers);
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      log("Error adding MCP server", { error: errorMessage });
+      socket.emit("mcp:added", { success: false, error: errorMessage });
+    }
+  }
+  removeMcpServer(data, socket) {
+    const cmd = `${this.config.command} mcp remove ${data.name}`;
+    log("Running MCP remove command", { cmd });
+    try {
+      execSync(cmd, {
+        cwd: this.config.rootDir,
+        encoding: "utf-8",
+        stdio: ["pipe", "pipe", "pipe"]
+      });
+      socket.emit("mcp:removed", { success: true, name: data.name });
+      const servers = this.getMcpServers();
+      socket.emit("mcp:list", servers);
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      log("Error removing MCP server", { error: errorMessage });
+      socket.emit("mcp:removed", { success: false, error: errorMessage });
+    }
+  }
+}
+let sessionInstance = null;
+export function getClaudeSession(config) {
+  if (!sessionInstance) {
+    sessionInstance = new ClaudeSession(config);
+  }
+  return sessionInstance;
+}
+export function destroyClaudeSession() {
+  if (sessionInstance) {
+    sessionInstance.destroy();
+    sessionInstance = null;
+  }
+}

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ClaudeOptions, type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@oro.ad/nuxt-claude-devtools",
+  "version": "1.0.6",
+  "description": "Nuxt DevTools integration for Claude Code AI assistant",
+  "license": "GPL-3.0-only",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "repository": {
+    "url": "https://github.com/oro-ad/nuxt-claude-devtools"
+  },
+  "main": "./dist/module.mjs",
+  "author": "Simon Bystrov <jobsbystr@gmail.com> (https://sbystr.com/)",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build && npm run client:build",
+    "client:build": "nuxi generate client",
+    "client:dev": "nuxi dev client --port 3300",
+    "dev": "npm run play:dev",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare client",
+    "prepare": "nuxi prepare client",
+    "play:dev": "nuxi dev playground",
+    "play:prod": "npm run prepack && nuxi dev playground",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@nuxt/devtools-kit": "^3.1.1",
+    "@nuxt/kit": "^4.2.2",
+    "sirv": "^3.0.2",
+    "socket.io": "^4.8.1"
+  },
+  "devDependencies": {
+    "@iconify-json/carbon": "^1.2.15",
+    "@nuxt/devtools": "^3.1.1",
+    "@nuxt/devtools-ui-kit": "^3.1.1",
+    "@nuxt/eslint-config": "^1.12.1",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.2.2",
+    "@nuxt/ui": "^4.3.0",
+    "@nuxtjs/i18n": "^10.2.1",
+    "changelogen": "^0.6.2",
+    "eslint": "^9.39.2",
+    "nuxt": "^4.2.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}