Next Js Mcp Server Example

A modern, real-time AI-Powered Developer Dashboard built with Next.js 16 that leverages the Model Context Protocol (MCP) to provide intelligent insights into your Next.js application.

🚀 Features

📊 Dashboard Home

• Route Inspector: View all routes with metadata (static, dynamic, API)
• Error Monitor: Real-time error tracking with AI-suggested fixes
• Cache Analyzer: Visual caching strategies and performance metrics
• Performance Metrics: Build times, Core Web Vitals, response times
• Stats Overview: Quick insights into your application health

🤖 AI Assistant

• Natural language queries about your application
• Access to MCP tools for deep introspection
• Contextual suggestions and optimizations
• Code snippet recommendations

🔧 MCP Configuration

• Server status monitoring
• Available MCP tools documentation
• Configuration guides for AI agents
• Example prompts and use cases

⚙️ Settings

• Dashboard preferences
• AI assistant configuration
• MCP integration settings

🛠️ Tech Stack

• Next.js 16 - App Router with built-in MCP support
• React 19 - Server Components
• TypeScript - Type-safe development
• Tailwind CSS - Modern, responsive styling
• shadcn/ui - Beautiful, accessible components
• Model Context Protocol (MCP) - AI agent integration

📦 Installation

1. Install dependencies: ```bash npm install ```

2. Set up environment variables (optional): ```bash cp .env.local.example .env.local ```

3. Run the development server: ```bash npm run dev ```

4. Open your browser: Navigate to http://localhost:3000

🔌 MCP Configuration

Enable MCP in Next.js

The MCP server is already enabled in `next.config.ts`:

```typescript const nextConfig: NextConfig = { experimental: { mcpServer: true, }, }; ```

Configure MCP Client (for AI Agents)

Create a `.mcp/config.json` file:

```json { "mcpServers": { "next-devtools": { "command": "npx", "args": ["-y", "next-devtools-mcp@latest"] }, "next-app": { "url": "http://localhost:3000/api/mcp", "transport": "http" } } } ```

🎯 Available MCP Tools

The dashboard exposes the following MCP tools for AI agents:

1. get_routes - List all application routes with metadata
2. get_errors - Fetch error logs from the application
3. get_cache_status - Get caching information for routes
4. get_performance_metrics - Analyze performance data
5. analyze_route - AI analysis of a specific route
6. suggest_optimization - Get AI optimization suggestions

💬 Example AI Agent Prompts

Try these prompts with your AI coding assistant:

• "What routes are not using caching?"
• "Show me all errors from the last hour"
• "Analyze the performance of /api/users route"
• "Suggest optimizations for my application"
• "Which routes are using SSR vs SSG?"
• "What's causing the slow response time on /api/data?"

📁 Project Structure

``` /app /api /mcp # MCP endpoints /chat # AI chat endpoint /mcp-config # MCP configuration page /settings # Settings page layout.tsx # Root layout page.tsx # Dashboard home /components /dashboard # Dashboard components /ui # UI components (shadcn) /lib mcp-client.ts # MCP client utilities mock-data.ts # Mock data generators utils.ts # Utility functions /types mcp.ts # MCP type definitions dashboard.ts # Dashboard types ```

🎨 Features Showcase

Route Inspector

• Color-coded status indicators
• Route type badges (Static, Dynamic, API)
• Cache status visualization
• Rendering strategy display

Error Monitor

• Severity-based categorization
• Stack trace viewer
• Frequency tracking
• Timestamp information

Cache Analyzer

• Hit/miss ratio visualization
• Revalidation time tracking
• Cache size metrics
• Route-specific insights

Performance Metrics

• Build time tracking
• Core Web Vitals (LCP, FID, CLS)
• Route response times
• Bundle size analysis

AI Chat Assistant

• Real-time streaming responses
• Context-aware suggestions
• Code snippet generation
• MCP tool integration

🔒 Security Notes

• MCP is enabled for development only by default
• Do not expose MCP endpoints in production without authentication
• API keys should be stored in environment variables
• Review MCP tool permissions before deployment

🚀 Deployment

This is a development dashboard. For production use:

1. Disable MCP in production or add authentication
2. Set up proper error logging (e.g., Sentry)
3. Use real performance monitoring tools
4. Configure environment variables securely

📚 Learn More

• Next.js 16 Documentation
• Model Context Protocol
• Next.js MCP Guide
• shadcn/ui Components

🤝 Contributing

This is a demonstration project showcasing Next.js 16's MCP features. Feel free to:

• Report issues
• Suggest improvements
• Add new features
• Enhance AI capabilities

📝 License

MIT License - feel free to use this project as a starting point for your own AI-powered dashboards!

🎉 Acknowledgments

Built with:

• Next.js 16 by Vercel
• Model Context Protocol
• shadcn/ui components
• Tailwind CSS
• Lucide Icons

---

Happy coding with AI! 🚀