@libreapps/ui 5.4.1

package/bin/mcp.js

@@ -0,0 +1,403 @@
+#!/usr/bin/env node
+
+/**
+ * LibreApps UI MCP Server
+ * 
+ * This is the main entry point for the MCP server that can be run with:
+ * - npx @libreapps/ui mcp
+ * - npx @libreapps/ui@latest mcp
+ * 
+ * The server provides AI assistants with tools to:
+ * - List and search components
+ * - Get component source code and demos
+ * - Access UI blocks and patterns
+ * - Generate usage examples
+ * - Create custom themes
+ */
+
+const { StdioServerTransport } = require("@modelcontextprotocol/sdk/server/stdio.js");
+
+// Helper to load the server implementation
+async function loadServer() {
+  try {
+    // Try loading from dist directory (published package)
+    const distPath = require.resolve("../dist/mcp/enhanced-server.js");
+    return require(distPath).default || require(distPath).server;
+  } catch (error) {
+    try {
+      // Fallback to original server if enhanced not available
+      const distPath = require.resolve("../dist/mcp/index.js");
+      return require(distPath).server;
+    } catch (innerError) {
+      try {
+        // Development mode - try to use ts-node if available
+        const tsNode = require("ts-node");
+        tsNode.register({
+          transpileOnly: true,
+          compilerOptions: {
+            module: "commonjs",
+            target: "es2020",
+            esModuleInterop: true,
+            allowSyntheticDefaultImports: true
+          }
+        });
+        
+        // Now try to load the TypeScript file
+        try {
+          const enhancedPath = require.resolve("../mcp/enhanced-server.ts");
+          return require(enhancedPath).default || require(enhancedPath).server;
+        } catch (e) {
+          const srcPath = require.resolve("../mcp/index.ts");
+          return require(srcPath).server;
+        }
+      } catch (tsError) {
+        // If ts-node not available, create a basic server inline
+        console.error("Creating basic MCP server (ts-node not available for enhanced features)");
+        return createBasicServer();
+      }
+    }
+  }
+}
+
+// Create a basic MCP server if we can't load the TypeScript files
+function createBasicServer() {
+  const { Server } = require("@modelcontextprotocol/sdk/server/index.js");
+  const { z } = require("zod");
+  const { zodToJsonSchema } = require("zod-to-json-schema");
+  
+  const server = new Server(
+    {
+      name: "libreapps-ui",
+      version: "4.5.0",
+    },
+    {
+      capabilities: {
+        resources: {},
+        tools: {},
+      },
+    }
+  );
+
+  // Register basic tools
+  const { ListToolsRequestSchema, CallToolRequestSchema } = require("@modelcontextprotocol/sdk/types.js");
+  
+  server.setRequestHandler(ListToolsRequestSchema, async () => {
+    return {
+      tools: [
+        {
+          name: "list_components",
+          description: "List all available LibreApps UI components",
+          inputSchema: zodToJsonSchema(z.object({})),
+        },
+        {
+          name: "get_component",
+          description: "Get information about a specific component",
+          inputSchema: zodToJsonSchema(z.object({
+            name: z.string().describe("Component name"),
+          })),
+        },
+      ],
+    };
+  });
+
+  server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    const args = request.params.arguments || {};
+    
+    switch (request.params.name) {
+      case "list_components": {
+        return {
+          content: [{
+            type: "text",
+            text: `# LibreApps UI Components
+
+The following components are available:
+- accordion - Expandable accordion component
+- alert - Alert message component
+- avatar - User avatar display
+- badge - Badge for labels and status
+- button - Versatile button component
+- card - Container card component
+- checkbox - Checkbox input
+- dialog - Modal dialog component
+- drawer - Sliding drawer panel
+- dropdown-menu - Dropdown menu component
+- form - Form components and validation
+- input - Text input field
+- label - Form label component
+- popover - Popover container
+- radio-group - Radio button group
+- select - Select dropdown
+- separator - Visual separator
+- sheet - Sheet modal component
+- skeleton - Loading skeleton
+- slider - Range slider input
+- switch - Toggle switch
+- table - Data table component
+- tabs - Tab navigation
+- textarea - Multiline text input
+- toast - Toast notification
+- tooltip - Tooltip component
+
+Use 'get_component' to get more details about a specific component.`,
+          }],
+        };
+      }
+      
+      case "get_component": {
+        const name = args.name;
+        return {
+          content: [{
+            type: "text",
+            text: `# ${name} Component
+
+To install the ${name} component:
+
+\`\`\`bash
+npx @libreapps/ui@latest add ${name}
+\`\`\`
+
+This will add the component to your project and install any required dependencies.
+
+For more information, visit https://ui.libreapps.com/docs/components/${name}`,
+          }],
+        };
+      }
+      
+      default:
+        throw new Error(`Unknown tool: ${request.params.name}`);
+    }
+  });
+  
+  return server;
+}
+
+// Parse command line arguments
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const options = {
+    mode: 'stdio',
+    port: 3333,
+    registryUrl: process.env.REGISTRY_URL || 'https://ui.libreapps.com/registry/registry.json',
+    help: false,
+    version: false,
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    
+    if (arg === '--help' || arg === '-h') {
+      options.help = true;
+    } else if (arg === '--version' || arg === '-v') {
+      options.version = true;
+    } else if (arg === '--http') {
+      options.mode = 'http';
+    } else if (arg === '--port' && i + 1 < args.length) {
+      options.port = parseInt(args[++i], 10);
+    } else if (arg === '--registry' && i + 1 < args.length) {
+      options.registryUrl = args[++i];
+    }
+  }
+
+  return options;
+}
+
+// Display help message
+function showHelp() {
+  console.log(`
+LibreApps UI MCP Server
+
+Usage:
+  npx @libreapps/ui mcp [options]
+
+Options:
+  --help, -h        Show this help message
+  --version, -v     Show version information
+  --http            Run in HTTP mode instead of stdio (experimental)
+  --port <port>     Port for HTTP mode (default: 3333)
+  --registry <url>  Custom registry URL
+
+Examples:
+  # Run MCP server (stdio mode for AI clients)
+  npx @libreapps/ui mcp
+
+  # Run in HTTP mode for testing
+  npx @libreapps/ui mcp --http --port 3333
+
+  # Use custom registry
+  npx @libreapps/ui mcp --registry https://my-registry.com/registry.json
+
+AI Client Configuration:
+
+For Claude Desktop (.mcp.json):
+  {
+    "mcpServers": {
+      "libreapps-ui": {
+        "command": "npx",
+        "args": ["@libreapps/ui", "mcp"]
+      }
+    }
+  }
+
+For Cursor (.cursor/mcp.json):
+  {
+    "mcpServers": {
+      "libreapps-ui": {
+        "command": "npx",
+        "args": ["@libreapps/ui", "mcp"]
+      }
+    }
+  }
+
+For VS Code (.vscode/mcp.json):
+  {
+    "mcpServers": {
+      "libreapps-ui": {
+        "command": "npx",
+        "args": ["@libreapps/ui", "mcp"]
+      }
+    }
+  }
+
+Available Tools:
+  - init                    Initialize a new project
+  - list_components         List all available components
+  - get_component          Get component details
+  - get_component_source   Get component source code
+  - get_component_demo     Get component demo code
+  - add_component          Add component to project
+  - list_blocks            List UI blocks/patterns
+  - get_block              Get block details
+  - search_registry        Search for components
+  - get_installation_guide Get installation guide
+
+Available Resources:
+  - libreapps://components/list     Complete component list
+  - libreapps://blocks/list         UI blocks and patterns
+  - libreapps://installation/guide  Installation guide
+  - libreapps://theming/guide       Theming guide
+
+Available Prompts:
+  - component_usage         Generate usage examples
+  - build_page             Build complete pages
+  - component_composition  Create custom components
+  - accessibility_review   Review accessibility
+  - theme_customization    Generate custom themes
+
+Learn more: https://ui.libreapps.com/docs/mcp
+  `);
+}
+
+// Display version information
+function showVersion() {
+  try {
+    const packageJson = require("../package.json");
+    console.log(`@libreapps/ui MCP Server v${packageJson.version}`);
+  } catch (error) {
+    console.log("@libreapps/ui MCP Server");
+  }
+}
+
+// Start HTTP server (experimental)
+async function startHttpServer(server, port) {
+  try {
+    // Dynamically import HTTP transport
+    const { HttpServerTransport } = require("@modelcontextprotocol/sdk/server/http.js");
+    
+    const transport = new HttpServerTransport({
+      port: port,
+      cors: {
+        origin: "*",
+        methods: ["GET", "POST"],
+        allowedHeaders: ["Content-Type"],
+      },
+    });
+    
+    await server.connect(transport);
+    
+    console.log(`LibreApps UI MCP HTTP server listening on port ${port}`);
+    console.log(`Access the server at http://localhost:${port}`);
+    console.log(`\nAvailable endpoints:`);
+    console.log(`  GET  http://localhost:${port}/health`);
+    console.log(`  POST http://localhost:${port}/mcp/v1/list_tools`);
+    console.log(`  POST http://localhost:${port}/mcp/v1/call_tool`);
+    console.log(`  POST http://localhost:${port}/mcp/v1/list_resources`);
+    console.log(`  POST http://localhost:${port}/mcp/v1/read_resource`);
+    console.log(`  POST http://localhost:${port}/mcp/v1/list_prompts`);
+    console.log(`  POST http://localhost:${port}/mcp/v1/get_prompt`);
+    console.log(`\nPress Ctrl+C to stop the server`);
+    
+    return true;
+  } catch (error) {
+    console.error("Failed to start HTTP server:", error.message);
+    console.error("Falling back to stdio mode...");
+    return false;
+  }
+}
+
+// Main function
+async function main() {
+  const options = parseArgs();
+  
+  // Handle help and version flags
+  if (options.help) {
+    showHelp();
+    process.exit(0);
+  }
+  
+  if (options.version) {
+    showVersion();
+    process.exit(0);
+  }
+  
+  // Set registry URL in environment
+  process.env.REGISTRY_URL = options.registryUrl;
+  
+  console.error(`Loading LibreApps UI MCP server...`);
+  console.error(`Registry: ${options.registryUrl}`);
+  
+  try {
+    // Load the server implementation
+    const server = await loadServer();
+    
+    if (options.mode === 'http') {
+      // Try HTTP mode
+      const httpStarted = await startHttpServer(server, options.port);
+      if (!httpStarted) {
+        // Fall back to stdio if HTTP fails
+        const transport = new StdioServerTransport();
+        await server.connect(transport);
+        console.error("MCP server running in stdio mode");
+      }
+    } else {
+      // Default stdio mode
+      const transport = new StdioServerTransport();
+      await server.connect(transport);
+      console.error("MCP server running in stdio mode");
+      console.error("Ready for AI client connections");
+    }
+  } catch (error) {
+    console.error("Error starting MCP server:", error);
+    console.error("\nTroubleshooting:");
+    console.error("1. Make sure @libreapps/ui is properly installed");
+    console.error("2. Try running: npm install @libreapps/ui@latest");
+    console.error("3. Check that all dependencies are installed");
+    process.exit(1);
+  }
+}
+
+// Handle process signals
+process.on('SIGINT', () => {
+  console.error("\nShutting down MCP server...");
+  process.exit(0);
+});
+
+process.on('SIGTERM', () => {
+  console.error("\nShutting down MCP server...");
+  process.exit(0);
+});
+
+// Start the server
+main().catch((error) => {
+  console.error("Fatal error:", error);
+  process.exit(1);
+});

