seanpoyner commited on
Commit
f2e427f
ยท
1 Parent(s): 9dc9aa6

Update HF Space README to acknowledge Ranadeep Laskar and emphasize democratizing MCP access

Browse files
Files changed (1) hide show
  1. README.md +213 -98
README.md CHANGED
@@ -13,7 +13,7 @@ tags:
13
  - agents
14
  - gradio
15
  - hackathon
16
- short_description: Build AI agents visually - No code required!
17
  ---
18
 
19
  # ๐Ÿ› Gradio MCP Playground
@@ -22,178 +22,293 @@ short_description: Build AI agents visually - No code required!
22
 
23
  [![Hugging Face Spaces](https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces/seanpoyner/gradio-mcp-playground)
24
  [![GitHub](https://img.shields.io/badge/GitHub-Repository-black)](https://github.com/seanpoyner/gradio-mcp-playground)
25
- [![License](https://img.shields.io/badge/License-Apache%202.0-green.svg)](LICENSE)
26
  [![Hackathon](https://img.shields.io/badge/HF%20MCP%20Hackathon-2025-orange)](https://huggingface.co/hackathon)
27
 
28
- **Transform any Python function into an AI agent in seconds!**
29
 
30
  [Try Demo](https://huggingface.co/spaces/seanpoyner/gradio-mcp-playground) | [Documentation](https://github.com/seanpoyner/gradio-mcp-playground/wiki) | [Report Bug](https://github.com/seanpoyner/gradio-mcp-playground/issues)
31
 
32
  </div>
33
 
34
- ## ๐Ÿ† Hugging Face MCP Hackathon Submission
35
 
36
- This project democratizes AI agent development by providing a visual, no-code platform for creating, testing, and deploying MCP (Model Context Protocol) agents. Built with Gradio, it makes agent creation accessible to everyone - from beginners to experts.
37
 
38
- ## โœจ What Makes This Special?
 
 
 
 
39
 
40
- - **๐Ÿš€ Zero to Agent in 30 Seconds** - Choose a template, customize, and deploy
41
- - **๐ŸŽจ Visual Builder** - No coding required with our drag-and-drop interface
42
- - **๐Ÿค– AI-Powered Assistance** - Three specialized AI modes to guide you
43
- - **๐Ÿ”Œ Live MCP Integration** - Connect and test real MCP servers instantly
44
- - **๐Ÿ“ฆ One-Click Deploy** - Deploy to production with a single button
45
 
46
- ## ๐ŸŽฅ Demo Video
47
 
48
- [Watch our 2-minute demo](https://youtu.be/demo-link) to see the playground in action!
49
 
50
- ## ๐ŸŒŸ Key Features
 
 
 
 
 
 
51
 
52
  ### ๐Ÿ› AI Assistant Hub
53
- Three specialized AI assistants help you at every step:
 
 
 
 
54
 
55
- - **Adam (General)** - Your friendly AI companion with MCP superpowers
56
- - **Liam (MCP Agent)** - Expert in MCP development and troubleshooting
57
- - **Arthur (Agent Builder)** - Architect for complex agent systems
58
 
59
- ### ๐Ÿ—๏ธ Visual Server Builder
60
- Create MCP servers without writing code:
 
 
 
 
 
 
 
61
 
62
- - **Template Gallery** - Pre-built templates for common use cases
63
- - **Live Code Generation** - See your Python code as you build
64
- - **Instant Testing** - Test your tools without deployment
65
- - **Custom Templates** - Start from scratch or modify existing ones
 
 
 
66
 
67
  ### ๐Ÿ”Œ MCP Connections
68
  Connect to any MCP server with ease:
69
 
70
- - **Quick Connect** - One-click connection to popular servers
71
- - **Tool Discovery** - Automatically discover available tools
72
- - **Live Testing** - Execute tools and see results in real-time
73
- - **Activity Monitoring** - Track all tool executions
 
 
 
 
 
 
 
74
 
75
- ### ๐Ÿ“ฆ Server Management
76
- Professional-grade server management:
 
 
77
 
78
- - **Dashboard View** - Monitor all your servers at a glance
79
- - **One-Click Deploy** - Deploy to Hugging Face Spaces instantly
80
- - **Version Control** - Track changes and rollback if needed
81
- - **Share & Collaborate** - Share your agents with the community
 
 
 
82
 
83
  ## ๐Ÿš€ Quick Start
84
 
85
- ### Try the Demo (No Installation)
86
 
87
- Visit our [Hugging Face Space](https://huggingface.co/spaces/seanpoyner/gradio-mcp-playground) to try the platform instantly!
88
 
89
  ### Local Installation (Full Features)
90
 
91
  ```bash
92
- # Clone repository
93
  git clone https://github.com/seanpoyner/gradio-mcp-playground
94
  cd gradio-mcp-playground
95
 
96
- # Install dependencies
97
  pip install -e ".[all]"
98
 
99
- # Run the unified dashboard
100
  gmp dashboard
101
 
102
- # Or run with custom port
103
  gmp dashboard --port 8081
104
  ```
105
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
106
  ## ๐Ÿ’ก Use Cases
107
 
108
  ### For Developers
109
- - **Rapid Prototyping** - Test ideas without boilerplate code
110
- - **API Integration** - Wrap any API as an MCP server
111
  - **Tool Development** - Create reusable tools for AI assistants
 
 
112
 
113
- ### For Businesses
114
- - **Custom Assistants** - Build domain-specific AI agents
115
- - **Workflow Automation** - Create multi-step processes
116
- - **Team Collaboration** - Share tools across your organization
117
-
118
- ### For Educators
119
- - **Teaching AI Concepts** - Visual way to explain agent architectures
120
- - **Student Projects** - Let students build without infrastructure worries
121
- - **Interactive Demos** - Show real AI capabilities in action
122
-
123
- ### For Researchers
124
- - **Protocol Testing** - Experiment with MCP implementations
125
- - **Tool Benchmarking** - Compare different approaches
126
- - **Rapid Experimentation** - Test hypotheses quickly
127
 
128
- ## ๐Ÿ“ธ Screenshots
 
 
 
 
129
 
130
- <div align="center">
131
- <img src="https://github.com/seanpoyner/gradio-mcp-playground/assets/demo/assistant.png" width="45%" alt="AI Assistant">
132
- <img src="https://github.com/seanpoyner/gradio-mcp-playground/assets/demo/builder.png" width="45%" alt="Server Builder">
133
- </div>
 
134
 
135
- ## ๐Ÿ› ๏ธ Technical Implementation
136
 
137
- ### Architecture
138
- - **Frontend**: Gradio 4.31.0 with custom themes
139
- - **Backend**: Python with async support
140
- - **Protocol**: Model Context Protocol (MCP)
141
- - **Deployment**: Hugging Face Spaces compatible
142
 
143
- ### Key Technologies
144
- - **Gradio** - Interactive web UI framework
145
- - **MCP** - Standardized protocol for AI tools
146
- - **AsyncIO** - High-performance async operations
147
- - **Pydantic** - Data validation and serialization
148
 
149
- ## ๐ŸŽฏ Why This Matters
 
 
150
 
151
- The Model Context Protocol (MCP) is powerful but can be complex to implement. Our playground removes these barriers:
 
152
 
153
- 1. **Accessibility** - No need to understand protocol details
154
- 2. **Speed** - Build in minutes instead of hours
155
- 3. **Learning** - See how MCP works through examples
156
- 4. **Community** - Share and discover agents easily
157
 
158
- ## ๐Ÿค Contributing
159
 
160
- We welcome contributions! See our [Contributing Guide](CONTRIBUTING.md) for details.
 
161
 
162
- ### Development Setup
 
 
163
 
164
- ```bash
165
- # Install in development mode
166
- pip install -e ".[dev]"
 
167
 
168
- # Run tests
169
- pytest
 
 
 
 
 
 
170
 
171
- # Format code
172
- black .
173
- ruff check .
174
  ```
175
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
176
  ## ๐Ÿ“„ License
177
 
178
- This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file.
179
 
180
  ## ๐Ÿ™ Acknowledgments
181
 
182
- - **Hugging Face** - For hosting and the MCP Hackathon
183
- - **Gradio Team** - For the amazing framework
184
- - **Anthropic** - For the Model Context Protocol
185
- - **Community** - For feedback and contributions
 
 
 
 
 
 
186
 
187
- ## ๐Ÿ“ž Contact & Support
188
 
189
  - **GitHub Issues**: [Report bugs or request features](https://github.com/seanpoyner/gradio-mcp-playground/issues)
190
  - **Discussions**: [Join the conversation](https://huggingface.co/spaces/seanpoyner/gradio-mcp-playground/discussions)
191
- - **Twitter**: [@seanpoyner](https://twitter.com/seanpoyner)
192
 
193
  ---
194
 
195
  <div align="center">
196
- <b>Made with โค๏ธ for the Hugging Face MCP Hackathon 2025</b>
197
  <br>
198
- <i>Empowering everyone to build AI agents</i>
199
  </div>
 
13
  - agents
14
  - gradio
15
  - hackathon
16
+ short_description: Open-source MCP tools without expensive LLM subscriptions!
17
  ---
18
 
19
  # ๐Ÿ› Gradio MCP Playground
 
22
 
23
  [![Hugging Face Spaces](https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces/seanpoyner/gradio-mcp-playground)
24
  [![GitHub](https://img.shields.io/badge/GitHub-Repository-black)](https://github.com/seanpoyner/gradio-mcp-playground)
25
+ [![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
26
  [![Hackathon](https://img.shields.io/badge/HF%20MCP%20Hackathon-2025-orange)](https://huggingface.co/hackathon)
27
 
28
+ **Open-source access to MCP tools without expensive LLM subscriptions**
29
 
30
  [Try Demo](https://huggingface.co/spaces/seanpoyner/gradio-mcp-playground) | [Documentation](https://github.com/seanpoyner/gradio-mcp-playground/wiki) | [Report Bug](https://github.com/seanpoyner/gradio-mcp-playground/issues)
31
 
32
  </div>
33
 
34
+ ## ๐ŸŽฏ Our Mission
35
 
36
+ This project was created to solve a critical problem: **Most MCP tools require expensive LLM API subscriptions**, limiting access for developers, students, and enthusiasts.
37
 
38
+ We believe everyone should be able to:
39
+ - **๐ŸŽ† Experiment with MCP servers** without financial barriers
40
+ - **๐Ÿ‘ฉโ€๐Ÿ’ป Learn AI agent development** through hands-on experience
41
+ - **๐ŸŒˆ Build and deploy tools** using Gradio's intuitive interface
42
+ - **๐Ÿค Contribute to the open-source ecosystem** regardless of budget
43
 
44
+ ## โœจ What is Gradio MCP Playground?
 
 
 
 
45
 
46
+ A comprehensive platform for building, managing, and deploying Model Context Protocol (MCP) servers using Gradio. This playground democratizes access to MCP technology, allowing developers and enthusiasts to "play" with MCP servers, agents, and LLM-tool integrations while showcasing the powerful features of Gradio.
47
 
48
+ ### Key Benefits
49
 
50
+ - **๐Ÿ’ฐ No API Keys Required** - Use the demo features without any LLM subscriptions
51
+ - **๐Ÿš€ Zero to Agent in Minutes** - Create functional MCP servers quickly
52
+ - **๐ŸŽจ Visual Development** - Build complex agents through an intuitive UI
53
+ - **๐Ÿ“š Learning Platform** - Understand MCP concepts through interactive examples
54
+ - **๐ŸŒ Community Driven** - Share and discover agents built by others
55
+
56
+ ## ๐Ÿ† Features Overview
57
 
58
  ### ๐Ÿ› AI Assistant Hub
59
+ Three specialized AI assistants to guide your journey:
60
+
61
+ - **Adam (General Assistant)** - Your friendly companion with access to MCP tools like screenshots, web search, and file operations
62
+ - **Liam (MCP Specialist)** - Expert in MCP development, server creation, and pipeline building
63
+ - **Arthur (Agent Builder)** - Architect for sophisticated autonomous agents and custom implementations
64
 
65
+ ### ๐Ÿ”ง Server Builder
66
+ Create MCP servers without extensive coding:
 
67
 
68
+ - **Quick Create** - Build servers from templates in seconds
69
+ - **Pipeline Builder** - Visual drag-and-drop interface for complex workflows
70
+ - **Templates Gallery** - Pre-built templates for common use cases:
71
+ - Calculator (arithmetic operations)
72
+ - Text Processor (text manipulation)
73
+ - Image Generator (AI image creation)
74
+ - Data Analyzer (CSV/data analysis)
75
+ - Web Scraper (data extraction)
76
+ - API Wrapper (turn any API into MCP)
77
 
78
+ ### ๐Ÿ–ฅ๏ธ Server Management
79
+ Professional-grade server lifecycle management:
80
+
81
+ - **Active Servers** - Monitor running MCP servers in real-time
82
+ - **Server Registry** - Browse and install community servers
83
+ - **Quick Deploy** - One-click deployment to Hugging Face Spaces
84
+ - **Performance Monitoring** - Track server health and usage
85
 
86
  ### ๐Ÿ”Œ MCP Connections
87
  Connect to any MCP server with ease:
88
 
89
+ - **Quick Connect** - Pre-configured connections to popular servers:
90
+ - Filesystem (file operations)
91
+ - Memory (persistent storage)
92
+ - GitHub (repository management)
93
+ - Brave Search (web search)
94
+ - **Custom Connections** - Connect to any MCP server via stdio or SSE
95
+ - **Tool Discovery** - Automatically discover and test available tools
96
+ - **Activity Log** - Track all tool executions and results
97
+
98
+ ### ๐Ÿค– Agent Control Panel
99
+ Build and manage autonomous agents:
100
 
101
+ - **Agent Creation** - Visual interface for building AI agents
102
+ - **Agent Templates** - Start from proven agent architectures
103
+ - **Testing Suite** - Real-time testing and debugging
104
+ - **Deployment Options** - Deploy agents to various platforms
105
 
106
+ ### ๐Ÿ“š Help & Resources
107
+ Comprehensive documentation and support:
108
+
109
+ - **Interactive Tutorials** - Step-by-step guides
110
+ - **API Reference** - Complete documentation
111
+ - **Video Guides** - Visual learning resources
112
+ - **Community Forum** - Get help and share knowledge
113
 
114
  ## ๐Ÿš€ Quick Start
115
 
116
+ ### Try the Demo (This Space)
117
 
118
+ This Hugging Face Space provides a **demo version** showcasing all features. Some functionality is limited in the demo - for full features, install locally.
119
 
120
  ### Local Installation (Full Features)
121
 
122
  ```bash
123
+ # Clone the repository
124
  git clone https://github.com/seanpoyner/gradio-mcp-playground
125
  cd gradio-mcp-playground
126
 
127
+ # Install with all dependencies
128
  pip install -e ".[all]"
129
 
130
+ # Launch the unified dashboard
131
  gmp dashboard
132
 
133
+ # Or start on a custom port
134
  gmp dashboard --port 8081
135
  ```
136
 
137
+ ### CLI Tools
138
+
139
+ Powerful command-line tools for automation:
140
+
141
+ ```bash
142
+ # Create servers from templates
143
+ gmp create calculator my-calc-server
144
+ gmp create image-generator my-image-server
145
+
146
+ # List available templates
147
+ gmp templates
148
+
149
+ # Manage servers
150
+ gmp server list # List all servers
151
+ gmp server start my-server # Start a server
152
+ gmp server stop my-server # Stop a server
153
+
154
+ # Connect to MCP servers
155
+ gmp connect filesystem /path/to/directory
156
+ gmp connect github --token YOUR_GITHUB_TOKEN
157
+
158
+ # Deploy servers
159
+ gmp deploy my-server # Deploy to Hugging Face Spaces
160
+ ```
161
+
162
  ## ๐Ÿ’ก Use Cases
163
 
164
  ### For Developers
165
+ - **Rapid Prototyping** - Test MCP concepts without setup overhead
 
166
  - **Tool Development** - Create reusable tools for AI assistants
167
+ - **API Integration** - Wrap any API as an MCP server
168
+ - **Learning Platform** - Understand MCP through hands-on examples
169
 
170
+ ### For Educators & Students
171
+ - **Free Learning** - No expensive API keys needed
172
+ - **Interactive Teaching** - Demonstrate AI concepts visually
173
+ - **Student Projects** - Build without infrastructure worries
174
+ - **Research Platform** - Experiment with MCP implementations
 
 
 
 
 
 
 
 
 
175
 
176
+ ### For Enthusiasts
177
+ - **Explore MCP** - Play with cutting-edge AI technology
178
+ - **Build Tools** - Create useful automation tools
179
+ - **Share Creations** - Contribute to the community
180
+ - **Learn by Doing** - Hands-on experience with AI agents
181
 
182
+ ### For Businesses
183
+ - **Proof of Concepts** - Test ideas before investing
184
+ - **Custom Assistants** - Build domain-specific agents
185
+ - **Team Collaboration** - Share tools internally
186
+ - **Cost-Effective Development** - Prototype without API costs
187
 
188
+ ## ๐Ÿ› ๏ธ Creating MCP Servers
189
 
190
+ ### Basic Example
 
 
 
 
191
 
192
+ ```python
193
+ import gradio as gr
 
 
 
194
 
195
+ def greet(name: str) -> str:
196
+ """Greet someone by name."""
197
+ return f"Hello, {name}!"
198
 
199
+ # Create a Gradio interface
200
+ demo = gr.Interface(fn=greet, inputs="text", outputs="text")
201
 
202
+ # Launch as an MCP server
203
+ demo.launch(mcp_server=True)
204
+ ```
 
205
 
206
+ ### Multi-Tool Server
207
 
208
+ ```python
209
+ import gradio as gr
210
 
211
+ def summarize_text(text: str, max_length: int = 100) -> str:
212
+ """Summarize a long text."""
213
+ return text[:max_length] + "..."
214
 
215
+ def translate_text(text: str, target_language: str = "es") -> str:
216
+ """Translate text to another language."""
217
+ # Translation logic here
218
+ return f"Translated: {text}"
219
 
220
+ # Create tabbed interface with multiple tools
221
+ demo = gr.TabbedInterface(
222
+ [
223
+ gr.Interface(fn=summarize_text, inputs=["text", "number"], outputs="text"),
224
+ gr.Interface(fn=translate_text, inputs=["text", "text"], outputs="text")
225
+ ],
226
+ ["Summarizer", "Translator"]
227
+ )
228
 
229
+ # Launch as MCP server
230
+ demo.launch(mcp_server=True)
 
231
  ```
232
 
233
+ ## ๐Ÿ“Š Architecture & Technology
234
+
235
+ ### Core Technologies
236
+ - **Frontend**: Gradio 4.31.0 with custom themes and components
237
+ - **Backend**: Python with async support for high performance
238
+ - **Protocol**: Model Context Protocol (MCP) by Anthropic
239
+ - **Deployment**: Optimized for Hugging Face Spaces
240
+
241
+ ### Key Components
242
+ - **Unified Dashboard** - Single interface for all MCP operations
243
+ - **MCP Client Manager** - Handles connections to multiple servers
244
+ - **Template Engine** - Generates server code from templates
245
+ - **Pipeline Builder** - Visual workflow creation
246
+ - **Agent Framework** - Autonomous agent construction
247
+
248
+ ### Security & Performance
249
+ - **Secure Storage** - Encrypted credential management
250
+ - **Rate Limiting** - Prevent API abuse
251
+ - **Caching** - Optimized response times
252
+ - **Error Handling** - Graceful failure recovery
253
+
254
+ ## ๐Ÿค Project Team & Contributors
255
+
256
+ ### Core Team
257
+ - **Sean Poyner** - Project Lead & Creator
258
+ - **Ranadeep Laskar ([@flickinshots](https://github.com/flickinshots))** - Project Member & Collaborator
259
+
260
+ We welcome contributions from the community! See our [Contributing Guide](CONTRIBUTING.md) for details.
261
+
262
+ ## ๐Ÿ“ˆ Roadmap
263
+
264
+ ### Current Features (v1.0)
265
+ - โœ… Unified Dashboard
266
+ - โœ… CLI Tools
267
+ - โœ… Template Library
268
+ - โœ… Basic MCP Connections
269
+ - โœ… HF Space Deployment
270
+
271
+ ### Coming Soon (v1.1)
272
+ - ๐Ÿ”„ Advanced Pipeline Builder
273
+ - ๐Ÿ”„ More Server Templates
274
+ - ๐Ÿ”„ Enhanced Agent Capabilities
275
+ - ๐Ÿ”„ Community Marketplace
276
+ - ๐Ÿ”„ Mobile-Responsive UI
277
+
278
+ ### Future Vision (v2.0)
279
+ - ๐Ÿ”ฎ Multi-Agent Orchestration
280
+ - ๐Ÿ”ฎ Custom Model Integration
281
+ - ๐Ÿ”ฎ Enterprise Features
282
+ - ๐Ÿ”ฎ Advanced Analytics
283
+ - ๐Ÿ”ฎ Plugin System
284
+
285
  ## ๐Ÿ“„ License
286
 
287
+ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
288
 
289
  ## ๐Ÿ™ Acknowledgments
290
 
291
+ ### Special Thanks To
292
+ - **Hugging Face** - For hosting this space and organizing the MCP Hackathon
293
+ - **Gradio Team** - For the amazing framework that makes this possible
294
+ - **Anthropic** - For creating the Model Context Protocol
295
+ - **Open Source Community** - For inspiration and support
296
+
297
+ ### Built With
298
+ - [Gradio](https://gradio.app) - The UI framework powering our interface
299
+ - [Model Context Protocol](https://github.com/anthropics/mcp) - The protocol enabling tool integration
300
+ - [Python](https://python.org) - Our primary development language
301
 
302
+ ## ๐Ÿ“ž Support & Contact
303
 
304
  - **GitHub Issues**: [Report bugs or request features](https://github.com/seanpoyner/gradio-mcp-playground/issues)
305
  - **Discussions**: [Join the conversation](https://huggingface.co/spaces/seanpoyner/gradio-mcp-playground/discussions)
306
+ - **Documentation**: [Full docs on GitHub](https://github.com/seanpoyner/gradio-mcp-playground)
307
 
308
  ---
309
 
310
  <div align="center">
311
+ <b>Made with โค๏ธ to democratize MCP technology for everyone</b>
312
  <br>
313
+ <i>No expensive subscriptions required - just creativity and curiosity!</i>
314
  </div>