MCP Frontend
by shaharia-lab
The MCP Frontend is a user interface for interacting with Large Language Models through tool-based capabilities. It's part of the mcp-kit and built with modern web technologies.
Last updated: N/A
MCP (Model Context Protocol) Frontend
A frontend application for the Model Context Protocol (MCP) Kit that enables enhanced interactions with Large Language Models through tool-based capabilities.
This repository is part of mcp-kit and serves as the user interface layer built with modern web technologies.
🚀 Features
- Single Page Application architecture
- Real-time chat interface with LLMs
- Tool-based interaction capabilities
- Integration with MCP backend server
- Modern, responsive UI built with React and TypeScript
🎥 Demo
Experience MCP Kit in action - chat with LLMs while leveraging additional capabilities provided by the MCP server:
<video src="https://github.com/user-attachments/assets/bb650e68-825c-4d5e-a032-1ea757bbb930" controls title="MCP Kit in action"></video>
🛠️ Prerequisites
- Node.js 20.x
- NPM 7.x
📦 Installation
Standard Installation
- Clone the repository:
git clone https://github.com/shaharia-lab/mcp-frontend.git
cd mcp-frontend
[Rest of standard installation steps...]
🐳 Docker Installation
You can run MCP Frontend using our official Docker image:
docker pull ghcr.io/shaharia-lab/mcp-frontend:<version>
Replace <version> with the specific version you want to use (e.g., latest, 1.0.0).
Running with Docker
docker run
-p 3000:3000
-e VITE_MCP_BACKEND_API_ENDPOINT=http://localhost:8081
ghcr.io/shaharia-lab/mcp-frontend:<version>
Environment Variables
The following environment variables are required to run MCP Frontend:
| env_key | Default | Required | Description |
|---------------------------------|---------|----------|---------------------------------------|
| VITE_MCP_BACKEND_API_ENDPOINT | - | Yes | The base URL for the MCP backend API. |
Simply copy the .env.example file to .env and update the values as needed to run the application locally.
And for Docker, you can pass the environment variables using the -e flag.
🚀 Usage
Development
Run the development server:
npm run dev
Production
Build for production:
npm run build
For detailed configuration options, refer to the Vite documentation.
🏗️ Architecture
MCP Frontend is built with:
- Vite - Build tool and development server
- React - UI framework
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
🤝 Contributing
We welcome contributions! Here's how you can help:
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Please ensure your PRs follow our coding standards and include appropriate tests.
🔍 Related Projects
- MCP-Kit Backend - The main backend server
- Documentation - Full project documentation
⚠️ Current Status
This project is under active development. While functional, it's not yet recommended for production use. We're working on:
- Enhanced error handling
- Improved performance
- Additional tool integrations
- Comprehensive testing suite
📝 License
This project is licensed under the MIT License - see the LICENSE file for details.
🤔 Support
- 📧 Email: [email protected]
- 🐛 Issue Tracker
- 💬 Discord invite: Community Chat
🙏 Acknowledgments
- The MCP Kit community
- All our contributors and supporters