package/bin/npx-registry-mcp.js

@@ -0,0 +1,15 @@
+// @ts-check
+#!/usr/bin/env node
+
+const { program } = require("commander")
+
+program
+  .name("npx @libreapps/ui registry:mcp")
+  .description("Run the LibreApps UI registry with MCP support")
+  .action(() => {
+    console.log("Starting LibreApps UI MCP server...")
+    // Execute the MCP server
+    require("../bin/registry-mcp.js")
+  })
+
+program.parse()

package/bin/registry-mcp-wrapper.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+# Find the registry-mcp.js file in the node_modules directory
+MCP_SCRIPT=$(find ./node_modules -path "*/@libreapps/ui/bin/registry-mcp.js" -type f | head -1)
+
+if [ -z "$MCP_SCRIPT" ]; then
+  echo "Error: @libreapps/ui registry-mcp.js not found."
+  echo "Please make sure @libreapps/ui is installed or run 'npm install @libreapps/ui' first."
+  exit 1
+fi
+
+# Set the REGISTRY_URL environment variable if not already set
+if [ -z "$REGISTRY_URL" ]; then
+  export REGISTRY_URL="https://ui.libreapps.com/registry/registry.json"
+  echo "Using default registry URL: $REGISTRY_URL"
+fi
+
+# Execute the MCP script
+node "$MCP_SCRIPT"

