@rlx-ui/mcp 0.0.12 → 0.0.13

package/dist/cli.js

@@ -1,48 +1,48 @@
 import { McpServer as L } from "@modelcontextprotocol/sdk/server/mcp.js";
-import { StdioServerTransport as R } from "@modelcontextprotocol/sdk/server/stdio.js";
-import { z as c } from "zod";
-import { promises as T, readFileSync as j } from "node:fs";
-import { fileURLToPath as C } from "node:url";
-import x, { join as p, dirname as S } from "node:path";
-function l(s) {
+import { StdioServerTransport as S } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z as l } from "zod";
+import { promises as U, readFileSync as I } from "node:fs";
+import { fileURLToPath as R } from "node:url";
+import C, { join as p, dirname as j } from "node:path";
+function c(o) {
   return {
     content: [
       {
         type: "text",
-        text: JSON.stringify(s, null, 2)
+        text: JSON.stringify(o, null, 2)
       }
     ]
   };
 }
-function U(s, t, i) {
-  return l({
-    error: s,
+function _(o, t, i) {
+  return c({
+    error: o,
     ...t && { slug: t },
     ...i && { category: i }
   });
 }
-function d(s, t) {
-  return U("Component not found", s, t);
+function g(o, t) {
+  return _("Component not found", o, t);
 }
-async function I(s) {
+async function O(o) {
   try {
-    return await T.readFile(s, "utf-8");
+    return await U.readFile(o, "utf-8");
   } catch {
     return null;
   }
 }
-const v = C(import.meta.url), f = S(v);
+const X = R(import.meta.url), h = j(X);
 let m = null;
 function u() {
   if (m)
     return m;
   try {
-    const s = [
-      p(f, "data/registry.json"),
+    const o = [
+      p(h, "data/registry.json"),
       // From dist/ to dist/data/ (copied during build)
-      p(f, "../src/data/registry.json"),
+      p(h, "../src/data/registry.json"),
       // From dist/ to src/data/ (development)
-      p(f, "../data/registry.json"),
+      p(h, "../data/registry.json"),
       // Fallback
       p(process.cwd(), "src/data/registry.json"),
       // From package root (published)
@@ -50,9 +50,9 @@ function u() {
       // Development
     ];
     let t = null;
-    for (const i of s)
+    for (const i of o)
       try {
-        t = j(i, "utf-8");
+        t = I(i, "utf-8");
         break;
       } catch {
         continue;
@@ -60,8 +60,8 @@ function u() {
     if (!t)
       throw new Error("Could not find registry.json in any expected location");
     return m = JSON.parse(t), m;
-  } catch (s) {
-    return console.error("Warning: Could not load component registry:", s), m = {
+  } catch (o) {
+    return console.error("Warning: Could not load component registry:", o), m = {
       widgets: [],
       components: [],
       animates: [],
@@ -71,87 +71,111 @@ function u() {
     }, m;
   }
 }
-function _() {
+function F() {
   return u().widgets;
 }
-function O() {
+function N() {
   return u().components;
 }
-function X() {
+function J() {
   return u().animates;
 }
-function F() {
+function V() {
   return u().hooks;
 }
-function N() {
+function $() {
   return u().utils;
 }
-function g(s, t) {
+function f(o, t) {
   const i = u();
   if (t === "widget" || !t) {
-    const e = i.widgets.find((n) => n.slug === s);
+    const e = i.widgets.find((n) => n.slug === o);
     if (e) return e;
   }
   if (t === "component" || !t) {
-    const e = i.components.find((n) => n.slug === s);
+    const e = i.components.find((n) => n.slug === o);
     if (e) return e;
   }
   if (t === "animate" || !t) {
-    const e = i.animates.find((n) => n.slug === s);
+    const e = i.animates.find((n) => n.slug === o);
     if (e) return e;
   }
   if (t === "hook" || !t) {
-    const e = i.hooks.find((n) => n.slug === s);
+    const e = i.hooks.find((n) => n.slug === o);
     if (e) return e;
   }
   if (t === "util" || !t) {
-    const e = i.utils.find((n) => n.slug === s);
+    const e = i.utils.find((n) => n.slug === o);
     if (e) return e;
   }
 }
-function J(s) {
+function M(o) {
   const t = u(), i = [
     ...t.widgets,
     ...t.components,
     ...t.animates,
     ...t.hooks,
     ...t.utils
-  ], e = s.toLowerCase();
+  ], e = o.toLowerCase();
   return i.filter(
     (n) => n.name.toLowerCase().includes(e) || n.slug.toLowerCase().includes(e)
   );
 }
-function h() {
-  return _();
-}
-function y() {
-  return O();
+async function A() {
+  try {
+    const o = await fetch("https://registry.npmjs.org/@rlx-ui/mcp/latest");
+    return o.ok && (await o.json()).version || null;
+  } catch {
+    return null;
+  }
 }
-function b() {
-  return X();
+async function y(o) {
+  const t = await A();
+  if (!t)
+    return {
+      installedVersion: o,
+      latestVersion: null,
+      needsUpdate: !1
+    };
+  const i = o !== t;
+  return {
+    installedVersion: o,
+    latestVersion: t,
+    needsUpdate: i,
+    warning: i ? `⚠️ WARNING: You are using @rlx-ui/mcp version ${o}, but version ${t} is available. Please update by running: npm update -g @rlx-ui/mcp or npx @rlx-ui/mcp@latest` : void 0
+  };
 }
-function k() {
+function w() {
   return F();
 }
-function w() {
+function k() {
   return N();
 }
-function $(s) {
-  return J(s);
+function b() {
+  return J();
+}
+function x() {
+  return V();
+}
+function v() {
+  return $();
+}
+function P(o) {
+  return M(o);
 }
-function M(s, t) {
-  return g(s, t) || null;
+function W(o, t) {
+  return f(o, t) || null;
 }
-function q(s, t, i) {
-  var o;
-  const e = g(s, t);
+function G(o, t, i) {
+  var s;
+  const e = f(o, t);
   if (!e)
     return { found: !1 };
   const n = [];
   if (e.demos && e.demos.forEach((r) => {
     n.push({ name: r.name });
   }), i) {
-    const r = (o = e.demos) == null ? void 0 : o.find((a) => a.name === i);
+    const r = (s = e.demos) == null ? void 0 : s.find((a) => a.name === i);
     return r && r.code ? {
       found: !0,
       component: e,
@@ -185,8 +209,8 @@ function q(s, t, i) {
     availableDemos: n
   };
 }
-function A(s, t, i = "pnpm") {
-  const e = g(s, t);
+function q(o, t, i = "pnpm") {
+  const e = f(o, t);
   if (!e)
     return { found: !1 };
   let n;
@@ -209,29 +233,29 @@ function A(s, t, i = "pnpm") {
     default:
       return { found: !1 };
   }
-  let o;
+  let s;
   switch (i) {
     case "npm":
-      o = `npm install ${n}`;
+      s = `npm install ${n}`;
       break;
     case "pnpm":
-      o = `pnpm add ${n}`;
+      s = `pnpm add ${n}`;
       break;
     case "yarn":
-      o = `yarn add ${n}`;
+      s = `yarn add ${n}`;
       break;
     default:
-      o = `pnpm add ${n}`;
+      s = `pnpm add ${n}`;
   }
   return {
     found: !0,
-    command: o,
+    command: s,
     packageName: n,
     category: e.category
   };
 }
-function D(s, t) {
-  const i = g(s, t);
+function D(o, t) {
+  const i = f(o, t);
   return i ? i.sourceCode && typeof i.sourceCode == "string" ? {
     found: !0,
     component: i,
@@ -244,10 +268,10 @@ function D(s, t) {
   } : { found: !1 };
 }
 async function E() {
-  const s = await G(), t = new L(
+  const o = await T(), t = new L(
     {
       name: "@rlx-ui/mcp",
-      version: s
+      version: o
     },
     {
       capabilities: {
@@ -262,15 +286,15 @@ async function E() {
       description: "List all available widgets in the RLX UI library"
     },
     async () => {
-      const e = h();
-      return l({
+      const e = w();
+      return c({
         count: e.length,
         widgets: e.map((n) => {
-          var o;
+          var s;
           return {
             name: n.name,
             slug: n.slug,
-            demosCount: ((o = n.demos) == null ? void 0 : o.length) ?? 0
+            demosCount: ((s = n.demos) == null ? void 0 : s.length) ?? 0
           };
         })
       });
@@ -281,15 +305,15 @@ async function E() {
       description: "List all available components in the RLX UI library"
     },
     async () => {
-      const e = y();
-      return l({
+      const e = k();
+      return c({
         count: e.length,
         components: e.map((n) => {
-          var o;
+          var s;
           return {
             name: n.name,
             slug: n.slug,
-            demosCount: ((o = n.demos) == null ? void 0 : o.length) ?? 0
+            demosCount: ((s = n.demos) == null ? void 0 : s.length) ?? 0
           };
         })
       });
@@ -301,14 +325,14 @@ async function E() {
     },
     async () => {
       const e = b();
-      return l({
+      return c({
         count: e.length,
         animates: e.map((n) => {
-          var o;
+          var s;
           return {
             name: n.name,
             slug: n.slug,
-            demosCount: ((o = n.demos) == null ? void 0 : o.length) ?? 0
+            demosCount: ((s = n.demos) == null ? void 0 : s.length) ?? 0
           };
         })
       });
@@ -319,15 +343,15 @@ async function E() {
       description: "List all available React hooks in the RLX UI library"
     },
     async () => {
-      const e = k();
-      return l({
+      const e = x();
+      return c({
         count: e.length,
         hooks: e.map((n) => {
-          var o;
+          var s;
           return {
             name: n.name,
             slug: n.slug,
-            demosCount: ((o = n.demos) == null ? void 0 : o.length) ?? 0
+            demosCount: ((s = n.demos) == null ? void 0 : s.length) ?? 0
           };
         })
       });
@@ -338,15 +362,15 @@ async function E() {
       description: "List all available utility functions in the RLX UI library"
     },
     async () => {
-      const e = w();
-      return l({
+      const e = v();
+      return c({
         count: e.length,
         utils: e.map((n) => {
-          var o;
+          var s;
           return {
             name: n.name,
             slug: n.slug,
-            demosCount: ((o = n.demos) == null ? void 0 : o.length) ?? 0
+            demosCount: ((s = n.demos) == null ? void 0 : s.length) ?? 0
           };
         })
       });
@@ -356,18 +380,18 @@ async function E() {
     {
       description: "Search for components, widgets, hooks, utils, or animates by name or slug",
       inputSchema: {
-        query: c.string().describe("Search query to find components")
+        query: l.string().describe("Search query to find components")
       }
     },
     async (e) => {
-      const n = $(e.query);
-      return l({
+      const n = P(e.query);
+      return c({
         query: e.query,
         count: n.length,
-        results: n.map((o) => ({
-          name: o.name,
-          slug: o.slug,
-          category: o.category
+        results: n.map((s) => ({
+          name: s.name,
+          slug: s.slug,
+          category: s.category
         }))
       });
     }
@@ -376,101 +400,138 @@ async function E() {
     {
       description: "Get detailed information about a specific component, widget, hook, util, or animate",
       inputSchema: {
-        slug: c.string().describe(
+        slug: l.string().describe(
           "The slug/name of the component (e.g., 'button', 'use-copy-to-clipboard')"
         ),
-        category: c.enum(["widget", "component", "hook", "util", "animate"]).optional().describe("Optional category to narrow the search")
+        category: l.enum(["widget", "component", "hook", "util", "animate"]).optional().describe("Optional category to narrow the search")
       }
     },
     async (e) => {
-      var o, r;
-      const n = M(e.slug, e.category);
-      return n ? l({
+      var s, r;
+      const n = W(e.slug, e.category);
+      return n ? c({
         name: n.name,
         slug: n.slug,
         category: n.category,
         hasSourceCode: !!n.sourceCode && typeof n.sourceCode == "string",
-        demosCount: ((o = n.demos) == null ? void 0 : o.length) ?? 0,
+        demosCount: ((s = n.demos) == null ? void 0 : s.length) ?? 0,
         demos: (r = n.demos) == null ? void 0 : r.map((a) => ({
           name: a.name,
           hasCode: !!a.code
         }))
-      }) : d(e.slug, e.category);
+      }) : g(e.slug, e.category);
     }
   ), t.registerTool(
     "get_component_example",
     {
       description: "Get code examples (demos) for a component",
       inputSchema: {
-        slug: c.string().describe("The slug/name of the component"),
-        category: c.enum(["widget", "component", "hook", "util", "animate"]).optional().describe("Optional category to narrow the search"),
-        exampleName: c.string().optional().describe(
+        slug: l.string().describe("The slug/name of the component"),
+        category: l.enum(["widget", "component", "hook", "util", "animate"]).optional().describe("Optional category to narrow the search"),
+        exampleName: l.string().optional().describe(
           "Optional specific example/variant name. If not provided, returns the first available example."
         )
       }
     },
     async (e) => {
-      var o, r, a;
-      const n = q(
+      var s, r, a;
+      const n = G(
         e.slug,
         e.category,
         e.exampleName
       );
-      return n.found ? l({
+      return n.found ? c({
         component: {
-          name: (o = n.component) == null ? void 0 : o.name,
+          name: (s = n.component) == null ? void 0 : s.name,
           slug: (r = n.component) == null ? void 0 : r.slug,
           category: (a = n.component) == null ? void 0 : a.category
         },
         example: n.example,
         availableDemos: n.availableDemos
-      }) : d(e.slug, e.category);
+      }) : g(e.slug, e.category);
     }
   ), t.registerTool(
     "get_component_source",
     {
       description: "Get the complete source code for a component, including main file and all related files (utils, types, etc.)",
       inputSchema: {
-        slug: c.string().describe("The slug/name of the component"),
-        category: c.enum(["widget", "component", "hook", "util", "animate"]).optional().describe("Optional category to narrow the search")
+        slug: l.string().describe("The slug/name of the component"),
+        category: l.enum(["widget", "component", "hook", "util", "animate"]).optional().describe("Optional category to narrow the search")
       }
     },
     async (e) => {
-      var o, r, a;
+      var s, r, a;
       const n = D(e.slug, e.category);
-      return n.found ? l({
+      return n.found ? c({
         component: {
-          name: (o = n.component) == null ? void 0 : o.name,
+          name: (s = n.component) == null ? void 0 : s.name,
           slug: (r = n.component) == null ? void 0 : r.slug,
           category: (a = n.component) == null ? void 0 : a.category
         },
         sourceCode: n.sourceCode,
         sourceFiles: n.sourceFiles,
         note: n.sourceFiles && Object.keys(n.sourceFiles).length > 0 ? `This component has ${Object.keys(n.sourceFiles).length} related file(s). The main file is in sourceCode, and related files (utils, types, etc.) are in sourceFiles with relative paths as keys.` : "This component has no related files."
-      }) : d(e.slug, e.category);
+      }) : g(e.slug, e.category);
+    }
+  ), t.registerTool(
+    "check_mcp_version",
+    {
+      description: `Check if the installed version of @rlx-ui/mcp is up to date with the latest version from npm.
+      
+IMPORTANT: Always check the version before providing installation commands or component information.
+If the version is outdated, warn the user and suggest updating.`
+    },
+    async () => {
+      const e = await T(), n = await y(e);
+      return c({
+        installedVersion: n.installedVersion,
+        latestVersion: n.latestVersion,
+        needsUpdate: n.needsUpdate,
+        warning: n.warning
+      });
     }
   ), t.registerTool(
     "get_installation_command",
     {
-      description: "Get npm/pnpm/yarn installation command for a component",
+      description: `Get npm/pnpm/yarn installation command for a component.
+      
+IMPORTANT: 
+1. First check the @rlx-ui/mcp version using \`check_mcp_version\` tool. If outdated, warn the user.
+2. When installing any @rlx-components/*, @rlx-widgets/*, or @rlx-animates/* package, 
+   you MUST also install all peer dependencies from these namespaces to ensure Tailwind CSS 
+   can properly detect and include all className utilities.
+
+For example, when installing @rlx-components/code-preview-tabs, you also need:
+- @rlx-widgets/base
+- @rlx-components/shiki-code-block
+- @rlx-widgets/tabs
+- @rlx-widgets/select
+- @rlx-widgets/button (peer dependency from shiki-code-block)
+
+To find peer dependencies:
+1. Use \`get_component_source\` tool to get the \`sourceCode\` and \`sourceFiles\` properties
+2. Parse import statements (e.g., \`from "@rlx-widgets/base"\`) to find @rlx-* dependencies
+3. Recursively check peer dependencies of peer dependencies (e.g., if shiki-code-block depends on button, include button too)
+4. Include all found @rlx-widgets/*, @rlx-components/*, and @rlx-animates/* packages in the installation command`,
       inputSchema: {
-        slug: c.string().describe("The slug/name of the component"),
-        category: c.enum(["widget", "component", "hook", "util", "animate"]).optional().describe("Optional category to narrow the search"),
-        packageManager: c.enum(["npm", "pnpm", "yarn"]).optional().default("pnpm").describe("Package manager to use (default: pnpm)")
+        slug: l.string().describe("The slug/name of the component"),
+        category: l.enum(["widget", "component", "hook", "util", "animate"]).optional().describe("Optional category to narrow the search"),
+        packageManager: l.enum(["npm", "pnpm", "yarn"]).optional().default("pnpm").describe("Package manager to use (default: pnpm)")
       }
     },
     async (e) => {
-      const n = A(
+      const n = await T(), s = await y(n), r = q(
         e.slug,
         e.category,
         e.packageManager || "pnpm"
       );
-      return n.found ? l({
-        command: n.command,
-        packageName: n.packageName,
-        category: n.category,
-        packageManager: e.packageManager || "pnpm"
-      }) : d(e.slug, e.category);
+      return r.found ? c({
+        command: r.command,
+        packageName: r.packageName,
+        category: r.category,
+        packageManager: e.packageManager || "pnpm",
+        versionWarning: s.warning
+      }) : g(e.slug, e.category);
     }
   ), t.registerResource(
     "RLX UI Widgets",
@@ -480,7 +541,7 @@ async function E() {
       mimeType: "application/json"
     },
     async () => {
-      const e = h();
+      const e = w();
       return {
         contents: [
           {
@@ -499,7 +560,7 @@ async function E() {
       mimeType: "application/json"
     },
     async () => {
-      const e = y();
+      const e = k();
       return {
         contents: [
           {
@@ -537,7 +598,7 @@ async function E() {
       mimeType: "application/json"
     },
     async () => {
-      const e = k();
+      const e = x();
       return {
         contents: [
           {
@@ -556,7 +617,7 @@ async function E() {
       mimeType: "application/json"
     },
     async () => {
-      const e = w();
+      const e = v();
       return {
         contents: [
           {
@@ -575,7 +636,7 @@ async function E() {
       mimeType: "application/json"
     },
     async () => {
-      const e = h(), n = y(), o = b(), r = k(), a = w();
+      const e = w(), n = k(), s = b(), r = x(), a = v(), d = await y(o);
       return {
         contents: [
           {
@@ -585,15 +646,21 @@ async function E() {
               {
                 name: "RLX UI",
                 description: "A comprehensive UI component library",
-                version: s,
+                version: o,
                 mcpServer: "@rlx-ui/mcp",
+                versionStatus: {
+                  installedVersion: d.installedVersion,
+                  latestVersion: d.latestVersion,
+                  needsUpdate: d.needsUpdate,
+                  warning: d.warning
+                },
                 stats: {
                   widgets: e.length,
                   components: n.length,
-                  animates: o.length,
+                  animates: s.length,
                   hooks: r.length,
                   utils: a.length,
-                  total: e.length + n.length + o.length + r.length + a.length
+                  total: e.length + n.length + s.length + r.length + a.length
                 }
               },
               null,
@@ -604,12 +671,12 @@ async function E() {
       };
     }
   );
-  const i = new R();
+  const i = new S();
   await t.connect(i), console.error("RLX UI MCP Server running on stdio");
 }
-async function G() {
-  const s = C(import.meta.url), t = x.dirname(s), i = await I(
-    x.join(t, "..", "package.json")
+async function T() {
+  const o = R(import.meta.url), t = C.dirname(o), i = await O(
+    C.join(t, "..", "package.json")
   );
   if (!i)
     throw new Error("Unable to find package.json");
@@ -618,6 +685,6 @@ async function G() {
     throw new Error("Unable to read version from package.json");
   return n;
 }
-E().catch((s) => {
-  console.error("Fatal error in main():", s), process.exit(1);
+E().catch((o) => {
+  console.error("Fatal error in main():", o), process.exit(1);
 });