Binal's AI-Powered Resume Platform
A modern, interactive resume website with AI-powered chat functionality using Next.js 15, Upstash Vector Database, and MCP (Model Context Protocol) integration for Claude Desktop.
🚀 Features
- 📱 Professional Resume Website: Modern, responsive design optimized for recruiters
- 🤖 Interactive AI Chat: Ask questions about Binal's background, skills, and experience
- 🔍 RAG-Powered Search: Vector database search through comprehensive professional data
- 🖨️ Print-Optimized: Professional PDF generation for download
- 💻 MCP Integration: Claude Desktop integration for advanced AI interactions
🛠️ Tech Stack
- Frontend: Next.js 15 with React 19, Tailwind CSS, shadcn/ui
- Backend: Upstash Vector Database for RAG search
- AI Integration: Claude Sonnet via MCP protocol
- Deployment: Vercel-ready configuration
📁 Project Structure
binalmcp/
├── app/
│ ├── actions/ # Server actions for database and MCP
│ ├── api/ # MCP API route
│ ├── resume/ # Professional resume page
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main landing page
├── components/
│ ├── ui/ # shadcn/ui components
│ ├── interactive-resume.tsx
│ ├── mcp-setup-guide.tsx
│ └── test-rag-search.tsx
├── lib/
│ └── rag-search.ts # Vector database search logic
├── .env.local # Environment variables
└── package.json
🔧 Setup & Installation
Prerequisites
- Node.js 18+
- pnpm package manager
- Upstash Vector Database account
1. Environment Setup
Create .env.local with your Upstash credentials:
UPSTASH_VECTOR_REST_URL="your_upstash_vector_url"
UPSTASH_VECTOR_REST_TOKEN="your_upstash_vector_token"
OPENAI_API_KEY="your_openai_api_key"
2. Install Dependencies
pnpm install
3. Populate Database
The database is already populated with Binal's professional data. To repopulate if needed, use the MCP Setup Guide on the website.
4. Run Development Server
pnpm dev
Visit http://localhost:3000 to see the application.
🏗️ How It Works
This application uses mcp-handler and Upstash Vector to provide seamless RAG-powered search integration between web applications and AI assistants like Claude Desktop.
Architecture
Claude Desktop → Transport Protocol → /api/[transport] → Shared RAG Logic (/lib/rag-search.ts)
Web Interface → Server Actions → Shared RAG Logic (/lib/rag-search.ts)
↓
Upstash Vector Database
- Claude Desktop connects via various transport protocols (SSE, stdio, etc.)
- Transport Layer handles the MCP protocol communication
- MCP Handler processes tool calls and invokes shared RAG search logic
- RAG Search (
/lib/rag-search.ts) contains vector search and result formatting - Upstash Vector provides semantic search capabilities with embeddings
- Server Actions (for web) call the same shared RAG logic directly
Key Components
lib/rag-search.ts: Shared RAG search logic, schema, and tool definitionsapp/api/[transport]/route.ts: MCP server endpoint using mcp-handler + shared logicapp/actions/mcp-actions.ts: Server actions that use the shared RAG search logicapp/page.tsx: Beautiful web interface with setup instructions and testingcomponents/: Reusable shadcn/ui components for the interfacedata/: Sample data structure and population guidelines
Web Interface Benefits
The web interface uses Next.js Server Actions that import the same shared logic as the MCP server:
- ✅ Same Zod schema validation (
lib/rag-search.ts) - ✅ Identical search algorithm (single
searchBinalKnowledge()function) - ✅ Consistent output formatting (same result structure)
- ✅ Shared tool definitions (same name, description, schema)
- ✅ True single source of truth architecture
- MCP Tools:
search_binal_knowledgetool with Zod validation for parameters
🚀 Deployment to Vercel
Option 1: Deploy Button (Recommended)
Option 2: Manual Deployment
-
Connect to Vercel:
pnpm i -g vercel vercel -
Add Environment Variables: In your Vercel dashboard, add:
UPSTASH_VECTOR_REST_URLUPSTASH_VECTOR_REST_TOKEN
-
Update Claude Desktop Config: Replace
http://localhost:3000with your Vercel URL:{ "mcpServers": { "binal-digital-twin": { "command": "npx", "args": [ "-y", "mcp-remote", "https://your-app.vercel.app/api/mcp" ] } } } -
Restart Claude Desktop to use the deployed version
🛠️ Technology Stack
- Framework: Next.js 15 with App Router
- UI Library: shadcn/ui components
- Styling: Tailwind CSS with CSS variables
- Vector Database: Upstash Vector for RAG search
- MCP Integration: mcp-handler for HTTP-based MCP protocol
- MCP Bridge: mcp-remote for Claude Desktop connectivity
- Validation: Zod for type-safe parameter validation
- Icons: Lucide React for beautiful icons
- Deployment: Vercel platform
🎯 Use Cases
- 🎤 Technical Interviews: Learn about Binal's technical expertise and experience
- 🤝 Project Collaboration: Understand Binal's skills for team projects
- 🌐 Professional Networking: Get to know Binal's background and interests
- 📊 Skill Assessment: Evaluate technical competencies and experience levels
- 🤖 AI-Powered CV: Interactive resume experience via Claude Desktop
- 🎓 Educational Tool: Demonstrate RAG and vector search technologies
🤝 Contributing
Contributions are welcome! This project is open source and MIT licensed.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
📚 Learn More
- Model Context Protocol - Official MCP documentation
- mcp-handler - The HTTP-based MCP handler used in this project
- mcp-remote - Bridge tool for Claude Desktop connectivity
- Upstash Vector - Serverless vector database documentation
- Claude Desktop - Download and setup guide
- Next.js Documentation - Learn about the framework
📄 License
MIT License - see LICENSE file for details.
👨💻 Author
Created by Binal as a digital twin RAG search server
⭐ If you find this project useful, please consider giving it a star on GitHub!
Built with ❤️ using Next.js, shadcn/ui, Upstash Vector, and the Model Context Protocol