mcp-frontend

The MCP Frontend provides a modern, single-page interface for interacting with MCP-enabled LLMs and their tool-based capabilities. It serves as the user interface layer of the MCP Kit, allowing you to chat with large language models, trigger tool actions, and view contextual results in real time. The frontend talks to the MCP backend, so you’ll typically point it at your MCP backend API endpoint to enable tool integrations and context-aware responses. The UI is built with React and TypeScript, and leverages Tailwind CSS for a responsive design, ensuring a smooth experience across devices.

To get started, run the frontend locally and point it to your MCP backend (the VITE_MCP_BACKEND_API_ENDPOINT environment variable controls the base API URL). Once running, you’ll have access to a real-time chat interface, tools integration (e.g., calculators, data fetchers, or domain-specific utilities), and streaming responses from the LLM as it executes actions. The frontend handles authentication, request orchestration, and presents results in an intuitive chat-based workflow, helping you experiment with context-aware prompts and tool usage in a cohesive environment.

Prerequisites:

• Node.js 20.x
• NPM 7.x

Install and run locally:

1. Clone the repository and navigate into it: git clone https://github.com/shaharia-lab/mcp-frontend.git cd mcp-frontend

2. Install dependencies: npm install

3. Start the development server: npm run dev

4. Build for production: npm run build

5. Optional: Run via Docker (if you prefer containerized deployment), using the official image and configuring the required environment variable: docker pull ghcr.io/shaharia-lab/mcp-frontend:<version> docker run -p 3000:3000 -e VITE_MCP_BACKEND_API_ENDPOINT=http://localhost:8081 ghcr.io/shaharia-lab/mcp-frontend:<version>

Environment setup tips:

• Copy .env.example to .env and customize values as needed for local development.
• Ensure the MCP backend is reachable at the endpoint configured in VITE_MCP_BACKEND_API_ENDPOINT.

Notes and tips:

• The frontend expects the MCP backend to expose the appropriate endpoints for chat and tool integrations. Ensure CORS and network reachability are properly configured in your backend.
• If you change the backend URL, update VITE_MCP_BACKEND_API_ENDPOINT accordingly.
• For production deployments, consider building the app and serving the static assets via a dedicated web server or using a CDN for optimal performance.
• Refer to Vite documentation for advanced configuration options (e.g., customizing proxies, environment variables, and build optimizations).