MCP Manager Frontend

Modern React dashboard built with Next.js 15, shadcn/ui, and TypeScript.

Features

• Authentication: JWT-based login/register with protected routes
• Project Management: Create and manage MCP projects
• MCP Server Configuration: Add, edit, and test Model Context Protocol servers
• Modern UI: Built with shadcn/ui components and Tailwind CSS
• Form Validation: react-hook-form + zod for robust validation
• Type Safety: Full TypeScript support

Tech Stack

• Framework: Next.js 15 with App Router
• UI Components: shadcn/ui (Radix UI primitives)
• Styling: Tailwind CSS
• Forms: react-hook-form + zod
• HTTP Client: axios
• State Management: React Context API

Getting Started

Install Dependencies

npm install

Environment Setup

Create .env.local:

NEXT_PUBLIC_API_URL=http://localhost:3000/api

Run Development Server

npm run dev

Open http://localhost:3001 in your browser.

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── login/             # Login page
│   ├── dashboard/         # Dashboard page
│   ├── projects/          # Projects list and detail
│   └── layout.tsx         # Root layout
├── components/
│   ├── ui/                # shadcn/ui components
│   ├── auth/              # Authentication components
│   └── dashboard/         # Dashboard components
├── contexts/              # React contexts (Auth)
├── services/              # API service layer
└── lib/                   # Utilities

Available Pages

• / - Home (redirects to login or dashboard)
• /login - Login page
• /dashboard - Main dashboard
• /projects - Projects list
• /projects/new - Create new project
• /projects/[id] - Project detail with MCP servers

API Integration

All API calls are handled through the centralized api service:

import { api } from '@/services/api';

// Login
await api.login(email, password);

// Get projects
const projects = await api.getProjects();

// Create MCP server
await api.createMcpServer(projectId, { name, command, args });

shadcn/ui Components

The following shadcn/ui components are configured:

• Button
• Input
• Label
• Card
• Dialog
• Table
• Toast

Form Validation

Forms use react-hook-form with zod schemas:

const schema = z.object({
  name: z.string().min(1, 'Required'),
  email: z.string().email('Invalid email'),
});

const { register, handleSubmit } = useForm({
  resolver: zodResolver(schema),
});

Protected Routes

Pages requiring authentication use the ProtectedRoute wrapper:

export default function DashboardPage() {
  return (
    <ProtectedRoute>
      {/* Page content */}
    </ProtectedRoute>
  );
}

Build

npm run build

Lint

npm run lint

Format

npm run format

License

MIT