ai-react-animations 1.2.1 → 1.3.1

package/README.md

@@ -136,23 +136,32 @@ import { FloatingLogin } from 'ai-react-animations';
 
 ## MCP Server (For AI Assistants)
 
-This package includes an MCP (Model Context Protocol) server that allows AI assistants like Claude to help users add animation components to their projects.
+This package includes an MCP (Model Context Protocol) server that allows AI assistants like Claude, Cursor, and Windsurf to help users add animation components to their projects.
 
 ### Quick Setup
 
-Add to your `.mcp.json` file:
+Run one command to configure MCP for your AI coding tool:
 
-```json
-{
-  "mcpServers": {
-    "ai-react-animations": {
-      "command": "npx",
-      "args": ["tsx", "node_modules/ai-react-animations/mcp/server.ts"]
-    }
-  }
-}
+```bash
+# Interactive mode - select your tool
+npx ai-react-animations init
+
+# Or specify directly
+npx ai-react-animations init --client claude
+npx ai-react-animations init --client cursor
+npx ai-react-animations init --client windsurf
 ```
 
+Then restart your AI tool to load the MCP server.
+
+### Supported AI Tools
+
+| Tool | Config Location |
+|------|-----------------|
+| Claude Code | `~/.claude/claude_desktop_config.json` or `~/.mcp.json` |
+| Cursor | `.cursor/mcp.json` or `~/.cursor/mcp.json` |
+| Windsurf | `~/.codeium/windsurf/mcp_config.json` |
+
 ### Available MCP Tools
 
 | Tool | Description |
@@ -162,15 +171,22 @@ Add to your `.mcp.json` file:
 | `add_component` | Get instructions to add a component |
 | `get_install_command` | Get npm install command |
 
-### Usage with Claude
+### Usage with AI Assistants
 
-Once configured, you can ask Claude:
+Once configured, you can ask:
 - "List all animation components"
 - "Add the LoadingDots component to my project"
 - "Show me the PulseCircle component details"
 - "What dependencies do I need for FloatingLogin?"
 
-For detailed MCP setup instructions, see [MCP-GUIDE.md](./MCP-GUIDE.md).
+### CLI Commands
+
+```bash
+npx ai-react-animations --help          # Show help
+npx ai-react-animations init            # Interactive setup
+npx ai-react-animations init --client X # Direct setup for client
+npx ai-react-animations serve           # Start MCP server manually
+```
 
 ---
 

package/dist/mcp/cli.js

@@ -0,0 +1,274 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// mcp/cli.ts
+var fs = __toESM(require("fs"));
+var path = __toESM(require("path"));
+var os = __toESM(require("os"));
+var readline = __toESM(require("readline"));
+var import_child_process = require("child_process");
+var PACKAGE_NAME = "ai-react-animations";
+var CLIENT_CONFIGS = {
+  claude: {
+    name: "Claude Code",
+    configPaths: [
+      path.join(os.homedir(), ".claude", "claude_desktop_config.json"),
+      path.join(os.homedir(), ".mcp.json")
+    ],
+    description: "Anthropic Claude Code CLI"
+  },
+  cursor: {
+    name: "Cursor",
+    configPaths: [
+      path.join(process.cwd(), ".cursor", "mcp.json"),
+      path.join(os.homedir(), ".cursor", "mcp.json")
+    ],
+    description: "Cursor AI Editor"
+  },
+  windsurf: {
+    name: "Windsurf",
+    configPaths: [
+      path.join(os.homedir(), ".codeium", "windsurf", "mcp_config.json")
+    ],
+    description: "Codeium Windsurf Editor"
+  }
+};
+var colors = {
+  reset: "\x1B[0m",
+  bright: "\x1B[1m",
+  dim: "\x1B[2m",
+  green: "\x1B[32m",
+  yellow: "\x1B[33m",
+  blue: "\x1B[34m",
+  magenta: "\x1B[35m",
+  cyan: "\x1B[36m",
+  red: "\x1B[31m"
+};
+function log(message) {
+  console.log(message);
+}
+function success(message) {
+  console.log(`${colors.green}\u2713${colors.reset} ${message}`);
+}
+function info(message) {
+  console.log(`${colors.blue}\u2139${colors.reset} ${message}`);
+}
+function warn(message) {
+  console.log(`${colors.yellow}\u26A0${colors.reset} ${message}`);
+}
+function error(message) {
+  console.log(`${colors.red}\u2717${colors.reset} ${message}`);
+}
+function printBanner() {
+  console.log(`
+${colors.magenta}\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557
+\u2551                                                   \u2551
+\u2551   ${colors.bright}AI React Animations${colors.reset}${colors.magenta}                            \u2551
+\u2551   ${colors.dim}MCP Server Configuration${colors.reset}${colors.magenta}                       \u2551
+\u2551                                                   \u2551
+\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D${colors.reset}
+`);
+}
+function getMcpConfig() {
+  return {
+    command: "npx",
+    args: ["-y", PACKAGE_NAME, "serve"]
+  };
+}
+function findExistingConfig(configPaths) {
+  for (const configPath of configPaths) {
+    if (fs.existsSync(configPath)) {
+      return configPath;
+    }
+  }
+  return null;
+}
+function ensureDirectoryExists(filePath) {
+  const dir = path.dirname(filePath);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+}
+function readJsonFile(filePath) {
+  try {
+    const content = fs.readFileSync(filePath, "utf-8");
+    return JSON.parse(content);
+  } catch {
+    return {};
+  }
+}
+function writeJsonFile(filePath, data) {
+  ensureDirectoryExists(filePath);
+  fs.writeFileSync(filePath, JSON.stringify(data, null, 2) + "\n");
+}
+async function prompt(question) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+async function selectClient() {
+  log("\nSelect your AI coding tool:\n");
+  const clients = Object.entries(CLIENT_CONFIGS);
+  clients.forEach(([key, config], index2) => {
+    log(`  ${colors.cyan}${index2 + 1}${colors.reset}) ${config.name} ${colors.dim}(${config.description})${colors.reset}`);
+  });
+  log("");
+  const answer = await prompt(`Enter choice (1-${clients.length}): `);
+  const index = parseInt(answer) - 1;
+  if (index >= 0 && index < clients.length) {
+    return clients[index][0];
+  }
+  error("Invalid selection. Please try again.");
+  return selectClient();
+}
+async function initMcp(clientKey) {
+  const client = CLIENT_CONFIGS[clientKey];
+  if (!client) {
+    error(`Unknown client: ${clientKey}`);
+    log(`
+Supported clients: ${Object.keys(CLIENT_CONFIGS).join(", ")}`);
+    process.exit(1);
+  }
+  info(`Configuring MCP for ${colors.bright}${client.name}${colors.reset}...`);
+  log("");
+  let configPath = findExistingConfig(client.configPaths);
+  if (!configPath) {
+    configPath = client.configPaths[0];
+    info(`Creating new config at: ${colors.dim}${configPath}${colors.reset}`);
+  } else {
+    info(`Found existing config at: ${colors.dim}${configPath}${colors.reset}`);
+  }
+  const config = readJsonFile(configPath);
+  if (!config.mcpServers) {
+    config.mcpServers = {};
+  }
+  if (config.mcpServers[PACKAGE_NAME]) {
+    warn(`${PACKAGE_NAME} is already configured.`);
+    const answer = await prompt("Overwrite existing configuration? (y/N): ");
+    if (answer.toLowerCase() !== "y") {
+      info("Skipping configuration.");
+      return;
+    }
+  }
+  config.mcpServers[PACKAGE_NAME] = getMcpConfig();
+  writeJsonFile(configPath, config);
+  log("");
+  success(`Successfully configured ${colors.bright}${PACKAGE_NAME}${colors.reset} for ${client.name}!`);
+  log("");
+  log(`${colors.bright}Next steps:${colors.reset}`);
+  log("");
+  log(`  1. Restart ${client.name} to load the MCP server`);
+  log("");
+  log(`  2. Ask your AI assistant:`);
+  log(`     ${colors.cyan}"List all animation components"${colors.reset}`);
+  log(`     ${colors.cyan}"Add LoadingDots to my project"${colors.reset}`);
+  log(`     ${colors.cyan}"Show me the AiCreating2 source code"${colors.reset}`);
+  log("");
+  log(`${colors.dim}Config location: ${configPath}${colors.reset}`);
+  log("");
+}
+function serveMcp() {
+  const serverPath = path.join(__dirname, "server.js");
+  if (!fs.existsSync(serverPath)) {
+    error("MCP server not found. Please reinstall the package.");
+    process.exit(1);
+  }
+  const child = (0, import_child_process.spawn)("node", [serverPath], {
+    stdio: "inherit",
+    env: process.env
+  });
+  child.on("error", (err) => {
+    error(`Failed to start MCP server: ${err.message}`);
+    process.exit(1);
+  });
+  child.on("exit", (code) => {
+    process.exit(code || 0);
+  });
+}
+function showHelp() {
+  printBanner();
+  log(`${colors.bright}Usage:${colors.reset}`);
+  log("");
+  log(`  npx ${PACKAGE_NAME} init [--client <name>]    Configure MCP for an AI tool`);
+  log(`  npx ${PACKAGE_NAME} serve                     Start the MCP server`);
+  log(`  npx ${PACKAGE_NAME} --help                    Show this help message`);
+  log("");
+  log(`${colors.bright}Supported clients:${colors.reset}`);
+  log("");
+  Object.entries(CLIENT_CONFIGS).forEach(([key, config]) => {
+    log(`  ${colors.cyan}${key.padEnd(12)}${colors.reset} ${config.name} (${config.description})`);
+  });
+  log("");
+  log(`${colors.bright}Examples:${colors.reset}`);
+  log("");
+  log(`  ${colors.dim}# Interactive mode - select your AI tool${colors.reset}`);
+  log(`  npx ${PACKAGE_NAME} init`);
+  log("");
+  log(`  ${colors.dim}# Direct configuration for Claude Code${colors.reset}`);
+  log(`  npx ${PACKAGE_NAME} init --client claude`);
+  log("");
+  log(`  ${colors.dim}# Direct configuration for Cursor${colors.reset}`);
+  log(`  npx ${PACKAGE_NAME} init --client cursor`);
+  log("");
+}
+async function main() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+  if (!command || command === "--help" || command === "-h") {
+    showHelp();
+    return;
+  }
+  if (command === "serve") {
+    serveMcp();
+    return;
+  }
+  if (command === "init") {
+    printBanner();
+    const clientIndex = args.indexOf("--client");
+    let clientKey;
+    if (clientIndex !== -1 && args[clientIndex + 1]) {
+      clientKey = args[clientIndex + 1].toLowerCase();
+    } else {
+      clientKey = await selectClient();
+    }
+    await initMcp(clientKey);
+    return;
+  }
+  error(`Unknown command: ${command}`);
+  log("");
+  log(`Run ${colors.cyan}npx ${PACKAGE_NAME} --help${colors.reset} for usage information.`);
+  process.exit(1);
+}
+main().catch((err) => {
+  error(err.message);
+  process.exit(1);
+});