README.mdā¢7.59 kB
# 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:
```env
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
```bash
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
```bash
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
```
1. **Claude Desktop** connects via various transport protocols (SSE, stdio, etc.)
2. **Transport Layer** handles the MCP protocol communication
3. **MCP Handler** processes tool calls and invokes shared RAG search logic
4. **RAG Search** (`/lib/rag-search.ts`) contains vector search and result formatting
5. **Upstash Vector** provides semantic search capabilities with embeddings
6. **Server Actions** (for web) call the same shared RAG logic directly
### Key Components
- **`lib/rag-search.ts`**: Shared RAG search logic, schema, and tool definitions
- **`app/api/[transport]/route.ts`**: MCP server endpoint using mcp-handler + shared logic
- **`app/actions/mcp-actions.ts`**: Server actions that use the shared RAG search logic
- **`app/page.tsx`**: Beautiful web interface with setup instructions and testing
- **`components/`**: Reusable shadcn/ui components for the interface
- **`data/`**: 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_knowledge` tool with Zod validation for parameters
## š Deployment to Vercel
### Option 1: Deploy Button (Recommended)
[](https://vercel.com/new/clone?repository-url=https://github.com/binal182/binalmcp)
### Option 2: Manual Deployment
1. **Connect to Vercel**:
```bash
pnpm i -g vercel
vercel
```
2. **Add Environment Variables**:
In your Vercel dashboard, add:
- `UPSTASH_VECTOR_REST_URL`
- `UPSTASH_VECTOR_REST_TOKEN`
3. **Update Claude Desktop Config**:
Replace `http://localhost:3000` with your Vercel URL:
```json
{
"mcpServers": {
"binal-digital-twin": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://your-app.vercel.app/api/mcp"
]
}
}
}
```
4. **Restart Claude Desktop** to use the deployed version
## š ļø Technology Stack
- **Framework**: [Next.js 15](https://nextjs.org/) with App Router
- **UI Library**: [shadcn/ui](https://ui.shadcn.com/) components
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) with CSS variables
- **Vector Database**: [Upstash Vector](https://upstash.com/docs/vector) for RAG search
- **MCP Integration**: [mcp-handler](https://www.npmjs.com/package/mcp-handler) for HTTP-based MCP protocol
- **MCP Bridge**: [mcp-remote](https://www.npmjs.com/package/mcp-remote) for Claude Desktop connectivity
- **Validation**: [Zod](https://zod.dev/) for type-safe parameter validation
- **Icons**: [Lucide React](https://lucide.dev/) for beautiful icons
- **Deployment**: [Vercel](https://vercel.com/) 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.
1. Fork the repository
2. Create a feature branch: `git checkout -b feature/amazing-feature`
3. Commit changes: `git commit -m 'Add amazing feature'`
4. Push to branch: `git push origin feature/amazing-feature`
5. Open a Pull Request
## š Learn More
- **[Model Context Protocol](https://modelcontextprotocol.io/)** - Official MCP documentation
- **[mcp-handler](https://www.npmjs.com/package/mcp-handler)** - The HTTP-based MCP handler used in this project
- **[mcp-remote](https://www.npmjs.com/package/mcp-remote)** - Bridge tool for Claude Desktop connectivity
- **[Upstash Vector](https://upstash.com/docs/vector)** - Serverless vector database documentation
- **[Claude Desktop](https://claude.ai/download)** - Download and setup guide
- **[Next.js Documentation](https://nextjs.org/docs)** - Learn about the framework
## š License
MIT License - see [LICENSE](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*