Next Js MCP Server Example
No description available
Ask AI about Next Js MCP Server Example
Powered by Claude Β· Grounded in docs
I know everything about Next Js MCP Server Example. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
AI-Powered Developer Dashboard
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
-
Install dependencies: ```bash npm install ```
-
Set up environment variables (optional): ```bash cp .env.local.example .env.local ```
-
Run the development server: ```bash npm run dev ```
-
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:
- get_routes - List all application routes with metadata
- get_errors - Fetch error logs from the application
- get_cache_status - Get caching information for routes
- get_performance_metrics - Analyze performance data
- analyze_route - AI analysis of a specific route
- 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:
- Disable MCP in production or add authentication
- Set up proper error logging (e.g., Sentry)
- Use real performance monitoring tools
- Configure environment variables securely
π Learn More
π€ 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! π
