Content
# 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/)
Connection Info
You Might Also Like
markitdown
MarkItDown-MCP is a lightweight server for converting URIs to Markdown.
servers
Model Context Protocol Servers
Time
A Model Context Protocol server for time and timezone conversions.
Filesystem
Node.js MCP Server for filesystem operations with dynamic access control.
Sequential Thinking
A structured MCP server for dynamic problem-solving and reflective thinking.
git
A Model Context Protocol server for Git automation and interaction.