https://github.com/tharuneshwar-s/mcp-space
MCP Space is a no-code platform for building and deploying AI tools using the Model Context Protocol (MCP). Create powerful AI agents through an intuitive chat interface without writing code, then deploy with one click to Cloudflare Workers. Combines a Next.js frontend with Google ADK backend for a seamless AI development experience.
https://github.com/tharuneshwar-s/mcp-space
ai-tools cloudflare-workers gemini-api google-adk mcp model-context-protocol nextjs no-code no-code-platform supabase supabase-auth typescript
Last synced: 2 months ago
JSON representation
MCP Space is a no-code platform for building and deploying AI tools using the Model Context Protocol (MCP). Create powerful AI agents through an intuitive chat interface without writing code, then deploy with one click to Cloudflare Workers. Combines a Next.js frontend with Google ADK backend for a seamless AI development experience.
- Host: GitHub
- URL: https://github.com/tharuneshwar-s/mcp-space
- Owner: tharuneshwar-s
- Created: 2025-05-21T07:04:44.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-05-21T10:15:22.000Z (5 months ago)
- Last Synced: 2025-06-04T16:06:52.876Z (4 months ago)
- Topics: ai-tools, cloudflare-workers, gemini-api, google-adk, mcp, model-context-protocol, nextjs, no-code, no-code-platform, supabase, supabase-auth, typescript
- Language: TypeScript
- Homepage:
- Size: 47.4 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 MCP Space Platform
No-Code AI Tool Builder with Model Context Protocol
## 🌟 Overview
MCP Space is a complete platform for building and deploying AI tools using the Model Context Protocol (MCP). The system enables developers to create powerful AI agents through an intuitive chat interface without writing code, then deploy them with a single click to Cloudflare Workers.
The platform consists of two main components:
1. **Frontend Application**: A Next.js web interface for designing, managing, and deploying MCP servers
2. **Google ADK Backend**: An AI agent system that generates MCP server implementations based on user requirements
## ✨ Key Features
💬
AI-Assisted Development: Create your MCP server by chatting with our Gemini-powered assistant
🔄
Orchestrated Workflow: Step-by-step guidance through the development process
🛠️
Visual Tool Management: Configure, test, and manage MCP tools with an intuitive UI
📝
Automatic Code Generation: Creates TypeScript MCP server implementations
🔑
Environment Management: Securely manage API keys and environment variables
🚀
One-Click Deployment: Deploy your MCP server to Cloudflare Workers instantly
💾
Persistent Storage: All project data stored securely in Supabase
✨
Modern UI: Beautiful space-themed interface with responsive design
## 🏗️ System Architecture
The MCP Space platform combines multiple technologies to provide a seamless experience:
1. **User Interface Layer**:
- Next.js 14+ frontend with TypeScript
- Redux for state management
- Tailwind CSS with shadcn/ui components
- Real-time updates and responsive design
2. **AI Agent Layer**:
- Google Agent Development Kit (ADK)
- Gemini API for natural language processing
- Sequential agent orchestration
- Information collection and code generation
3. **Storage & Authentication Layer**:
- Supabase PostgreSQL database
- Google OAuth authentication
- Secure environment variable management
- Persistent deployment tracking
4. **Deployment Layer**:
- Cloudflare Workers for server hosting
- Automatic build and deployment pipeline
- MCP protocol compliance testing
- Deployment status monitoring
## 📁 Project Structure
The MCP Space project is divided into two main directories:
### 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
```
## 🎬 Demo Video
https://github.com/user-attachments/assets/efa11737-023b-42d1-916b-8b9cc592420f
## 🚀 Getting Started
### Prerequisites
- Node.js 18+ (for Frontend)
- Python 3.9+ (for Google ADK)
- Google Cloud account with Gemini API access
- Supabase account
### Running the Frontend
```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
```
Visit [http://localhost:3000](http://localhost:3000) to access the application.
### Running the Google ADK Backend
```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="*"
```
The ADK server will be available at [http://localhost:8080](http://localhost:8080).
## 🌐 Integration Flow
The frontend and backend components work together to provide a seamless experience:
1. **User starts in the Frontend**: Authenticates and begins a new MCP server project
2. **Google ADK conversation begins**: User explains their requirements to the AI assistant
3. **Information Collection**: The system gathers specifications for the MCP server
4. **Code Generation**: Complete TypeScript implementation is generated
5. **Configuration**: Environment variables and settings are configured
6. **Deployment**: The server is built and deployed to Cloudflare Workers
7. **Testing & Monitoring**: The deployed server is tested and monitored
## 📚 Documentation
For more detailed information, see the individual README files for each component:
- [Frontend Documentation](./frontend/README.md)
- [Google ADK Documentation](./google-adk/README.md)
## 👥 Contributing
Contributions are welcome! Please follow these steps:
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
## 📜 License
This project is licensed under the MIT License.
Made with ❤️ by the MCP Space Team
