# 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.

![Next.js 16](https://img.shields.io/badge/Next.js-16.0-black)
![React 19](https://img.shields.io/badge/React-19.0-blue)
![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)
![MCP](https://img.shields.io/badge/MCP-Enabled-green)

## 🚀 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](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](https://nextjs.org/docs)
- [Model Context Protocol](https://modelcontextprotocol.io)
- [Next.js MCP Guide](https://nextjs.org/docs/app/guides/mcp)
- [shadcn/ui Components](https://ui.shadcn.com)

## 🤝 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! 🚀**