使用说明
以下是专业人士 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
🛠️ 安装和设置
-
克隆存储库:
git clone <repo-url> cd my-portfolio-ai-backend -
创建虚拟环境(可选但推荐):
python -m venv venv source venv/bin/activate # On Windows: venv\Scripts\activate -
安装依赖项:
pip install -r requirements.txt -
设置环境变量: 创建一个
.env根目录中的文件:GOOGLE_API_KEY=your_gemini_api_key GITHUB_TOKEN=your_github_classic_token GITHUB_USERNAME=Chauhan-yuvraj DEV_TO_USER=uvizhere -
运行服务器:
uvicorn main:app --reloadAPI将在
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!"}
]
}
☁️ 部署(渲染)
- 将repo连接到Render。
- 选择 Python 3 运行时间。
- 构建命令:
pip install -r requirements.txt - 启动命令:
uvicorn main:app --host 0.0.0.0 --port $PORT - 从您的
.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
-
安装依赖项:
npm install # or yarn install -
配置后端: 打开
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 -
运行开发服务器:
npm run dev -
打开 http://localhost:3000 使用您的浏览器。
📂 架构概述
- 用户提问 (例如。, “列出他的repos”).
- 前端 将消息+历史记录发送到 FastAPI后端.
- 后端 初始化 Gemini 2.0代理 系统提示。
- 双子座 决定它需要一个工具(
get_github_repos)并请求它。 - MCP服务器 执行Python函数从GitHub API获取数据。
- 双子座 总结原始数据并将自然响应发送回 前端.
📄 许可证
该项目是开源的,可在MIT许可证下使用。
