MCP Web Client

What is MCP Web Client?

MCP Web Client is a web application for configuring, monitoring, and managing multiple MCP (Multimodal Conversational Protocol) servers and their associated tools from a single, responsive interface.

How to use MCP Web Client?

Clone the repository, install dependencies with npm or yarn, then run npm run dev or yarn dev and open http://localhost:3000. Use the “Servers” page to add new servers and tools, and toggle tools on/off as needed.

Key features of MCP Web Client

• Manage multiple MCP servers in one place
• Configure and organize MCP tools (GitHub, Playwright, etc.)
• Enable/disable tools as needed
• Persistent storage of your configuration
• Responsive design for desktop and mobile

Use cases of MCP Web Client

• Centrally manage MCP-powered tools across different servers
• Quickly enable or disable tools without restarting servers
• Organize and view configuration details for each server and tool

FAQ from MCP Web Client

What are the prerequisites to run MCP Web Client?

Node.js version 14 or later and npm or yarn are required.

How do I install MCP Web Client?

Clone the repository, run npm install (or yarn), then start the development server with npm run dev (or yarn dev).

How do I add a new MCP server?

Go to the “Servers” page, click “Add New Server”, fill in the name, URL, and optional description, then click “Add Server”.

How do I manage tools on a server?

Navigate to a server’s detail page, click “Add Tool” to add new tools, toggle tools on/off with the enable/disable button, or delete tools you no longer need.

What technologies does MCP Web Client use?

It is built with Next.js (App Router), React, TypeScript, Zustand for state management, and CSS Modules for styling.