AI个人作品集后端服务

一个基于FastAPI和Python的智能后端服务,利用Google Gemini 2.0 Flash和Model Context Protocol (MCP)动态获取GitHub统计数据和专业背景信息,为个人作品集网站提供AI聊天功能。

  • by Chauhan-yuvraj
  • Python
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 Chauhan-yuvraj/mcp-for-portfolio

使用说明

以下是专业人士 README.md 后端和前端的文件。


1.后端自述

地点: my-portfolio-ai-backend/README.md

# 🧠 MCP AI Portfolio Backend

This is the intelligent backend for my personal portfolio website. It leverages **Google Gemini 2.0 Flash** and the **Model Context Protocol (MCP)** to create a "living" AI agent that knows everything about my professional background, GitHub stats, and blogs.

Built with **FastAPI** and **Python**, it acts as a bridge between the frontend and the LLM, enabling tool calling and real-time data fetching.

## 🚀 Features

- **MCP Architecture:** Uses Anthropic's Model Context Protocol to standardize tool usage.
- **Single Source of Truth:** Reads data dynamically from modular Markdown files (`data/`).
- **Live GitHub Stats:** Fetches real-time stars, repositories, and streak data using the GitHub API.
- **Context Aware:** Handles user history and remembers names across sessions.
- **Gemini 2.0 Flash:** Powered by Google's latest high-speed model.

## 📂 Project Structure

```text
/
├── main.py            # FastAPI entry point & Chat Logic
├── server.py          # MCP Server & Tool Definitions
├── data/              # The Knowledge Base (Markdown)
│   ├── about.md       # Bio, Contact, Skills
│   ├── experience.md  # Work History
│   ├── projects.md    # Static Projects List
│   └── blogs.md       # Blog Links
├── .env               # Secrets (Not on GitHub)
└── requirements.txt   # Dependencies

🛠️ 安装和设置

  1. 克隆存储库:

    git clone <repo-url>
    cd my-portfolio-ai-backend
    
  2. 创建虚拟环境(可选但推荐):

    python -m venv venv
    source venv/bin/activate  # On Windows: venv\Scripts\activate
    
  3. 安装依赖项:

    pip install -r requirements.txt
    
  4. 设置环境变量: 创建一个 .env 根目录中的文件:

    GOOGLE_API_KEY=your_gemini_api_key
    GITHUB_TOKEN=your_github_classic_token
    GITHUB_USERNAME=Chauhan-yuvraj
    DEV_TO_USER=uvizhere
    
  5. 运行服务器:

    uvicorn main:app --reload
    

    API将在 http://127.0.0.1:8000/chat.

📡 API端点

发布 /chat

有效载荷:

{
  "message": "What is his GitHub streak?",
  "username": "Aditya",
  "history": [
    {"role": "user", "content": "Hi"},
    {"role": "model", "content": "Hello Aditya!"}
  ]
}

☁️ 部署(渲染)

  1. 将repo连接到Render。
  2. 选择 Python 3 运行时间。
  3. 构建命令: pip install -r requirements.txt
  4. 启动命令: uvicorn main:app --host 0.0.0.0 --port $PORT
  5. 从您的 .env 文件。


---

### 2. Frontend README
**Location:** `my-portfolio-frontend/README.md` (or your root folder)

```markdown
# 🎨 Yuvraj's Portfolio & AI Chatbot

A modern, highly interactive portfolio website built with **Next.js**, **TypeScript**, and **Tailwind CSS**. 

The highlight of this project is the integrated **AI Assistant (UV)**. Unlike standard chatbots, UV uses the **Model Context Protocol (MCP)** to fetch real-time data about my GitHub activity, read my resume, and answer questions about my specific tech stack.

## ✨ Key Features

- **🤖 AI Agent Integration:** Embeds a custom MCP-powered chatbot that can browse my projects and stats.
- **💾 Persistent Memory:** Remembers the user's name across sessions using LocalStorage.
- **📱 Responsive Design:** Features a dedicated mobile drawer for the chat interface.
- **🎭 Animations:** Smooth transitions and "dust" text effects using **Framer Motion**.
- **🖼️ Dynamic Avatars:** Generates custom pixel-art avatars for users via DiceBear API.

## 🛠️ Tech Stack

- **Framework:** Next.js 14 (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **Animations:** Framer Motion
- **Icons:** Lucide React
- **Backend:** Python (FastAPI + MCP) [Hosted separately]

## 🚀 Getting Started

1. **Clone the repository:**
   ```bash
   git clone <repo-url>
   cd my-portfolio
  1. 安装依赖项:

    npm install
    # or
    yarn install
    
  2. 配置后端: 打开 src/services/chatService.ts 并更新 API_URL 指向您的后端:

    const API_URL = "http://127.0.0.1:8000/chat"; // Local
    // OR
    const API_URL = "https://your-backend.onrender.com/chat"; // Production
    
  3. 运行开发服务器:

    npm run dev
    
  4. 打开 http://localhost:3000 使用您的浏览器。

📂 架构概述

  1. 用户提问 (例如。, “列出他的repos”).
  2. 前端 将消息+历史记录发送到 FastAPI后端.
  3. 后端 初始化 Gemini 2.0代理 系统提示。
  4. 双子座 决定它需要一个工具(get_github_repos)并请求它。
  5. MCP服务器 执行Python函数从GitHub API获取数据。
  6. 双子座 总结原始数据并将自然响应发送回 前端.

📄 许可证

该项目是开源的,可在MIT许可证下使用。