Mcp Client

// ===== SETUP INSTRUCTIONS ===== /* SETUP INSTRUCTIONS:

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

The framework is fully extensible and ready for production use! */