package/bin/registry-mcp.js

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+
+// This is the main entry point for the MCP server
+// It should be runnable directly with npx @libreapps/ui registry:mcp
+
+/**
+ * This script starts the MCP server for LibreApps UI
+ * It can be run with npx @libreapps/ui registry:mcp
+ */
+const { StdioServerTransport } = require("@modelcontextprotocol/sdk/server/stdio.js");
+
+// Import the server dynamically based on where it's available
+async function loadServer() {
+  try {
+    // Try loading from dist directory (published package)
+    return require("../dist/mcp/index.js").server;
+  } catch (error) {
+    try {
+      // Fallback to direct import (development)
+      return require("../mcp/index.js").server;
+    } catch (innerError) {
+      console.error("Failed to load the MCP server implementation:", innerError);
+      process.exit(1);
+    }
+  }
+}
+
+// Start HTTP server if requested
+async function startHttpServer(server) {
+  try {
+    // Dynamically import the HTTP transport - we don't want to require
+    // this dependency if we're not using HTTP mode
+    const { HttpServerTransport } = require("@modelcontextprotocol/sdk/server/http.js");
+    
+    // Get port from environment or use default
+    const port = process.env.MCP_PORT || 3333;
+    
+    // Create HTTP transport
+    const transport = new HttpServerTransport({
+      port: parseInt(port, 10),
+      cors: {
+        origin: "*",  // Allow any origin
+        methods: ["GET", "POST"],
+        allowedHeaders: ["Content-Type"],
+      },
+    });
+    
+    // Connect the server to the transport
+    await server.connect(transport);
+    
+    console.error(`MCP HTTP server listening on port ${port}`);
+    console.error(`You can access the server at http://localhost:${port}`);
+  } catch (error) {
+    console.error("Failed to start HTTP server:", error);
+    console.error("Falling back to STDIO mode...");
+    return false;
+  }
+  
+  return true;
+}
+
+async function main() {
+  try {
+    console.error("Loading LibreApps UI MCP server...");
+    
+    // Default registry URL if not set
+    if (!process.env.REGISTRY_URL) {
+      process.env.REGISTRY_URL = "https://ui.libreapps.com/registry/registry.json";
+      console.error(`Using default registry URL: ${process.env.REGISTRY_URL}`);
+      console.error("You can set a custom registry URL with the REGISTRY_URL environment variable.");
+    }
+
+    // Load the server
+    const server = await loadServer();
+    
+    // Check if we should use HTTP mode
+    const useHttp = process.env.MCP_HTTP_MODE === "true";
+    
+    if (useHttp) {
+      // Try to start HTTP server, fall back to stdio if it fails
+      const httpStarted = await startHttpServer(server);
+      if (!httpStarted) {
+        // Fall back to stdio
+        const transport = new StdioServerTransport();
+        await server.connect(transport);
+      }
+    } else {
+      // Use stdio mode
+      const transport = new StdioServerTransport();
+      await server.connect(transport);
+      console.error("MCP server running in stdio mode");
+    }
+  } catch (error) {
+    console.error("Error starting MCP server:", error);
+    process.exit(1);
+  }
+}
+
+// Start the server
+main();

