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:

🛠️ 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:

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

🙏 Acknowledgments

The MCP Kit community
All our contributors and supporters

mcp-frontend