ai-react-animations 1.2.0 → 1.3.0

package/README.md

@@ -1,84 +1,204 @@
-# ai-react-animations
+# AI React Animations
 
-Beautiful AI loading animation components for React/Next.js. Shows AI processing states with a friendly robot character.
+Beautiful AI loading and animation components for React/Next.js. Production-ready components for AI interfaces with MCP (Model Context Protocol) server support.
+
+[![npm version](https://badge.fury.io/js/ai-react-animations.svg)](https://www.npmjs.com/package/ai-react-animations)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- 7 production-ready animation components
+- TypeScript support
+- Framer Motion animations
+- MCP Server for AI assistants (Claude, etc.)
+- Customizable colors and sizes
+- Dark/Light mode support
+- Responsive design
 
 ## Installation
 
 ```bash
-npm install ai-react-animations
+npm install ai-react-animations framer-motion lucide-react
 ```
 
-## Usage
+## Available Components
+
+| Component | Category | Description |
+|-----------|----------|-------------|
+| `LoadingDots` | Loading | Simple bouncing dots animation |
+| `PulseCircle` | Processing | Circular progress with pulse rings |
+| `CodeTyping` | Creative | Code typing effect with syntax colors |
+| `DataProcessing` | Processing | Data pipeline visualization |
+| `AiCreating` | Creative | Multi-stage AI robot animation |
+| `AiCreating2` | Creative | AI brain with rotating rings |
+| `FloatingLogin` | Auth | Floating login form with OAuth |
+
+## Quick Start
 
 ```tsx
-import AiCreating from 'ai-react-animations';
-import 'ai-react-animations/styles.css';
+import { LoadingDots } from 'ai-react-animations';
 
 function MyComponent() {
-  const [isLoading, setIsLoading] = useState(false);
-
-  return (
-    <AiCreating
-      isLoading={isLoading}
-      size="md"
-      onComplete={() => console.log('Done!')}
-    />
-  );
+  return <LoadingDots size="md" color="#6366F1" />;
 }
 ```
 
-## Props
+## Component Examples
+
+### LoadingDots
+
+```tsx
+import { LoadingDots } from 'ai-react-animations';
+
+<LoadingDots size="md" color="#6366F1" />
+```
 
+**Props:**
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `isLoading` | `boolean` | required | Controls the animation state |
-| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'full'` | `'md'` | Size of the animation |
-| `onComplete` | `() => void` | - | Callback when animation completes |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of the dots |
+| `color` | `string` | `'#6366F1'` | Color of the dots |
 
-## Sizes
+### PulseCircle
 
-- `xs` - 100px height (for buttons)
-- `sm` - 160px height (for small cards)
-- `md` - 240px height (default)
-- `lg` - 340px height (for large displays)
-- `full` - 100% height (fills container)
+```tsx
+import { PulseCircle } from 'ai-react-animations';
 
-## Animation Stages
+const [isActive, setIsActive] = useState(false);
 
-The component shows 4 stages when `isLoading={true}`:
+<PulseCircle
+  isActive={isActive}
+  onComplete={() => setIsActive(false)}
+/>
+```
 
-1. **Reading** - Robot reads the request
-2. **Processing** - Gears spin, sparkles appear
-3. **Delivering** - Result card slides in
-4. **Complete** - Success state with green checkmark
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isActive` | `boolean` | required | Activates the animation |
+| `progress` | `number` | - | External progress (0-100) |
+| `onComplete` | `() => void` | - | Callback at 100% |
 
-## Features
+### AiCreating2
 
-- Pure CSS animations (no external dependencies)
-- Responsive design
-- Accessibility support (prefers-reduced-motion)
-- TypeScript support
-- Works with React 17+
+```tsx
+import { AiCreating2 } from 'ai-react-animations';
+
+<AiCreating2
+  isLoading={isLoading}
+  message="Creating your plan..."
+  primaryColor="#6366F1"
+  backgroundColor="#0f172a"
+  contained={true}
+  onComplete={() => setIsLoading(false)}
+/>
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isLoading` | `boolean` | required | Controls visibility |
+| `message` | `string` | `'AI is creating...'` | Main message |
+| `subMessage` | `string` | - | Secondary text |
+| `primaryColor` | `string` | `'#6366F1'` | Accent color |
+| `backgroundColor` | `string` | `'#0f172a'` | Background color |
+| `textColor` | `string` | `'#ffffff'` | Text color |
+| `contained` | `boolean` | `false` | Render in container vs overlay |
+| `onComplete` | `() => void` | - | Completion callback |
 
-## Example with API Call
+### FloatingLogin
 
 ```tsx
-const [loading, setLoading] = useState(false);
+import { FloatingLogin } from 'ai-react-animations';
+
+<FloatingLogin
+  mode="dark"
+  primaryColor="#6366F1"
+  floatIntensity={5}
+  onLogin={(data) => console.log(data)}
+  onGoogleLogin={() => signInWithGoogle()}
+  onAppleLogin={() => signInWithApple()}
+/>
+```
 
-async function handleSubmit() {
-  setLoading(true);
-  await fetch('/api/generate');
-  setLoading(false); // Triggers completion animation
-}
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mode` | `'light' \| 'dark'` | `'light'` | Theme mode |
+| `primaryColor` | `string` | `'#6366F1'` | Accent color |
+| `floatingEnabled` | `boolean` | `true` | Enable floating animation |
+| `floatIntensity` | `number` | `5` | Float intensity (1-10) |
+| `onLogin` | `(data) => void` | - | Login callback |
+| `onGoogleLogin` | `() => void` | - | Google OAuth callback |
+| `onAppleLogin` | `() => void` | - | Apple Sign-In callback |
+
+---
+
+## MCP Server (For AI Assistants)
+
+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
+
+Run one command to configure MCP for your AI coding tool:
+
+```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.
 
-return (
-  <div>
-    <button onClick={handleSubmit}>Generate</button>
-    <AiCreating isLoading={loading} />
-  </div>
-);
+### 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 |
+|------|-------------|
+| `list_components` | List all available components |
+| `get_component` | Get component details and source code |
+| `add_component` | Get instructions to add a component |
+| `get_install_command` | Get npm install command |
+
+### Usage with AI Assistants
+
+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?"
+
+### 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
 ```
 
+---
+
 ## License
 
 MIT
+
+## Author
+
+johnbekele
+
+## Links
+
+- [npm package](https://www.npmjs.com/package/ai-react-animations)
+- [GitHub repository](https://github.com/johnbekele/ai-react-animations)

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.0",
-  "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,7 +20,6 @@
   "files": [
     "dist",
     "mcp",
-    "mcp-config.json",
     "README.md",
     "LICENSE"
   ],
@@ -29,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"
   },
@@ -56,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-config.json

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