archyra 1.0.0

package/mcp/server.ts

@@ -0,0 +1,363 @@
+/**
+ * Archyra - MCP Server
+ *
+ * Model Context Protocol server that allows AI assistants to:
+ * - List available animation components
+ * - Get component details and documentation
+ * - Add components to user projects
+ */
+
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema,
+} from '@modelcontextprotocol/sdk/types.js';
+import { components, getComponent, listComponents, getCategories, ComponentInfo } from './registry.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const server = new Server(
+  {
+    name: 'archyra',
+    version: '1.0.0',
+  },
+  {
+    capabilities: {
+      tools: {},
+    },
+  }
+);
+
+// List available tools
+server.setRequestHandler(ListToolsRequestSchema, async () => {
+  return {
+    tools: [
+      {
+        name: 'list_components',
+        description: 'List all available AI animation components. Optionally filter by category.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            category: {
+              type: 'string',
+              description: 'Filter by category: loading, processing, creative, auth, chat, ecommerce, or all',
+              enum: ['all', 'loading', 'processing', 'creative', 'auth', 'chat', 'ecommerce'],
+            },
+          },
+        },
+      },
+      {
+        name: 'get_component',
+        description: 'Get detailed information about a specific component including props, usage example, and source code. Supports React and vanilla HTML/CSS formats.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            name: {
+              type: 'string',
+              description: 'Component name or ID (e.g., "LoadingDots", "loading-dots", "PulseCircle")',
+            },
+            format: {
+              type: 'string',
+              description: 'Output format: "react" for React/Framer Motion, "vanilla" for plain HTML/CSS/JS',
+              enum: ['react', 'vanilla'],
+            },
+          },
+          required: ['name'],
+        },
+      },
+      {
+        name: 'add_component',
+        description: 'Add an animation component to the user\'s project. Supports React (.tsx) and vanilla HTML/CSS/JS formats.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            name: {
+              type: 'string',
+              description: 'Component name or ID to add',
+            },
+            directory: {
+              type: 'string',
+              description: 'Directory path where to create the component (default: ./components)',
+            },
+            format: {
+              type: 'string',
+              description: 'Output format: "react" (default) or "vanilla" for plain HTML/CSS/JS',
+              enum: ['react', 'vanilla'],
+            },
+          },
+          required: ['name'],
+        },
+      },
+      {
+        name: 'get_install_command',
+        description: 'Get the npm install command for required dependencies of a component.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            name: {
+              type: 'string',
+              description: 'Component name or ID',
+            },
+          },
+          required: ['name'],
+        },
+      },
+    ],
+  };
+});
+
+// Handle tool calls
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+  const { name, arguments: args } = request.params;
+
+  switch (name) {
+    case 'list_components': {
+      const category = (args as { category?: string })?.category || 'all';
+      const filtered = listComponents(category);
+
+      const summary = filtered.map(c => ({
+        name: c.name,
+        id: c.id,
+        category: c.category,
+        description: c.description,
+        formats: {
+          react: true,
+          vanilla: !!c.vanilla,
+        },
+      }));
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({
+              total: filtered.length,
+              categories: getCategories(),
+              components: summary,
+              note: 'Components with vanilla: true support plain HTML/CSS/JS (no React/npm required). Use format: "vanilla" in get_component or add_component.',
+            }, null, 2),
+          },
+        ],
+      };
+    }
+
+    case 'get_component': {
+      const componentName = (args as { name: string; format?: string }).name;
+      const format = (args as { format?: string }).format || 'react';
+      const component = getComponent(componentName);
+
+      if (!component) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: `Component "${componentName}" not found. Use list_components to see available components.`,
+            },
+          ],
+          isError: true,
+        };
+      }
+
+      // Return vanilla format if requested
+      if (format === 'vanilla') {
+        if (!component.vanilla) {
+          return {
+            content: [
+              {
+                type: 'text',
+                text: `Vanilla HTML/CSS version not available for "${componentName}". Use format: "react" for the React version.`,
+              },
+            ],
+            isError: true,
+          };
+        }
+
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                name: component.name,
+                id: component.id,
+                description: component.description,
+                category: component.category,
+                format: 'vanilla',
+                html: component.vanilla.html,
+                css: component.vanilla.css,
+                js: component.vanilla.js || null,
+                usage: component.vanilla.usage,
+                note: 'No npm dependencies required. Just add the HTML, CSS, and optional JS to your project.',
+              }, null, 2),
+            },
+          ],
+        };
+      }
+
+      // Default: React format
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({
+              name: component.name,
+              id: component.id,
+              description: component.description,
+              category: component.category,
+              format: 'react',
+              dependencies: component.dependencies,
+              props: component.props,
+              usage: component.usage,
+              source: component.source,
+              vanillaAvailable: !!component.vanilla,
+            }, null, 2),
+          },
+        ],
+      };
+    }
+
+    case 'add_component': {
+      const componentName = (args as { name: string; directory?: string; format?: string }).name;
+      const directory = (args as { directory?: string }).directory || './components';
+      const format = (args as { format?: string }).format || 'react';
+      const component = getComponent(componentName);
+
+      if (!component) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: `Component "${componentName}" not found. Use list_components to see available components.`,
+            },
+          ],
+          isError: true,
+        };
+      }
+
+      // Handle vanilla format
+      if (format === 'vanilla') {
+        if (!component.vanilla) {
+          return {
+            content: [
+              {
+                type: 'text',
+                text: `Vanilla HTML/CSS version not available for "${componentName}". Use format: "react" instead.`,
+              },
+            ],
+            isError: true,
+          };
+        }
+
+        const htmlPath = path.join(directory, `${component.id}.html`);
+        const cssPath = path.join(directory, `${component.id}.css`);
+        const jsPath = component.vanilla.js ? path.join(directory, `${component.id}.js`) : null;
+
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                success: true,
+                component: component.name,
+                format: 'vanilla',
+                files: {
+                  html: { path: htmlPath, content: component.vanilla.html },
+                  css: { path: cssPath, content: component.vanilla.css },
+                  js: jsPath ? { path: jsPath, content: component.vanilla.js } : null,
+                },
+                usage: component.vanilla.usage,
+                instructions: `
+1. Create the HTML file at: ${htmlPath}
+2. Create the CSS file at: ${cssPath}
+${jsPath ? `3. Create the JS file at: ${jsPath}` : ''}
+${jsPath ? '4' : '3'}. Link the CSS in your HTML <head> and JS before </body>
+${jsPath ? '5' : '4'}. No npm dependencies required!
+
+Example HTML setup:
+<link rel="stylesheet" href="${component.id}.css">
+${jsPath ? `<script src="${component.id}.js"></script>` : ''}
+                `.trim(),
+              }, null, 2),
+            },
+          ],
+        };
+      }
+
+      // Default: React format
+      const filePath = path.join(directory, `${component.name}.tsx`);
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({
+              success: true,
+              component: component.name,
+              format: 'react',
+              filePath: filePath,
+              source: component.source,
+              dependencies: component.dependencies,
+              installCommand: `npm install ${component.dependencies.join(' ')}`,
+              usage: component.usage,
+              vanillaAvailable: !!component.vanilla,
+              instructions: `
+1. Create the file at: ${filePath}
+2. Install dependencies: npm install ${component.dependencies.join(' ')}
+3. Import and use the component as shown in the usage example.
+
+Note: Make sure you have 'use client' directive if using Next.js App Router.
+${component.vanilla ? '\nTip: Vanilla HTML/CSS version also available. Use format: "vanilla" to get it.' : ''}
+              `.trim(),
+            }, null, 2),
+          },
+        ],
+      };
+    }
+
+    case 'get_install_command': {
+      const componentName = (args as { name: string }).name;
+      const component = getComponent(componentName);
+
+      if (!component) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: `Component "${componentName}" not found.`,
+            },
+          ],
+          isError: true,
+        };
+      }
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: `npm install ${component.dependencies.join(' ')}`,
+          },
+        ],
+      };
+    }
+
+    default:
+      return {
+        content: [
+          {
+            type: 'text',
+            text: `Unknown tool: ${name}`,
+          },
+        ],
+        isError: true,
+      };
+  }
+});
+
+// Start the server
+async function main() {
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error('Archyra MCP Server running on stdio');
+}
+
+main().catch(console.error);

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "archyra",
+  "version": "1.0.0",
+  "description": "Archyra - Beautiful animated components for React/Next.js - loading states, e-commerce interactions, chat UIs with MCP server support.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "archyra": "./dist/mcp/cli.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./mcp": "./dist/mcp/server.js",
+    "./mcp/server": "./dist/mcp/server.js",
+    "./mcp/server.js": "./dist/mcp/server.js"
+  },
+  "files": [
+    "dist",
+    "mcp",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "build:lib": "node scripts/build.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 --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"
+  },
+  "keywords": [
+    "archyra",
+    "react",
+    "nextjs",
+    "animation",
+    "ai",
+    "vibe-coding",
+    "loading",
+    "spinner",
+    "typescript",
+    "components",
+    "ecommerce",
+    "cart",
+    "product-card",
+    "wishlist",
+    "countdown-timer",
+    "chat",
+    "framer-motion",
+    "tailwindcss"
+  ],
+  "author": "johnbekele",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/johnbekele/Archyra"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@modelcontextprotocol/sdk": "^1.25.1",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.0.0",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.344.0",
+    "next-auth": "^4.24.13",
+    "next-themes": "^0.4.6",
+    "reactflow": "^11.11.4",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tsx": "^4.21.0",
+    "zustand": "^5.0.9"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "autoprefixer": "^10.4.17",
+    "esbuild": "^0.27.2",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.2.0",
+    "next": "^14.2.0",
+    "postcss": "^8.4.33",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "shadcn": "^3.6.2",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3"
+  }
+}