MCP Resume Chat Server

"use client"; import { useState } from "react"; import ChatInterface from "./components/ChatInterface"; import EmailForm from "./components/EmailForm"; import ResumeViewer from "./components/ResumeViewer"; export default function Home() { const [activeTab, setActiveTab] = useState<"chat" | "email" | "resume">( "chat" ); return ( <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800"> <div className="container mx-auto px-4 py-8"> {/* Header */} <div className="text-center mb-8"> <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4"> MCP Resume Chat Server </h1> <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto"> A Model Context Protocol server that can chat about your resume and send email notifications. Perfect for SE interviews and showcasing MCP capabilities. </p> </div> {/* Navigation Tabs */} <div className="flex justify-center mb-8"> <div className="bg-white dark:bg-gray-800 rounded-lg p-1 shadow-lg"> <button onClick={() => setActiveTab("chat")} className={`px-6 py-3 rounded-md font-medium transition-all ${ activeTab === "chat" ? "bg-blue-600 text-white shadow-md" : "text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400" }`} > 💬 Resume Chat </button> <button onClick={() => setActiveTab("email")} className={`px-6 py-3 rounded-md font-medium transition-all ${ activeTab === "email" ? "bg-blue-600 text-white shadow-md" : "text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400" }`} > 📧 Email Notifications </button> <button onClick={() => setActiveTab("resume")} className={`px-6 py-3 rounded-md font-medium transition-all ${ activeTab === "resume" ? "bg-blue-600 text-white shadow-md" : "text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400" }`} > 📄 View Resume </button> </div> </div> {/* Content */} <div className="max-w-4xl mx-auto"> {activeTab === "chat" && <ChatInterface />} {activeTab === "email" && <EmailForm />} {activeTab === "resume" && <ResumeViewer />} </div> {/* Footer */} <footer className="text-center mt-12 text-gray-500 dark:text-gray-400"> <p>Built with Next.js, TypeScript, and Model Context Protocol</p> </footer> </div> </div> ); }