package/bin/start-mcp-server.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Set the registry URL
+export REGISTRY_URL=${REGISTRY_URL:-"https://ui.libreapps.com/registry/registry.json"}
+
+echo "Starting LibreApps UI MCP server with registry URL: $REGISTRY_URL"
+echo "This server enables AI assistants to interact with the LibreApps UI component library."
+echo "Use this as the URL for 'npx @libreapps/ui registry:mcp' in your MCP configuration."
+echo ""
+echo "Press Ctrl+C to stop the server."
+
+# Find the CLI script
+if [ -f "./bin/cli.js" ]; then
+  # In development directory structure
+  node ./bin/cli.js registry:mcp
+elif [ -f "./node_modules/@libreapps/ui/bin/cli.js" ]; then
+  # Installed as dependency
+  node ./node_modules/@libreapps/ui/bin/cli.js registry:mcp
+else
+  # Use npx as fallback
+  npx @libreapps/ui registry:mcp
+fi

package/bin/test-mcp.sh

@@ -0,0 +1,52 @@
+#!/bin/bash
+
+# Test script for verifying the LibreApps UI MCP functionality
+
+# Set a test registry URL
+export REGISTRY_URL="https://ui.libreapps.com/registry/registry.json"
+
+echo "Testing LibreApps UI MCP Server"
+echo "============================"
+echo ""
+echo "This script will test the following functionalities:"
+echo "1. Loading the server from NPX"
+echo "2. Server startup with custom registry URL"
+echo ""
+
+# First test: Simple command check
+echo "Test 1: Check if the NPX command is recognized"
+# Just check if the command exists without running it
+which npx > /dev/null 2>&1
+if [ $? -eq 0 ]; then
+  echo "✅ NPX is available"
+else
+  echo "❌ NPX is not installed"
+  exit 1
+fi
+
+# Second test: Server startup check
+echo ""
+echo "Test 2: Server startup (will exit automatically after 3 seconds)"
+echo "Running: REGISTRY_URL=$REGISTRY_URL timeout 3 npx @libreapps/ui registry:mcp"
+echo ""
+echo "Expected output: You should see the server startup message"
+echo ""
+
+# Run with timeout to automatically kill after 3 seconds
+# This works because the MCP server doesn't terminate on its own
+timeout 3 npx @libreapps/ui registry:mcp 2>&1 | grep "Starting LibreApps UI MCP server"
+
+if [ $? -eq 0 ]; then
+  echo ""
+  echo "✅ Server startup message detected"
+else
+  echo ""
+  echo "❌ Server failed to start properly"
+  exit 1
+fi
+
+echo ""
+echo "All tests completed successfully!"
+echo ""
+echo "The LibreApps UI MCP server is ready to be used in your MCP configuration with:"
+echo "npx @libreapps/ui registry:mcp"