A web client for managing MCP (Multimodal Conversational Protocol) servers and tools. This application allows you to configure, monitor, and manage multiple MCP servers and their associated tools from a single interface.
- 🌐 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 that works on desktop and mobile
- Node.js (version 14 or later)
- npm or yarn
- Clone the repository:
git clone https://github.com/AVGenAI/mcp-web-client.git
cd mcp-web-client- Install dependencies:
npm install
# or
yarn- Run the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser to see the application.
- Navigate to the "Servers" page
- Click "Add New Server"
- Fill in the server details:
- Name: A friendly name for the server
- URL: The server's endpoint URL
- Description: (Optional) Additional information about the server
- Click "Add Server"
- Navigate to a server's detail page
- Click "Add Tool"
- Fill in the tool details:
- Name: A name for the tool
- Type: The type of tool (GitHub, Playwright, etc.)
- Configuration: Tool-specific configuration settings
- Click "Add Tool"
- Toggle tools on/off using the enable/disable button
- Delete tools you no longer need
- View tool configuration details
src/
├── app/ # Next.js App Router
│ ├── page.tsx # Dashboard/home page (client component)
│ ├── layout.tsx # Root layout (server component)
│ └── servers/ # Server management pages
│ ├── page.tsx # Server list page (client component)
│ ├── add/ # Add server page (client component)
│ └── [id]/ # Server detail page (client component)
├── components/ # Reusable components
│ ├── Sidebar.tsx # Navigation sidebar (client component)
│ └── ClientLayout.tsx # Layout wrapper for client components
├── store/ # State management
│ └── mcpStore.ts # Zustand store for MCP data
└── types/ # TypeScript type definitions
└── mcp.ts # MCP type definitions
This project follows Next.js App Router patterns:
- Server Components: Used for static parts and metadata (default in App Router)
- Client Components: Used for interactive elements and state management (marked with "use client" directive)
Components that use hooks, event handlers, or browser APIs must be client components. We've structured the app with:
- A server component root layout that includes metadata
- A client component wrapper (
ClientLayout) that includes interactive elements - Client components for all pages that need to access state
- Next.js - React framework with App Router
- React - UI library
- TypeScript - Type checking
- Zustand - State management
- CSS Modules - Component-scoped styling
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.