MCP Resume Chat Server

"use client"; import { useState, useRef, useEffect } from "react"; interface Message { id: string; role: "user" | "assistant"; content: string; timestamp: Date; } const suggestedQuestions = [ "What is my current position?", "What companies have I worked for?", "What are my main skills?", "What is my educational background?", "What projects have I worked on?", "What was my last role?", "What technologies do I use?", "What are my key achievements?", ]; export default function ChatInterface() { const [messages, setMessages] = useState<Message[]>([]); const [input, setInput] = useState(""); const [isLoading, setIsLoading] = useState(false); const messagesEndRef = useRef<HTMLDivElement>(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(() => { scrollToBottom(); }, [messages]); const sendMessage = async (message: string) => { if (!message.trim() || isLoading) return; const userMessage: Message = { id: Date.now().toString(), role: "user", content: message, timestamp: new Date(), }; setMessages((prev) => [...prev, userMessage]); setInput(""); setIsLoading(true); try { // Simulate MCP server call const response = await simulateMCPServerCall(message); const assistantMessage: Message = { id: (Date.now() + 1).toString(), role: "assistant", content: response, timestamp: new Date(), }; setMessages((prev) => [...prev, assistantMessage]); } catch (error) { const errorMessage: Message = { id: (Date.now() + 1).toString(), role: "assistant", content: "Sorry, I encountered an error. Please make sure the MCP server is running.", timestamp: new Date(), }; setMessages((prev) => [...prev, errorMessage]); } finally { setIsLoading(false); } }; const simulateMCPServerCall = async (question: string): Promise<string> => { // This simulates calling the MCP server // In a real implementation, you would make an HTTP request to your MCP server // Simulate network delay await new Promise((resolve) => setTimeout(resolve, 1000 + Math.random() * 2000) ); // Mock responses based on common questions const questionLower = question.toLowerCase(); if ( questionLower.includes("current position") || questionLower.includes("current role") ) { return `**Answer:** Your current position is Senior Software Engineer at TechCorp Inc. **Confidence:** 95.0% **Sources:** Work Experience You've been in this role since January 2022, where you lead development of microservices architecture and mentor junior developers. Your key achievements include leading a migration that reduced deployment time by 60% and implementing a CI/CD pipeline that reduced bug reports by 40%.`; } if ( questionLower.includes("companies") || questionLower.includes("worked for") ) { return `**Answer:** You have worked for the following companies: 1. **TechCorp Inc.** (Current) - Senior Software Engineer (Jan 2022 - Present) 2. **StartupXYZ** - Full-Stack Developer (Jun 2020 - Dec 2021) 3. **WebDev Solutions** - Frontend Developer (Aug 2019 - May 2020) **Confidence:** 90.0% **Sources:** Work Experience`; } if ( questionLower.includes("skills") || questionLower.includes("technologies") ) { return `**Answer:** Your main skills include: **Programming Languages:** JavaScript, TypeScript, Python **Frontend:** React, CSS3, SASS **Backend:** Node.js, Express.js **Cloud & DevOps:** AWS, Docker, Kubernetes, CI/CD **Databases:** PostgreSQL, MongoDB, Redis **Tools:** Git, Jest, Webpack **Confidence:** 85.0% **Sources:** Skills, Work Experience`; } if ( questionLower.includes("education") || questionLower.includes("degree") ) { return `**Answer:** Your educational background: **Bachelor of Science in Computer Science** from University of California, Berkeley - Duration: September 2015 - May 2019 - GPA: 3.8/4.0 - Achievements: Dean's List for 6 consecutive semesters, President of Computer Science Club **Confidence:** 95.0% **Sources:** Education`; } if (questionLower.includes("projects")) { return `**Answer:** You have worked on several notable projects: 1. **E-commerce Platform** (Jan 2023 - Jun 2023) - Full-stack e-commerce application with payment integration - Technologies: React, Node.js, PostgreSQL, Stripe API, AWS 2. **Task Management App** (Aug 2022 - Dec 2022) - Collaborative task management tool with real-time updates - Technologies: React, Socket.io, MongoDB, Express.js **Confidence:** 80.0% **Sources:** Projects`; } if ( questionLower.includes("last role") || questionLower.includes("previous position") ) { return `**Answer:** Your last role was Full-Stack Developer at StartupXYZ from June 2020 to December 2021. In this position, you developed and maintained web applications for a fast-growing startup. Your key achievements included building a customer dashboard that increased user engagement by 35% and optimizing database queries to improve page load times by 50%. **Confidence:** 90.0% **Sources:** Work Experience`; } if (questionLower.includes("achievements")) { return `**Answer:** Your key achievements include: **At TechCorp Inc. (Current):** - Led migration of monolithic application to microservices, reducing deployment time by 60% - Implemented CI/CD pipeline that reduced bug reports by 40% - Mentored 3 junior developers, helping them advance to mid-level positions **At StartupXYZ:** - Built customer dashboard that increased user engagement by 35% - Optimized database queries, improving page load times by 50% **At WebDev Solutions:** - Created reusable component library used across 5+ projects - Improved accessibility compliance to WCAG 2.1 AA standards **Confidence:** 85.0% **Sources:** Work Experience`; } // Default response return `**Answer:** I can help you with questions about your resume, work experience, skills, education, and projects. Please ask me something more specific! **Confidence:** 50.0% **Sources:** General Resume Information Try asking about your current position, previous companies, skills, education, or projects.`; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); sendMessage(input); }; const handleSuggestedQuestion = (question: string) => { sendMessage(question); }; return ( <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg h-[600px] flex flex-col"> {/* Header */} <div className="p-4 border-b border-gray-200 dark:border-gray-700"> <h2 className="text-xl font-semibold text-gray-900 dark:text-white"> 💬 Resume Chat </h2> <p className="text-sm text-gray-600 dark:text-gray-400"> Ask questions about your resume and get AI-powered answers </p> </div> {/* Messages */} <div className="flex-1 overflow-y-auto p-4 space-y-4"> {messages.length === 0 && ( <div className="text-center text-gray-500 dark:text-gray-400"> <p className="mb-4">Welcome! Ask me anything about your resume.</p> <div className="grid grid-cols-1 md:grid-cols-2 gap-2"> {suggestedQuestions.slice(0, 4).map((question, index) => ( <button key={index} onClick={() => handleSuggestedQuestion(question)} className="p-2 text-sm bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors" > {question} </button> ))} </div> </div> )} {messages.map((message) => ( <div key={message.id} className={`flex ${ message.role === "user" ? "justify-end" : "justify-start" }`} > <div className={`max-w-[80%] p-3 rounded-lg ${ message.role === "user" ? "bg-blue-600 text-white" : "bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white" }`} > <div className="whitespace-pre-wrap">{message.content}</div> <div className={`text-xs mt-1 ${ message.role === "user" ? "text-blue-100" : "text-gray-500 dark:text-gray-400" }`} > {message.timestamp.toLocaleTimeString()} </div> </div> </div> ))} {isLoading && ( <div className="flex justify-start"> <div className="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg"> <div className="flex space-x-1"> <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div> <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "0.1s" }} ></div> <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "0.2s" }} ></div> </div> </div> </div> )} <div ref={messagesEndRef} /> </div> {/* Input */} <div className="p-4 border-t border-gray-200 dark:border-gray-700"> <form onSubmit={handleSubmit} className="flex space-x-2"> <input type="text" value={input} onChange={(e) => setInput(e.target.value)} placeholder="Ask about your resume..." className="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white" disabled={isLoading} /> <button type="submit" disabled={isLoading || !input.trim()} className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" > Send </button> </form> </div> </div> ); }