ai-react-animations 1.2.1 → 1.3.0

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);
+});

package/dist/mcp/server.js

@@ -1,13 +1,32 @@
 #!/usr/bin/env node
-#!/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/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";
+var import_server = require("@modelcontextprotocol/sdk/server/index.js");
+var import_stdio = require("@modelcontextprotocol/sdk/server/stdio.js");
+var import_types = require("@modelcontextprotocol/sdk/types.js");
 
 // mcp/registry.ts
 var components = [
@@ -844,8 +863,8 @@ function getCategories() {
 }
 
 // mcp/server.ts
-import * as path from "path";
-var server = new Server(
+var path = __toESM(require("path"));
+var server = new import_server.Server(
   {
     name: "ai-react-animations",
     version: "1.0.0"
@@ -856,7 +875,7 @@ var server = new Server(
     }
   }
 );
-server.setRequestHandler(ListToolsRequestSchema, async () => {
+server.setRequestHandler(import_types.ListToolsRequestSchema, async () => {
   return {
     tools: [
       {
@@ -922,7 +941,7 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
     ]
   };
 });
-server.setRequestHandler(CallToolRequestSchema, async (request) => {
+server.setRequestHandler(import_types.CallToolRequestSchema, async (request) => {
   const { name, arguments: args } = request.params;
   switch (name) {
     case "list_components": {
@@ -1055,7 +1074,7 @@ Note: Make sure you have 'use client' directive if using Next.js App Router.
   }
 });
 async function main() {
-  const transport = new StdioServerTransport();
+  const transport = new import_stdio.StdioServerTransport();
   await server.connect(transport);
   console.error("AI React Animations MCP Server running on stdio");
 }

package/mcp/cli.ts

@@ -0,0 +1,324 @@
+/**
+ * AI React Animations - MCP CLI
+ *
+ * Initialize MCP configuration for different AI coding tools.
+ *
+ * Usage:
+ *   npx ai-react-animations init --client claude
+ *   npx ai-react-animations init --client cursor
+ *   npx ai-react-animations init --client windsurf
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+import * as readline from 'readline';
+import { spawn } from 'child_process';
+
+const PACKAGE_NAME = 'ai-react-animations';
+
+// Client configurations
+const CLIENT_CONFIGS: Record<string, {
+  name: string;
+  configPaths: string[];
+  description: string;
+}> = {
+  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',
+  },
+};
+
+// Colors for terminal output
+const 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: string) {
+  console.log(message);
+}
+
+function success(message: string) {
+  console.log(`${colors.green}✓${colors.reset} ${message}`);
+}
+
+function info(message: string) {
+  console.log(`${colors.blue}ℹ${colors.reset} ${message}`);
+}
+
+function warn(message: string) {
+  console.log(`${colors.yellow}⚠${colors.reset} ${message}`);
+}
+
+function error(message: string) {
+  console.log(`${colors.red}✗${colors.reset} ${message}`);
+}
+
+function printBanner() {
+  console.log(`
+${colors.magenta}╔═══════════════════════════════════════════════════╗
+║                                                   ║
+║   ${colors.bright}AI React Animations${colors.reset}${colors.magenta}                            ║
+║   ${colors.dim}MCP Server Configuration${colors.reset}${colors.magenta}                       ║
+║                                                   ║
+╚═══════════════════════════════════════════════════╝${colors.reset}
+`);
+}
+
+function getMcpConfig() {
+  return {
+    command: 'npx',
+    args: ['-y', PACKAGE_NAME, 'serve'],
+  };
+}
+
+function findExistingConfig(configPaths: string[]): string | null {
+  for (const configPath of configPaths) {
+    if (fs.existsSync(configPath)) {
+      return configPath;
+    }
+  }
+  return null;
+}
+
+function ensureDirectoryExists(filePath: string) {
+  const dir = path.dirname(filePath);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+}
+
+function readJsonFile(filePath: string): Record<string, any> {
+  try {
+    const content = fs.readFileSync(filePath, 'utf-8');
+    return JSON.parse(content);
+  } catch {
+    return {};
+  }
+}
+
+function writeJsonFile(filePath: string, data: Record<string, any>) {
+  ensureDirectoryExists(filePath);
+  fs.writeFileSync(filePath, JSON.stringify(data, null, 2) + '\n');
+}
+
+async function prompt(question: string): Promise<string> {
+  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(): Promise<string> {
+  log('\nSelect your AI coding tool:\n');
+
+  const clients = Object.entries(CLIENT_CONFIGS);
+  clients.forEach(([key, config], index) => {
+    log(`  ${colors.cyan}${index + 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: string) {
+  const client = CLIENT_CONFIGS[clientKey];
+
+  if (!client) {
+    error(`Unknown client: ${clientKey}`);
+    log(`\nSupported clients: ${Object.keys(CLIENT_CONFIGS).join(', ')}`);
+    process.exit(1);
+  }
+
+  info(`Configuring MCP for ${colors.bright}${client.name}${colors.reset}...`);
+  log('');
+
+  // Find existing config or use first path
+  let configPath = findExistingConfig(client.configPaths);
+
+  if (!configPath) {
+    // Use the first config path as default
+    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}`);
+  }
+
+  // Read existing config
+  const config = readJsonFile(configPath);
+
+  // Initialize mcpServers if not present
+  if (!config.mcpServers) {
+    config.mcpServers = {};
+  }
+
+  // Check if already configured
+  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;
+    }
+  }
+
+  // Add our MCP config
+  config.mcpServers[PACKAGE_NAME] = getMcpConfig();
+
+  // Write config
+  writeJsonFile(configPath, config);
+
+  log('');
+  success(`Successfully configured ${colors.bright}${PACKAGE_NAME}${colors.reset} for ${client.name}!`);
+  log('');
+
+  // Print next steps
+  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() {
+  // Get the path to the server.js file
+  const serverPath = path.join(__dirname, 'server.js');
+
+  if (!fs.existsSync(serverPath)) {
+    error('MCP server not found. Please reinstall the package.');
+    process.exit(1);
+  }
+
+  // Run the server
+  const child = 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();
+
+    // Check for --client flag
+    const clientIndex = args.indexOf('--client');
+    let clientKey: string;
+
+    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);
+});

package/mcp/server.ts

@@ -1,4 +1,3 @@
-#!/usr/bin/env node
 /**
  * AI React Animations - MCP Server
  *

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "ai-react-animations",
-  "version": "1.2.1",
-  "description": "Beautiful AI loading animation components for React/Next.js with MCP server support.",
+  "version": "1.3.0",
+  "description": "Beautiful AI loading animation components for React/Next.js with MCP server support for Claude, Cursor, and Windsurf.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "bin": {
-    "ai-react-animations-mcp": "./dist/mcp/server.js"
+    "ai-react-animations": "./dist/mcp/cli.js"
   },
   "exports": {
     ".": {
@@ -20,8 +20,6 @@
   "files": [
     "dist",
     "mcp",
-    "mcp-config.json",
-    "MCP-GUIDE.md",
     "README.md",
     "LICENSE"
   ],
@@ -30,8 +28,10 @@
     "build": "next build",
     "start": "next start",
     "build:lib": "node scripts/build.js",
-    "build:mcp": "npx esbuild mcp/server.ts --bundle --platform=node --format=esm --outfile=dist/mcp/server.js --external:@modelcontextprotocol/sdk --banner:js='#!/usr/bin/env node'",
-    "mcp": "node --experimental-specifier-resolution=node dist/mcp/server.js",
+    "build:mcp": "npm run build:mcp:server && npm run build:mcp:cli",
+    "build:mcp:server": "npx esbuild mcp/server.ts --bundle --platform=node --format=cjs --outfile=dist/mcp/server.js --external:@modelcontextprotocol/sdk --banner:js='#!/usr/bin/env node'",
+    "build:mcp:cli": "npx esbuild mcp/cli.ts --bundle --platform=node --format=cjs --outfile=dist/mcp/cli.js --banner:js='#!/usr/bin/env node'",
+    "mcp": "node dist/mcp/server.js",
     "mcp:dev": "npx tsx mcp/server.ts",
     "prepublishOnly": "npm run build:lib && npm run build:mcp"
   },
@@ -57,6 +57,7 @@
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/MCP-GUIDE.md

@@ -1,390 +0,0 @@
-# MCP Server Setup Guide
-
-This guide explains how to set up and use the AI React Animations MCP (Model Context Protocol) server with Claude Code or other AI assistants.
-
----
-
-## Table of Contents
-
-1. [What is MCP?](#what-is-mcp)
-2. [Prerequisites](#prerequisites)
-3. [Installation](#installation)
-4. [Configuration](#configuration)
-5. [Available Tools](#available-tools)
-6. [Usage Examples](#usage-examples)
-7. [Troubleshooting](#troubleshooting)
-
----
-
-## What is MCP?
-
-MCP (Model Context Protocol) is a standard that allows AI assistants like Claude to interact with external tools and services. With the AI React Animations MCP server, you can ask Claude to:
-
-- List all available animation components
-- Get detailed information about any component
-- Add components to your project with proper source code
-- Get installation commands for dependencies
-
----
-
-## Prerequisites
-
-Before setting up the MCP server, make sure you have:
-
-- **Node.js** version 18 or higher
-- **npm** (comes with Node.js)
-- **Claude Code** or another MCP-compatible AI assistant
-
-To check your Node.js version:
-
-```bash
-node --version
-```
-
----
-
-## Installation
-
-### Step 1: Install the package
-
-Open your terminal and run:
-
-```bash
-npm install ai-react-animations
-```
-
-This installs the animation components AND the MCP server.
-
-### Step 2: Install tsx (TypeScript executor)
-
-The MCP server is written in TypeScript. Install tsx to run it:
-
-```bash
-npm install -g tsx
-```
-
-Or install it locally in your project:
-
-```bash
-npm install tsx --save-dev
-```
-
----
-
-## Configuration
-
-### Step 1: Find your MCP configuration file
-
-The MCP configuration file is named `.mcp.json` and is located in:
-
-- **macOS/Linux**: `~/.mcp.json` (your home directory)
-- **Windows**: `C:\Users\YourUsername\.mcp.json`
-
-If the file doesn't exist, create it.
-
-### Step 2: Add the MCP server configuration
-
-Open `.mcp.json` in a text editor and add:
-
-```json
-{
-  "mcpServers": {
-    "ai-react-animations": {
-      "command": "npx",
-      "args": ["tsx", "node_modules/ai-react-animations/mcp/server.ts"]
-    }
-  }
-}
-```
-
-### Step 3: If you already have other MCP servers
-
-Add the `ai-react-animations` entry to your existing `mcpServers` object:
-
-```json
-{
-  "mcpServers": {
-    "your-existing-server": {
-      "command": "...",
-      "args": ["..."]
-    },
-    "ai-react-animations": {
-      "command": "npx",
-      "args": ["tsx", "node_modules/ai-react-animations/mcp/server.ts"]
-    }
-  }
-}
-```
-
-### Step 4: Restart Claude Code
-
-After saving the configuration:
-
-1. Close Claude Code completely
-2. Reopen Claude Code
-3. The MCP server will now be available
-
----
-
-## Available Tools
-
-The MCP server provides 4 tools:
-
-### 1. `list_components`
-
-Lists all available animation components.
-
-**Parameters:**
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `category` | string | No | Filter by category: `all`, `loading`, `processing`, `creative`, `auth` |
-
-**Example response:**
-```json
-{
-  "total": 7,
-  "categories": ["all", "loading", "processing", "creative", "auth"],
-  "components": [
-    {
-      "name": "LoadingDots",
-      "id": "loading-dots",
-      "category": "loading",
-      "description": "Simple, elegant bouncing dots animation."
-    }
-  ]
-}
-```
-
----
-
-### 2. `get_component`
-
-Gets detailed information about a specific component, including source code.
-
-**Parameters:**
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `name` | string | Yes | Component name or ID (e.g., `LoadingDots`, `loading-dots`) |
-
-**Example response:**
-```json
-{
-  "name": "LoadingDots",
-  "id": "loading-dots",
-  "description": "Simple, elegant bouncing dots animation.",
-  "category": "loading",
-  "dependencies": ["framer-motion"],
-  "props": [...],
-  "usage": "...",
-  "source": "// Full component source code"
-}
-```
-
----
-
-### 3. `add_component`
-
-Gets instructions and source code to add a component to your project.
-
-**Parameters:**
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `name` | string | Yes | Component name or ID |
-| `directory` | string | No | Target directory (default: `./components`) |
-
-**Example response:**
-```json
-{
-  "success": true,
-  "component": "LoadingDots",
-  "filePath": "./components/LoadingDots.tsx",
-  "source": "// Component source code",
-  "dependencies": ["framer-motion"],
-  "installCommand": "npm install framer-motion",
-  "instructions": "1. Create the file..."
-}
-```
-
----
-
-### 4. `get_install_command`
-
-Gets the npm install command for a component's dependencies.
-
-**Parameters:**
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `name` | string | Yes | Component name or ID |
-
-**Example response:**
-```
-npm install framer-motion
-```
-
----
-
-## Usage Examples
-
-Once the MCP server is configured, you can use natural language with Claude:
-
-### Example 1: List all components
-
-**You say:**
-> "What animation components are available?"
-
-**Claude will:**
-1. Call the `list_components` tool
-2. Show you a list of all 7 components with descriptions
-
----
-
-### Example 2: Get component details
-
-**You say:**
-> "Show me details about the PulseCircle component"
-
-**Claude will:**
-1. Call `get_component` with `name: "PulseCircle"`
-2. Show you the props, usage example, and description
-
----
-
-### Example 3: Add a component to your project
-
-**You say:**
-> "Add the LoadingDots component to my project in the components folder"
-
-**Claude will:**
-1. Call `add_component` with `name: "LoadingDots"` and `directory: "./components"`
-2. Create the file `./components/LoadingDots.tsx` with the full source code
-3. Tell you to run `npm install framer-motion`
-
----
-
-### Example 4: Filter by category
-
-**You say:**
-> "Show me all loading animation components"
-
-**Claude will:**
-1. Call `list_components` with `category: "loading"`
-2. Show you only the loading-related components
-
----
-
-### Example 5: Add multiple components
-
-**You say:**
-> "Add LoadingDots and PulseCircle to my components folder"
-
-**Claude will:**
-1. Call `add_component` twice
-2. Create both component files
-3. Give you the combined install command
-
----
-
-## Troubleshooting
-
-### Problem: "MCP server not found"
-
-**Solution:**
-1. Make sure you installed the package: `npm install ai-react-animations`
-2. Check that `.mcp.json` is in the correct location
-3. Restart Claude Code
-
----
-
-### Problem: "tsx: command not found"
-
-**Solution:**
-Install tsx globally:
-```bash
-npm install -g tsx
-```
-
----
-
-### Problem: "Cannot find module"
-
-**Solution:**
-Make sure you're in a directory where `node_modules/ai-react-animations` exists:
-```bash
-ls node_modules/ai-react-animations
-```
-
-If not, install the package:
-```bash
-npm install ai-react-animations
-```
-
----
-
-### Problem: "Permission denied"
-
-**Solution (macOS/Linux):**
-```bash
-chmod +x node_modules/ai-react-animations/mcp/server.ts
-```
-
----
-
-### Problem: MCP server doesn't respond
-
-**Solution:**
-1. Test the server manually:
-```bash
-echo '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | npx tsx node_modules/ai-react-animations/mcp/server.ts
-```
-
-2. You should see a JSON response with the tools list
-
----
-
-## Component Categories
-
-| Category | Components | Use Case |
-|----------|-----------|----------|
-| **loading** | LoadingDots | Simple loading indicators |
-| **processing** | PulseCircle, DataProcessing | Progress and data flow |
-| **creative** | AiCreating, AiCreating2, CodeTyping | AI-themed animations |
-| **auth** | FloatingLogin | Authentication UI |
-
----
-
-## Need Help?
-
-- **GitHub Issues**: [github.com/johnbekele/ai-react-animations/issues](https://github.com/johnbekele/ai-react-animations/issues)
-- **npm Package**: [npmjs.com/package/ai-react-animations](https://www.npmjs.com/package/ai-react-animations)
-
----
-
-## Quick Reference Card
-
-```
-┌─────────────────────────────────────────────────────────┐
-│  AI React Animations - MCP Quick Reference              │
-├─────────────────────────────────────────────────────────┤
-│                                                         │
-│  SETUP:                                                 │
-│  1. npm install ai-react-animations                     │
-│  2. Add to ~/.mcp.json                                  │
-│  3. Restart Claude Code                                 │
-│                                                         │
-│  ASK CLAUDE:                                            │
-│  • "List animation components"                          │
-│  • "Add LoadingDots to my project"                      │
-│  • "Show me PulseCircle details"                        │
-│  • "What dependencies does FloatingLogin need?"         │
-│                                                         │
-│  COMPONENTS:                                            │
-│  • LoadingDots     - Bouncing dots                      │
-│  • PulseCircle     - Progress circle                    │
-│  • CodeTyping      - Code typing effect                 │
-│  • DataProcessing  - Pipeline visualization             │
-│  • AiCreating      - Robot animation                    │
-│  • AiCreating2     - Brain animation                    │
-│  • FloatingLogin   - Auth form                          │
-│                                                         │
-└─────────────────────────────────────────────────────────┘
-```

package/mcp-config.json

@@ -1,8 +0,0 @@
-{
-  "mcpServers": {
-    "ai-react-animations": {
-      "command": "npx",
-      "args": ["ai-react-animations@latest", "mcp"]
-    }
-  }
-}