[Feature Request]: Enhance Server Creation/Editing UI for Prompt and Resource Association

[madhav165]

README: Enhancing Server UI and Aligning Resource/Prompt Tables with Tool Table

Overview

The Virtual Servers Catalog section in the Admin UI and the backend data models currently offer inconsistent experiences and feature sets for Tools, Prompts, and Resources.

• Tools: Feature-rich UI (searchable, multi-select checkboxes) and robust backend model (auth fields, metrics, validations, tags, federation relationships, computed properties).
• Prompts & Resources: Require manual entry of comma-separated IDs in the UI and have less complete backend implementations.

The goal is to:

1. Make the process of associating Prompts and Resources in the UI as seamless as Tools.
2. Align Resource and Prompt table features with the Tool table in db.py.

---

Current UI Behavior

Associated Tools UI

<!-- Snippet for Associated Tools -->
<div id="associatedTools" class="max-h-60 overflow-y-auto rounded-md border border-gray-300 dark:border-gray-700 shadow-sm p-3 bg-gray-50 dark:bg-gray-900">
  {% for tool in tools %}
  <label class="flex items-center space-x-3 text-gray-700 dark:text-gray-300 mb-2 cursor-pointer hover:bg-indigo-50 dark:hover:bg-indigo-900 rounded-md p-1 tool-item">
    <input type="checkbox" name="associatedTools" value="{{ tool.id }}" class="tool-checkbox form-checkbox h-5 w-5 text-indigo-600 dark:bg-gray-800 dark:border-gray-600" />
    <span class="select-none">{{ tool.name }}</span>
  </label>
  {% endfor %}
</div>

Associated Resources/Prompts UI (Current)

<!-- Snippet for Associated Resources -->
<div>
  <label class="block text-sm font-medium text-gray-700 dark:text-gray-400">Associated Resources (comma-separated IDs)</label>
  <input type="text" name="associatedResources" class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300" placeholder="e.g., resource1, resource2" />
</div>

---

Desired UI Behavior

• Searchable, multi-select list with checkboxes for Prompts and Resources (same as Tools).
• "Select All" and "Clear All" buttons.
• Pills displaying selected items.
• Available in both Add New Server and Edit Server forms.

---

UI Implementation Plan

Frontend Changes

• mcpgateway/templates/admin.html

  • Replace <input type="text"> fields for associatedResources and associatedPrompts with the same multi-select component used for associatedTools.

• mcpgateway/static/admin.js

  • Generalize initToolSelect and search functions for use with tools, resources, and prompts.
  • Initialize these components on DOM load.

Backend Changes

• mcpgateway/admin.py

  • Update form handling to accept multiple values for associatedResources and associatedPrompts (FastAPI will parse into lists).
  • No changes needed to db.py relationships.

✅ Result: Consistent, discoverable, and error-free UI for associating Tools, Prompts, and Resources.

---

Backend Model Alignment: Resource/Prompt with Tool

Key Differences

1. Authentication Fields

   • Tool: auth_type, auth_value for authentication.
   • Resource/Prompt: Missing.

2. Metrics Relationship

   • Tool: Metrics via ToolMetric with computed properties.
   • Resource/Prompt: Have metrics tables but no computed properties.

3. Validation Listeners

   • Tool: Schema/name validation listeners.
   • Resource/Prompt: Missing.

4. Tags Field

   • Tool: JSON tags with validation.
   • Resource/Prompt: Less robust validation.

5. Federation Relationships

   • Tool: Detailed Gateway relationships.
   • Resource/Prompt: Simpler relationships.

6. Computed Properties

   • Tool: Execution count, avg response time, failure rate.
   • Resource/Prompt: Missing.

Changes Needed

1. Add auth_type and auth_value fields.
2. Implement computed metric properties.
3. Add validation listeners.
4. Enhance Gateway relationships.
5. Strengthen tags validation.
6. Align metrics relationships.

Implementation Steps

1. Update db.py models for Resource and Prompt.
2. Add missing validation functions and listeners.
3. Implement computed properties for metrics.
4. Test by creating/querying Resource and Prompt records.
5. Verify that metrics aggregation and validation work as expected.