Mcp Client

1. Create a new Angular project:
ng new mcp-angular-client --routing=false --style=css

2. Replace the generated files with the code above

3. Copy your configuration files to the assets directory:
- src/assets/mcp_server_discovery.json
- src/assets/mcp_tool_context.json

4. Install dependencies:
npm install

5. Start the development server:
ng serve

6. Ensure your MCP server is running on localhost:5656

7. Access the application at http://localhost:4200

FEATURES:

✅ Server Discovery & Connection Management
✅ Tool Execution with Parameter Substitution
✅ Complete CRUD Operations for All Schema Entities
✅ Advanced Filtering with JSON-API Format
✅ Real-time Operations Logging
✅ Responsive UI Design
✅ Error Handling & Status Tracking
✅ CORS Proxy Configuration

USAGE EXAMPLES:

1. Connect to MCP Server:
- Click "Connect" next to the server in the Server Status section

2. Execute Tools:
- Use the "Execute" buttons in the Available Tools section

3. Load Data with Filters:
- "High Credit Customers" loads customers with credit_limit > 5000
- "Expensive Products" loads products with unit_price > 100
- "Recent Orders" loads orders from 2024

4. Send Emails:
- Click "Send Email" next to any customer to trigger the email tool

5. Monitor Operations:
- View all operations and their status in the Operations Log

ARCHITECTURE:

- MCPDiscoveryService: Handles server discovery and connection
- MCPToolsService: Executes tools with parameter substitution
- DataService: Provides filtered data access for all entities
- Reactive UI: Uses observables for real-time updates
- Type Safety: Full TypeScript interfaces for all data models