xagi-frontend-mcp

# XAGI Frontend MCP 🚀 **MCP tool providing frontend engineering initialization capabilities for AI Agent** A professional Model Context Protocol (MCP) server designed specifically for AI Agents, enabling rapid initialization of modern frontend engineering projects. ## ✨ Core Features - 🤖 **AI Agent Optimization** - Designed for AI conversational scenarios - 🚀 **Vite by Default** - Default setup using React + Vite + TypeScript - 📦 **Multi-Template Support** - Three templates: react-next, react-vite, vue3-vite - 🌐 **Remote Templates** - Download the latest templates from GitHub repositories - 💾 **Smart Caching** - Automatic caching with over 95% performance improvement - 📦 **Automatic Installation** - Optional automatic dependency installation - 📁 **Current Directory Initialization** - Supports creating in the current directory without specifying a project name - 🛠️ **TypeScript Support** - Complete type definitions and configurations ## 🚀 Quick Start ### Installation ```bash # Recommended using NPX (no installation required) npx xagi-frontend-mcp # Global installation npm install -g xagi-frontend-mcp ``` ### Claude Desktop Configuration ```json { "mcpServers": { "xagi-frontend-mcp": { "command": "npx", "args": [ "xagi-frontend-mcp@latest", "--mcp" ], "env": { "NODE_ENV": "production" } } } } ``` ### Claude Code Configuration ```bash claude mcp add xagi-frontend-template --env NODE_ENV=production -- npx xagi-frontend-mcp@latest --mcp ``` ## 🤖 AI Agent Usage Example ### Create a React Project (Current Directory) ``` User: Create a React project in the current directory Claude: I will create a React Vite project in the current directory. [Calling xagi_create_react_app tool] ✅ Project created successfully! 🚀 Next steps: Install dependencies using a package manager Start the development server ``` ### Create a Vue Project (Specified Directory) ``` User: Create a Vue project named my-vue-app Claude: I will create a Vue 3 project for you. [Calling xagi_create_frontend tool, parameters: template: "vue3-vite", projectName: "my-vue-app"] ✅ Project created successfully! 🚀 Next steps: cd my-vue-app Install dependencies using a package manager Start the development server ``` ## 📋 Available Tools ### 1. xagi_create_react_app (Recommended) One-click creation of a React + Vite project with the best default configuration ### 2. xagi_create_frontend (General) Create frontend projects with support for multiple templates and custom configurations ### 3. xagi_list_templates View all available templates and their features ### 4. xagi_cache_info / xagi_cache_clear / xagi_cache_warm Cache management tools ## 📦 Supported Templates ### 🚀 React + Vite (Default) - React 18 + Vite + TypeScript - Default port: 3000 ### ⚡ React + Next.js - React 18 + Next.js 14 + TypeScript + Tailwind CSS + Radix UI - Default port: 3000 ### 🟢 Vue3 + Vite - Vue 3 + Composition API + Vite + TypeScript - Default port: 4000 ## 🔧 Development ```bash # Clone the repository git clone https://github.com/dongdada29/xagi-frontend-mcp.git cd xagi-frontend-mcp # Install dependencies npm install # Build the project npm run build # Development mode npm run dev ``` ## 📄 License MIT License ## 🔗 Related Links - [GitHub](https://github.com/dongdada29/xagi-frontend-mcp) - [Template Repository](https://github.com/dongdada29/xagi-frontend-templates) - [MCP Protocol](https://modelcontextprotocol.io/)