This application is an interactive portfolio website featuring a chatbot that simulates conversations with Rithish Jakkireddy. Visitors can ask questions about Rithish's professional background, skills, and experience, with the chatbot responding as if it were Rithish himself. The chatbot is powered by Google's Gemini AI model, ensuring natural, conversational responses based on resume data.
https://chatbot-nextjs-rj.vercel.app
- Chat Interface: Engage in natural conversation with a chatbot that represents Rithish
- Resume-Informed Responses: AI responses based on actual resume data for accurate information
- Real-time Interaction: Instant responses with typing indicators for a better user experience
- Mobile-Responsive Design: Optimized for both desktop and mobile devices
- Expandable Chat Window: Chat that can be minimized or expanded based on user preference
- Frontend: React 19, Next.js 15 with App Router
- AI Integration: Google Generative AI (Gemini 2.0 Flash model)
- Styling: TailwindCSS 4
- Language: TypeScript
- Node.js 18.x or higher
- Google Gemini API key (Get it here)
- Clone the repository
- Create a
.env.localfile in the project root with:
GEMINI_API_KEY=your_gemini_api_key_here
npm installnpm run devOpen http://localhost:3000 with your browser to see the application.
npm run build
npm start/src/components/ChatBot.tsx- Main chatbot interface component/src/lib/gemini.ts- Google Generative AI integration/src/lib/chat-service.ts- Service for managing chat interactions/src/lib/resume-data.ts- Resume data used to inform chatbot responses/src/app/api/chat/route.ts- API route handling chat requests/src/types/chat.ts- TypeScript definitions for chat functionality
To customize this chatbot for your own portfolio:
- Update
/src/lib/resume-data.tswith your personal information - Adjust the system instructions in
/src/lib/gemini.tsto reflect your identity - Modify the UI components in
/src/components/ChatBot.tsxas needed
This Next.js app can be deployed to Vercel with minimal configuration:
Remember to add your GEMINI_API_KEY to the environment variables in your Vercel project settings.
Rithish Jakkireddy - rithishjakkireddy@gmail.com