untitledui-mcp 0.1.0

package/dist/index.js

@@ -0,0 +1,688 @@
+#!/usr/bin/env node
+
+// src/utils/license.ts
+import * as fs from "fs";
+import * as path from "path";
+import * as os from "os";
+function getConfigPath() {
+  return path.join(os.homedir(), ".untitledui", "config.json");
+}
+function resolveLicenseKey(cliArg) {
+  if (cliArg) {
+    return cliArg;
+  }
+  const envKey = process.env.UNTITLEDUI_LICENSE_KEY;
+  if (envKey) {
+    return envKey;
+  }
+  try {
+    const configPath = getConfigPath();
+    if (fs.existsSync(configPath)) {
+      const config = JSON.parse(fs.readFileSync(configPath, "utf-8"));
+      if (config.license) {
+        return config.license;
+      }
+    }
+  } catch {
+  }
+  return void 0;
+}
+
+// src/server.ts
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema
+} from "@modelcontextprotocol/sdk/types.js";
+
+// src/api/endpoints.ts
+var API_BASE = "https://www.untitledui.com/react/api";
+var ENDPOINTS = {
+  validateKey: (key) => `${API_BASE}/validate-key?key=${key}`,
+  listTypes: (key) => `${API_BASE}/components/list?key=${key}`,
+  listComponents: (key, type) => `${API_BASE}/components/list?key=${key}&type=${type}`,
+  listSubfolder: (key, type, subfolders) => `${API_BASE}/components/list?key=${key}&type=${type}&subfolders=${subfolders.join(",")}`,
+  fetchComponents: `${API_BASE}/components`,
+  fetchExample: `${API_BASE}/components/example`
+};
+
+// src/api/client.ts
+var UntitledUIClient = class {
+  constructor(licenseKey) {
+    this.licenseKey = licenseKey;
+  }
+  async validateLicense() {
+    try {
+      const response = await fetch(ENDPOINTS.validateKey(this.licenseKey));
+      return response.status === 200;
+    } catch {
+      return false;
+    }
+  }
+  async listComponentTypes() {
+    const response = await fetch(ENDPOINTS.listTypes(this.licenseKey));
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    const data = await response.json();
+    return data.types;
+  }
+  async listComponents(type, subfolder) {
+    let url;
+    if (subfolder) {
+      url = ENDPOINTS.listSubfolder(this.licenseKey, type, [subfolder]);
+    } else {
+      url = ENDPOINTS.listComponents(this.licenseKey, type);
+    }
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    const data = await response.json();
+    if (subfolder && Array.isArray(data.components)) {
+      const subfolderData = data.components[0];
+      if (subfolderData && typeof subfolderData === "object" && subfolder in subfolderData) {
+        return subfolderData[subfolder];
+      }
+    }
+    return data.components;
+  }
+  async fetchComponent(type, name) {
+    const response = await fetch(ENDPOINTS.fetchComponents, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        type,
+        components: [name],
+        key: this.licenseKey
+      })
+    });
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    const data = await response.json();
+    if (data.pro && data.pro.length > 0) {
+      throw new Error(`PRO access required for: ${data.pro.join(", ")}`);
+    }
+    return data.components[0] || null;
+  }
+  async fetchComponents(type, names) {
+    const response = await fetch(ENDPOINTS.fetchComponents, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        type,
+        components: names,
+        key: this.licenseKey
+      })
+    });
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    const data = await response.json();
+    if (data.pro && data.pro.length > 0) {
+      throw new Error(`PRO access required for: ${data.pro.join(", ")}`);
+    }
+    return data.components;
+  }
+  async fetchExample(name) {
+    const response = await fetch(ENDPOINTS.fetchExample, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        example: name,
+        key: this.licenseKey
+      })
+    });
+    return response.json();
+  }
+};
+
+// src/cache/memory-cache.ts
+var MemoryCache = class {
+  cache = /* @__PURE__ */ new Map();
+  set(key, data, ttlSeconds) {
+    this.cache.set(key, {
+      data,
+      expiresAt: Date.now() + ttlSeconds * 1e3
+    });
+  }
+  get(key) {
+    const entry = this.cache.get(key);
+    if (!entry) return void 0;
+    if (Date.now() > entry.expiresAt) {
+      this.cache.delete(key);
+      return void 0;
+    }
+    return entry.data;
+  }
+  has(key) {
+    return this.get(key) !== void 0;
+  }
+  clear() {
+    this.cache.clear();
+  }
+  clearPattern(pattern) {
+    let cleared = 0;
+    for (const key of this.cache.keys()) {
+      if (key.startsWith(pattern)) {
+        this.cache.delete(key);
+        cleared++;
+      }
+    }
+    return cleared;
+  }
+  size() {
+    for (const [key, entry] of this.cache.entries()) {
+      if (Date.now() > entry.expiresAt) {
+        this.cache.delete(key);
+      }
+    }
+    return this.cache.size;
+  }
+};
+var CACHE_TTL = {
+  componentTypes: 3600,
+  componentList: 3600,
+  componentCode: 86400,
+  searchResults: 1800,
+  examples: 86400,
+  licenseValidation: 300
+};
+
+// src/utils/search.ts
+function fuzzySearch(query, items, limit = 20) {
+  const queryLower = query.toLowerCase();
+  const results = [];
+  for (const item of items) {
+    const nameLower = item.name.toLowerCase();
+    const fullPathLower = item.fullPath.toLowerCase();
+    let score = 0;
+    let matchType = "partial";
+    if (nameLower === queryLower) {
+      score = 1;
+      matchType = "exact";
+    } else if (nameLower.startsWith(queryLower)) {
+      score = 0.9;
+    } else if (nameLower.includes(queryLower)) {
+      score = 0.7;
+    } else if (fullPathLower.includes(queryLower)) {
+      score = 0.5;
+    } else {
+      let queryIndex = 0;
+      for (const char of nameLower) {
+        if (char === queryLower[queryIndex]) {
+          queryIndex++;
+        }
+        if (queryIndex === queryLower.length) {
+          score = 0.3;
+          break;
+        }
+      }
+    }
+    if (score > 0) {
+      results.push({
+        ...item,
+        matchType,
+        score
+      });
+    }
+  }
+  return results.sort((a, b) => b.score - a.score).slice(0, limit);
+}
+
+// src/utils/descriptions.ts
+var TYPE_DESCRIPTIONS = {
+  application: "Application UI component for dashboards and web apps",
+  base: "Core UI primitive component",
+  foundations: "Foundational element (icon, logo, visual)",
+  marketing: "Marketing section component for landing pages",
+  "shared-assets": "Shared visual asset (illustration, pattern, mockup)",
+  icons: "Icon component"
+};
+var NAME_PATTERNS = [
+  [/modal/i, "Modal dialog component"],
+  [/button/i, "Interactive button component"],
+  [/input/i, "Form input component"],
+  [/select/i, "Selection/dropdown component"],
+  [/table/i, "Data table component"],
+  [/calendar/i, "Calendar/date component"],
+  [/date-picker/i, "Date selection component"],
+  [/sidebar/i, "Sidebar navigation component"],
+  [/header/i, "Header/navigation component"],
+  [/footer/i, "Footer section component"],
+  [/card/i, "Card container component"],
+  [/avatar/i, "User avatar component"],
+  [/badge/i, "Badge/label component"],
+  [/alert/i, "Alert/notification component"],
+  [/toast/i, "Toast notification component"],
+  [/dropdown/i, "Dropdown menu component"],
+  [/tabs/i, "Tabbed interface component"],
+  [/pagination/i, "Pagination component"],
+  [/carousel/i, "Carousel/slider component"],
+  [/chart/i, "Chart/visualization component"],
+  [/metric/i, "Metrics/statistics component"],
+  [/form/i, "Form component"],
+  [/pricing/i, "Pricing section component"],
+  [/testimonial/i, "Testimonial section component"],
+  [/feature/i, "Features section component"],
+  [/cta/i, "Call-to-action section component"],
+  [/hero/i, "Hero section component"],
+  [/faq/i, "FAQ section component"],
+  [/blog/i, "Blog section component"],
+  [/team/i, "Team section component"],
+  [/contact/i, "Contact section component"],
+  [/login/i, "Login/authentication component"],
+  [/signup/i, "Signup/registration component"]
+];
+function generateDescription(name, type) {
+  for (const [pattern, description] of NAME_PATTERNS) {
+    if (pattern.test(name)) {
+      return description;
+    }
+  }
+  const typeDesc = TYPE_DESCRIPTIONS[type];
+  if (typeDesc) {
+    return `${typeDesc}: ${name.replace(/-/g, " ")}`;
+  }
+  return `UI component: ${name.replace(/-/g, " ")}`;
+}
+
+// src/server.ts
+function createServer(licenseKey) {
+  const client = new UntitledUIClient(licenseKey);
+  const cache = new MemoryCache();
+  const server = new Server(
+    {
+      name: "untitledui-mcp",
+      version: "0.1.0"
+    },
+    {
+      capabilities: {
+        tools: {}
+      }
+    }
+  );
+  async function buildSearchIndex() {
+    const cacheKey = "search:index";
+    const cached = cache.get(cacheKey);
+    if (cached) return cached;
+    const items = [];
+    const types = await client.listComponentTypes();
+    for (const type of types) {
+      const components = await client.listComponents(type);
+      for (const comp of components) {
+        if (comp.type === "dir" && comp.count) {
+          const variants = await client.listComponents(type, comp.name);
+          for (const variant of variants) {
+            items.push({
+              name: variant.name,
+              type,
+              fullPath: `${type}/${comp.name}/${variant.name}`
+            });
+          }
+        } else {
+          items.push({
+            name: comp.name,
+            type,
+            fullPath: `${type}/${comp.name}`
+          });
+        }
+      }
+    }
+    cache.set(cacheKey, items, CACHE_TTL.componentList);
+    return items;
+  }
+  server.setRequestHandler(ListToolsRequestSchema, async () => ({
+    tools: [
+      {
+        name: "list_component_types",
+        description: "List all available component categories (application, base, marketing, etc.)",
+        inputSchema: { type: "object", properties: {} }
+      },
+      {
+        name: "list_components",
+        description: "List components in a category. Use subfolder for variants (e.g., type='application', subfolder='modals')",
+        inputSchema: {
+          type: "object",
+          properties: {
+            type: { type: "string", description: "Component type (application, base, foundations, marketing, shared-assets)" },
+            subfolder: { type: "string", description: "Optional subfolder for variants (e.g., 'modals', 'slideout-menus')" }
+          },
+          required: ["type"]
+        }
+      },
+      {
+        name: "search_components",
+        description: "Search for components by name across all categories",
+        inputSchema: {
+          type: "object",
+          properties: {
+            query: { type: "string", description: "Search query" }
+          },
+          required: ["query"]
+        }
+      },
+      {
+        name: "get_component",
+        description: "Get a single component's code. Does NOT include dependencies - use get_component_with_deps for that.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            type: { type: "string", description: "Component type" },
+            name: { type: "string", description: "Component name (e.g., 'button' or 'modals/ai-assistant-modal')" }
+          },
+          required: ["type", "name"]
+        }
+      },
+      {
+        name: "get_component_with_deps",
+        description: "Get a component with all its base component dependencies included",
+        inputSchema: {
+          type: "object",
+          properties: {
+            type: { type: "string", description: "Component type" },
+            name: { type: "string", description: "Component name" }
+          },
+          required: ["type", "name"]
+        }
+      },
+      {
+        name: "list_examples",
+        description: "List available page examples (dashboards, marketing pages, etc.)",
+        inputSchema: { type: "object", properties: {} }
+      },
+      {
+        name: "get_example",
+        description: "Get a complete page example with all files",
+        inputSchema: {
+          type: "object",
+          properties: {
+            name: { type: "string", description: "Example name (e.g., 'application', 'marketing')" }
+          },
+          required: ["name"]
+        }
+      },
+      {
+        name: "validate_license",
+        description: "Verify that the license key is valid",
+        inputSchema: { type: "object", properties: {} }
+      },
+      {
+        name: "clear_cache",
+        description: "Clear cached data. Optionally specify a pattern to clear specific entries.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            pattern: { type: "string", description: "Optional pattern to match (e.g., 'component:' clears all component cache)" }
+          }
+        }
+      }
+    ]
+  }));
+  server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    const { name, arguments: args } = request.params;
+    try {
+      switch (name) {
+        case "list_component_types": {
+          const cacheKey = "types";
+          let types = cache.get(cacheKey);
+          if (!types) {
+            types = await client.listComponentTypes();
+            cache.set(cacheKey, types, CACHE_TTL.componentTypes);
+          }
+          return { content: [{ type: "text", text: JSON.stringify({ types }, null, 2) }] };
+        }
+        case "list_components": {
+          const { type, subfolder } = args;
+          const cacheKey = subfolder ? `list:${type}:${subfolder}` : `list:${type}`;
+          let components = cache.get(cacheKey);
+          if (!components) {
+            components = await client.listComponents(type, subfolder);
+            cache.set(cacheKey, components, CACHE_TTL.componentList);
+          }
+          return { content: [{ type: "text", text: JSON.stringify({ type, subfolder, components }, null, 2) }] };
+        }
+        case "search_components": {
+          const { query } = args;
+          const index = await buildSearchIndex();
+          const results = fuzzySearch(query, index);
+          return { content: [{ type: "text", text: JSON.stringify({ query, results }, null, 2) }] };
+        }
+        case "get_component": {
+          const { type, name: componentName } = args;
+          const cacheKey = `component:${type}:${componentName}`;
+          let component = cache.get(cacheKey);
+          if (!component) {
+            const fetched = await client.fetchComponent(type, componentName);
+            if (!fetched) {
+              const index = await buildSearchIndex();
+              const suggestions = fuzzySearch(componentName, index, 5).map((r) => r.fullPath);
+              return {
+                content: [{
+                  type: "text",
+                  text: JSON.stringify({
+                    error: `Component "${componentName}" not found in ${type}`,
+                    code: "NOT_FOUND",
+                    suggestions
+                  }, null, 2)
+                }]
+              };
+            }
+            component = {
+              name: fetched.name,
+              type,
+              description: generateDescription(fetched.name, type),
+              files: fetched.files,
+              dependencies: fetched.dependencies || [],
+              devDependencies: fetched.devDependencies || [],
+              baseComponents: (fetched.components || []).map((c) => c.name)
+            };
+            cache.set(cacheKey, component, CACHE_TTL.componentCode);
+          }
+          return { content: [{ type: "text", text: JSON.stringify(component, null, 2) }] };
+        }
+        case "get_component_with_deps": {
+          const { type, name: componentName } = args;
+          const primary = await client.fetchComponent(type, componentName);
+          if (!primary) {
+            const index = await buildSearchIndex();
+            const suggestions = fuzzySearch(componentName, index, 5).map((r) => r.fullPath);
+            return {
+              content: [{
+                type: "text",
+                text: JSON.stringify({
+                  error: `Component "${componentName}" not found`,
+                  code: "NOT_FOUND",
+                  suggestions
+                }, null, 2)
+              }]
+            };
+          }
+          const baseComponentNames = (primary.components || []).map((c) => c.name);
+          const baseComponents = baseComponentNames.length > 0 ? await client.fetchComponents("base", baseComponentNames) : [];
+          const allDeps = /* @__PURE__ */ new Set();
+          const allDevDeps = /* @__PURE__ */ new Set();
+          [primary, ...baseComponents].forEach((c) => {
+            c.dependencies?.forEach((d) => allDeps.add(d));
+            c.devDependencies?.forEach((d) => allDevDeps.add(d));
+          });
+          const result = {
+            primary: {
+              name: primary.name,
+              type,
+              description: generateDescription(primary.name, type),
+              files: primary.files,
+              dependencies: primary.dependencies || [],
+              devDependencies: primary.devDependencies || [],
+              baseComponents: baseComponentNames
+            },
+            baseComponents: baseComponents.map((c) => ({
+              name: c.name,
+              type: "base",
+              description: generateDescription(c.name, "base"),
+              files: c.files,
+              dependencies: c.dependencies || [],
+              devDependencies: c.devDependencies || []
+            })),
+            totalFiles: primary.files.length + baseComponents.reduce((sum, c) => sum + c.files.length, 0),
+            allDependencies: Array.from(allDeps),
+            allDevDependencies: Array.from(allDevDeps)
+          };
+          return { content: [{ type: "text", text: JSON.stringify(result, null, 2) }] };
+        }
+        case "list_examples": {
+          return {
+            content: [{
+              type: "text",
+              text: JSON.stringify({
+                examples: [
+                  { name: "application", type: "application", description: "Dashboard application example" },
+                  { name: "marketing", type: "marketing", description: "Marketing landing page example" }
+                ]
+              }, null, 2)
+            }]
+          };
+        }
+        case "get_example": {
+          const { name: exampleName } = args;
+          const cacheKey = `example:${exampleName}`;
+          let example = cache.get(cacheKey);
+          if (!example) {
+            example = await client.fetchExample(exampleName);
+            if (example) {
+              cache.set(cacheKey, example, CACHE_TTL.examples);
+            }
+          }
+          return { content: [{ type: "text", text: JSON.stringify(example, null, 2) }] };
+        }
+        case "validate_license": {
+          const valid = await client.validateLicense();
+          return {
+            content: [{
+              type: "text",
+              text: JSON.stringify({
+                valid,
+                message: valid ? "License key is valid" : "Invalid or missing license key"
+              }, null, 2)
+            }]
+          };
+        }
+        case "clear_cache": {
+          const { pattern } = args;
+          let cleared;
+          if (pattern) {
+            cleared = cache.clearPattern(pattern);
+          } else {
+            cleared = cache.size();
+            cache.clear();
+          }
+          return {
+            content: [{
+              type: "text",
+              text: JSON.stringify({ cleared, message: `Cleared ${cleared} cache entries` }, null, 2)
+            }]
+          };
+        }
+        default:
+          return {
+            content: [{
+              type: "text",
+              text: JSON.stringify({ error: `Unknown tool: ${name}`, code: "UNKNOWN_TOOL" }, null, 2)
+            }]
+          };
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      return {
+        content: [{
+          type: "text",
+          text: JSON.stringify({ error: message, code: "API_ERROR" }, null, 2)
+        }]
+      };
+    }
+  });
+  return server;
+}
+async function runServer(licenseKey) {
+  const server = createServer(licenseKey);
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+}
+
+// src/index.ts
+async function main() {
+  const args = process.argv.slice(2);
+  let cliLicenseKey;
+  let testMode = false;
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "--license-key" && args[i + 1]) {
+      cliLicenseKey = args[i + 1];
+      i++;
+    } else if (args[i] === "--test") {
+      testMode = true;
+    } else if (args[i] === "--help" || args[i] === "-h") {
+      console.log(`
+mcp-untitledui - MCP server for UntitledUI Pro components
+
+Usage:
+  mcp-untitledui [options]
+
+Options:
+  --license-key <key>  Specify license key (overrides env/config)
+  --test               Test connection and exit
+  --help, -h           Show this help message
+
+Environment:
+  UNTITLEDUI_LICENSE_KEY  License key (if not using --license-key)
+
+Config:
+  ~/.untitledui/config.json  Auto-detected from UntitledUI CLI login
+`);
+      process.exit(0);
+    }
+  }
+  const licenseKey = resolveLicenseKey(cliLicenseKey) || "";
+  if (testMode) {
+    console.log("Testing connection...");
+    if (!licenseKey) {
+      console.error("\u2717 No license key configured");
+      console.error("");
+      console.error("Get your license key:");
+      console.error("  npx untitledui login");
+      console.error("");
+      console.error("Then configure it via:");
+      console.error("  \u2022 Environment: UNTITLEDUI_LICENSE_KEY=<key>");
+      console.error("  \u2022 MCP config env field");
+      console.error("  \u2022 Auto-detected from ~/.untitledui/config.json");
+      process.exit(1);
+    }
+    const client = new UntitledUIClient(licenseKey);
+    const valid = await client.validateLicense();
+    if (!valid) {
+      console.error("\u2717 License key is invalid");
+      process.exit(1);
+    }
+    console.log("\u2713 License key is valid");
+    try {
+      const types = await client.listComponentTypes();
+      console.log(`\u2713 API connection successful`);
+      console.log(`\u2713 ${types.length} component types available`);
+      console.log("\u2713 Ready to serve");
+      process.exit(0);
+    } catch (error) {
+      console.error("\u2717 API connection failed:", error);
+      process.exit(1);
+    }
+  }
+  if (!licenseKey) {
+    console.error("Warning: No license key configured. API calls will fail.");
+    console.error("Run 'npx untitledui login' to authenticate.");
+  }
+  await runServer(licenseKey);
+}
+main().catch((error) => {
+  console.error("Fatal error:", error);
+  process.exit(1);
+});