Build, Test, and Experiment with Model Context Protocol (MCP) - The Standard for AI Tool Integration
A complete development environment for Model Context Protocol (MCP) - the open standard that enables AI assistants to securely connect with local and remote resources. Build servers, create clients, and see MCP in action with a live chat interface.
This playground demonstrates:
- 🖥️ MCP Servers - Build tools that AI can use (file operations, web scraping, databases, APIs)
- 💻 MCP Clients - Connect to and interact with MCP servers
- 🤖 Real AI Integration - See MCP working with actual LLMs via Ollama
- 🔧 Protocol Details - Understand MCP transport, tools, resources, and prompts
# 1. Setup dependencies
pnpm install
npm run setup:python
# 2. Install Ollama for local AI (if not installed)
# Visit: https://ollama.ai or run: brew install ollama
ollama pull llama3.2:3b
# 3. Start the complete experience
pnpm start # Chat interface at http://localhost:4200What you'll see: A modern, responsive chat interface where AI can actually use file operations and web scraping through MCP! Features include real-time streaming, tool call visualization, and professional UI design.
# Build your own MCP servers and clients
npx nx g @nx/node:application my-server --directory=servers/my-server
npx nx g @nx/node:application my-client --directory=clients/my-client
# Configure your server in mcp-config.json
# See greeting-server example for reference
# Explore project structure
pnpm run graph # Visualize the architecture🤖 Live Demo
├── chat/ # 💬 Modern responsive chat UI with MCP integration
│ ├── src/app/components/ # - Professional gradient design
│ │ ├── ChatInterface.tsx # - Real-time streaming responses
│ │ └── ServerManager.tsx # - Tool call visualization
│ └── src/app/services/ # - Mobile-responsive layout
🏗️ MCP Protocol Implementation
├── servers/ # 🖥️ MCP SERVERS (Create your AI tools here)
│ └── greeting-server/ # Example: Minimal greeting server
├── clients/ # 💻 MCP CLIENTS (Create your MCP clients here)
│ └── .gitignore # Ready for your client implementations
├── libs/
│ └── mcp-utils/ # 🔧 Shared utilities & types
├── mcp-config.json # 🔧 MCP server configuration
📚 Learning Resources
└── examples/ # 🎯 Guides & integration patterns
Key Insight: MCP is a client-server protocol. Servers provide tools, clients use them. The chat interface is a client that connects to your servers!
pnpm start # Complete MCP demo with AI chat
pnpm run chat # Same as start
pnpm run dev # Development mode with hot reload# Generate and run your servers
npx nx g @nx/node:application my-server --directory=servers/my-server
npx nx run my-server:serve # Start your server
pnpm run build # Build all projects# Generate and test your clients
npx nx g @nx/node:application my-client --directory=clients/my-client
npx nx run my-client:serve # Run your clientpnpm run graph # Visualize architecture
pnpm run lint # Code quality checks
pnpm run format # Code formattingnpx nx g @nx/node:application my-server --directory=servers/my-serverimport { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
const server = new Server({
name: 'my-feature-server',
version: '1.0.0'
}, {
capabilities: { tools: {} }
});
// Add your tools here!npx nx run my-server:serve # Start your server
# Then connect with the chat interface or build a test client- Tools: Functions AI can call (file operations, API calls, calculations)
- Resources: URI-addressable content (files, databases, web pages)
- Prompts: Template-based text generation
- Transport: Communication layer (stdio, HTTP, WebSocket)
- 🔐 Secure File Assistant: Read/write files with permissions
- 🌐 Web Research Tool: Scrape and analyze web content
- 💾 Database Interface: Query and update databases
- 🐳 DevOps Tools: Docker, Git, cloud provider APIs
- 📊 Data Analysis: Process CSVs, generate charts
AI Client ←→ MCP Transport ←→ Your MCP Server ←→ Real World Systems
- Claude Desktop: Add your servers to
claude_desktop_config.json - VS Code Extensions: Connect via MCP client libraries
- Custom Agents: Build AI assistants with your specific tools
{
"servers": {
"my-server": {
"name": "My Custom Server",
"description": "Description of what your server does",
"command": "node",
"args": ["./servers/my-server/dist/main.js"],
"type": "local",
"enabled": true
},
"filesystem": {
"name": "Filesystem Server",
"description": "File operations and management",
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/directory"],
"type": "third-party",
"enabled": false
}
},
"discovery": {
"scanLocalServers": false,
"autoDiscoverWorkspace": false
}
}- Responsive Design: CSS Grid layout that adapts from mobile to desktop
- Professional UI: Gradient backgrounds, smooth animations, glass morphism effects
- Smart Text Handling: Proper word wrapping, textarea input with Enter/Shift+Enter
- Real-time Tool Calls: Clean visualization of MCP function calls and results
- Mobile Optimized: Touch-friendly controls and collapsible sidebar
- Multi-language Support: Node.js, Python, with extensible architecture
- Hot Reloading: Nx dev server integration with live chat updates
- Type Safety: Full TypeScript support with MCP SDK types
- Configuration Management: JSON-based MCP server discovery and setup
- Testing Framework: Automated testing for MCP protocol compliance
- GETTING_STARTED.md - Detailed setup and usage guide
- examples/README.md - Implementation patterns and examples
- MCP Official Docs - Protocol specification
- MCP SDK Reference - TypeScript/Node.js SDK
- Awesome MCP Servers - Community server collection
Build something cool? We'd love to see it!
- New MCP Servers: Database connectors, API wrappers, dev tools
- Client Examples: Different transport methods, integration patterns
- Extensions: UI components, visualization tools
- Documentation: Tutorials, best practices, use cases
🎪 Welcome to the MCP Playground!
Where AI meets real-world tools through the Model Context Protocol.