Mcp Client

What is Mcp Client?

Mcp Client is an Angular-based web application that connects to an MCP (Model Context Protocol) server running on localhost:5656. It provides a browser interface for discovering servers, executing tools with parameter substitution, performing CRUD operations on schema entities, and viewing real-time operation logs. It is intended for developers who need a production‑ready, extensible front end for interacting with MCP services.

How to use Mcp Client?

Create a new Angular project, replace the generated files with the provided code, copy configuration files (mcp_server_discovery.json and mcp_tool_context.json) to the assets directory, install dependencies with npm install, and start the server with ng serve. Ensure the MCP server is running on localhost:5656, then access the client at http://localhost:4200.

Key features of Mcp Client

• Server discovery and connection management
• Tool execution with parameter substitution
• Complete CRUD operations for all schema entities
• Advanced filtering using JSON‑API format
• Real‑time operations logging
• Responsive UI design with error handling

Use cases of Mcp Client

• Connect to an MCP server via a click in the Server Status section
• Execute tools listed in the Available Tools section
• Load filtered data (e.g., high‑credit customers, expensive products, recent orders)
• Send emails to customers by clicking a “Send Email” button
• Monitor all operations and their status in the Operations Log

FAQ from Mcp Client

What kind of application is Mcp Client?

It is an Angular single‑page application that acts as a client for an MCP server, providing a browser‑based UI for server discovery, tool execution, data management, and logging.

What are the runtime requirements?

Node.js and npm are required to install dependencies and run the Angular development server (ng serve). The MCP server must be running on localhost:5656.

Where do configuration files live?

Configuration files (mcp_server_discovery.json and mcp_tool_context.json) must be placed in the src/assets/ directory of the Angular project.

How is data loading and filtering supported?

The client provides buttons to load data with predefined filters (e.g., credit_limit > 5000, unit_price > 100, orders from 2024) using JSON‑API format parameters.

What architecture does Mcp Client use?

It uses services (MCPDiscoveryService, MCPToolsService, DataService) with observables for reactive UI updates, full TypeScript interfaces for type safety, and includes a CORS proxy configuration.