内容
# 🚀 MCP Space Platform
<div align="center">
<img src="./frontend/public/logo.png" alt="MCP Space Logo" width="200"/>
<h2>No-Code AI Tool Builder with Model Context Protocol</h2>
<p> <a href="https://github.com/tharuneshwar-s/mcp-space" target="_blank"><img src="https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github" alt="GitHub Repository"/></a>
<a href="https://mcp.sh/" target="_blank"><img src="https://img.shields.io/badge/Model_Context_Protocol-7C4DFF?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci16YXAiPjxwb2x5Z29uIHBvaW50cz0iMTMgMiAzIDE0IDEyIDE0IDE1IDIyIDIyIDEwIDEwIDEwIj48L3BvbHlnb24+PC9zdmc+" alt="Model Context Protocol"/></a>
<a href="https://ai.google.dev/docs/agents_api" target="_blank"><img src="https://img.shields.io/badge/Google_ADK-EA4335?style=for-the-badge&logo=google&logoColor=white" alt="Google ADK"/></a>
<a href="https://nextjs.org/" target="_blank"><img src="https://img.shields.io/badge/Next.js_14+-000000?style=for-the-badge&logo=next.js" alt="Next.js"/></a>
<a href="https://supabase.com/" target="_blank"><img src="https://img.shields.io/badge/Supabase-3ECF8E?style=for-the-badge&logo=supabase&logoColor=white" alt="Supabase"/></a>
<a href="https://www.cloudflare.com/" target="_blank"><img src="https://img.shields.io/badge/Cloudflare-F38020?style=for-the-badge&logo=cloudflare&logoColor=white" alt="Cloudflare"/></a>
</p>
</div>
## 🌟 概述
<div align="center">
<img src="./public/images/mcp-space-overview.svg" alt="MCP Space Platform Overview" width="80%"/>
</div>
MCP Space 是一个完整的平台，用于使用 Model Context Protocol (MCP) 构建和部署 AI 工具。该系统使开发人员能够通过直观的聊天界面创建强大的 AI 代理，而无需编写代码，然后只需单击一下即可将它们部署到 Cloudflare Workers。
该平台由两个主要组件组成：
1. **Frontend Application**：用于设计、管理和部署 MCP Server 的 Next.js Web 界面
2. **Google ADK Backend**：一个 AI 代理系统，用于根据用户需求生成 MCP Server 实现
## ✨ 主要功能
<div align="center">
<table>
<tr>
<td align="center">💬</td>
<td><strong>AI-Assisted Development</strong>：通过与我们 Gemini 驱动的助手聊天来创建您的 MCP Server</td>
</tr>
<tr>
<td align="center">🔄</td>
<td><strong>Orchestrated Workflow</strong>：逐步指导完成开发过程</td>
</tr>
<tr>
<td align="center">🛠️</td>
<td><strong>Visual Tool Management</strong>：使用直观的 UI 配置、测试和管理 MCP 工具</td>
</tr>
<tr>
<td align="center">📝</td>
<td><strong>Automatic Code Generation</strong>：创建 TypeScript MCP Server 实现</td>
</tr>
<tr>
<td align="center">🔑</td>
<td><strong>Environment Management</strong>：安全地管理 API 密钥和环境变量</td>
</tr>
<tr>
<td align="center">🚀</td>
<td><strong>One-Click Deployment</strong>：立即将您的 MCP Server 部署到 Cloudflare Workers</td>
</tr>
<tr>
<td align="center">💾</td>
<td><strong>Persistent Storage</strong>：所有项目数据都安全地存储在 Supabase 中</td>
</tr>
<tr>
<td align="center">✨</td>
<td><strong>Modern UI</strong>：具有响应式设计的精美太空主题界面</td>
</tr>
</table>
</div>
## 🏗️ 系统架构
<div align="center">
<img src="./google-adk/public/images/architecture-diagram.svg" alt="Architecture Diagram" width="80%"/>
</div>
MCP Space 平台结合了多种技术，以提供无缝体验：
1. **User Interface Layer**：
- 带有 TypeScript 的 Next.js 14+ 前端
- 用于状态管理的 Redux
- 带有 shadcn/ui 组件的 Tailwind CSS
- 实时更新和响应式设计
2. **AI Agent Layer**：
- Google Agent Development Kit (ADK)
- 用于自然语言处理的 Gemini API
- 顺序代理编排
- 信息收集和代码生成
3. **Storage & Authentication Layer**：
- Supabase PostgreSQL 数据库
- Google OAuth 身份验证
- 安全的环境变量管理
- 持久部署跟踪
4. **Deployment Layer**：
- 用于服务器托管的 Cloudflare Workers
- 自动构建和部署管道
- MCP 协议合规性测试
- 部署状态监控
## 📁 项目结构
MCP Space 项目分为两个主要目录：
### Frontend Application (`/frontend`)
```
frontend/
├── 📱 src/ # Next.js application source
│ ├── 🧩 app/ # Next.js App Router pages
│ ├── 🧱 components/ # React components
│ ├── 📚 lib/ # Core functionality
│ └── 🛠️ utils/ # Utility services
├── 🖼️ public/ # Static assets
└── 📊 supabase/ # Database configuration
```
### Google ADK Backend (`/google-adk`)
```
google-adk/
├── 📋 manager/ # Agent management system
│ ├── 🔧 config/ # Configuration utilities
│ ├── 📄 schema/ # Data schemas
│ └── 🤖 sub_agents/ # Specialized AI agents
└── 🖼️ public/ # Static assets and images
```
## 🎬 演示视频
<div align="center">
https://github.com/user-attachments/assets/efa11737-023b-42d1-916b-8b9cc592420f
</div>
## 🚀 开始使用
### 前提条件
- Node.js 18+ (for Frontend)
- Python 3.9+ (for Google ADK)
- 具有 Gemini API 访问权限的 Google Cloud 帐户
- Supabase 帐户
### 运行前端
```bash
# Clone the repository
git clone https://github.com/tharuneshwar-s/mcp-space.git
cd mcp-space/frontend
# Install dependencies
npm install
# Set up environment variables
cp .env.local.example .env.local
# Edit .env.local with your API keys
# Start the development server
npm run dev
```
访问 [http://localhost:3000](http://localhost:3000) 以访问该应用程序。
### 运行 Google ADK 后端
```bash
# Navigate to the ADK directory
cd mcp-space/google-adk
# Install dependencies
pip install -r requirements.txt
# Set up environment variables
# Create .env file with required API keys
# Start the ADK web server
adk web --session_db_url="postgresql+psycopg2://{DB_USERNAME}:{DB_PASSWORD}@{DB_HOST}:{DB_PORT}/{DB_NAME}" --allow_origins="*"
```
ADK 服务器将在 [http://localhost:8080](http://localhost:8080) 上可用。
## 🌐 集成流程
<div align="center">
<img src="./google-adk/public/images/integration.svg" alt="Integration Flow" width="80%"/>
</div>
前端和后端组件协同工作以提供无缝体验：
1. **User starts in the Frontend**：验证并开始一个新的 MCP Server 项目
2. **Google ADK conversation begins**：用户向 AI 助手解释他们的需求
3. **Information Collection**：系统收集 MCP Server 的规范
4. **Code Generation**：生成完整的 TypeScript 实现
5. **Configuration**：配置环境变量和设置
6. **Deployment**：服务器已构建并部署到 Cloudflare Workers
7. **Testing & Monitoring**：测试和监控已部署的服务器
## 📚 文档
有关更多详细信息，请参阅每个组件的各个 README 文件：
- [Frontend Documentation](./frontend/README.md)
- [Google ADK Documentation](./google-adk/README.md)
## 👥 贡献
<div align="center">
<img src="./frontend/public/images/frontend-contribution.svg" alt="Contribution Process" width="80%"/>
</div>
欢迎贡献！请按照以下步骤操作：
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📜 许可证
本项目根据 MIT 许可证获得许可。
<div align="center">
<p>
<b>Made with ❤️ by the MCP Space Team</b>
</p>
<img src="./frontend/public/images/stars-bg.svg" alt="Stars" width="100%"/>
</div>
