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

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 (Sta

... View full README on GitHub