feat(frontend): add source filter to MCP server catalog

Lasim · Lasim · commit 92afca1b20ce · 2025-12-08T22:56:46.000+01:00
feat(frontend): implement search functionality with loading state
feat(frontend): enhance input group components for better UI
feat(frontend): update translations for source filter
feat(backend): add source field to MCP server API specifications
diff --git a/services/backend/api-spec.json b/services/backend/api-spec.json
@@ -16320,6 +16320,14 @@
                                 "nullable": true,
                                 "description": "Official registry name"
                               },
+                              "source": {
+                                "type": "string",
+                                "enum": [
+                                  "official_registry",
+                                  "manual"
+                                ],
+                                "description": "Source of the MCP server"
+                              },
                               "created_at": {
                                 "type": "string",
                                 "format": "date-time",
@@ -16343,6 +16351,7 @@
                               "status",
                               "featured",
                               "requires_oauth",
+                              "source",
                               "created_at",
                               "updated_at"
                             ]
@@ -17077,6 +17086,19 @@
             "required": false,
             "description": "Filter by server status"
           },
+          {
+            "schema": {
+              "type": "string",
+              "enum": [
+                "official_registry",
+                "manual"
+              ]
+            },
+            "in": "query",
+            "name": "source",
+            "required": false,
+            "description": "Filter by server source: official_registry or manual"
+          },
           {
             "schema": {
               "type": "string",
@@ -17292,6 +17314,14 @@
                                 "nullable": true,
                                 "description": "Official registry name"
                               },
+                              "source": {
+                                "type": "string",
+                                "enum": [
+                                  "official_registry",
+                                  "manual"
+                                ],
+                                "description": "Source of the MCP server"
+                              },
                               "created_at": {
                                 "type": "string",
                                 "format": "date-time",
@@ -17315,6 +17345,7 @@
                               "status",
                               "featured",
                               "requires_oauth",
+                              "source",
                               "created_at",
                               "updated_at"
                             ]
diff --git a/services/backend/api-spec.yaml b/services/backend/api-spec.yaml
@@ -11374,6 +11374,12 @@ paths:
                               type: string
                               nullable: true
                               description: Official registry name
+                            source:
+                              type: string
+                              enum:
+                                - official_registry
+                                - manual
+                              description: Source of the MCP server
                             created_at:
                               type: string
                               format: date-time
@@ -11394,6 +11400,7 @@ paths:
                             - status
                             - featured
                             - requires_oauth
+                            - source
                             - created_at
                             - updated_at
                         description: Array of server objects (minimal fields for listing)
@@ -11929,6 +11936,15 @@ paths:
           name: status
           required: false
           description: Filter by server status
+        - schema:
+            type: string
+            enum:
+              - official_registry
+              - manual
+          in: query
+          name: source
+          required: false
+          description: "Filter by server source: official_registry or manual"
         - schema:
             type: string
             enum:
@@ -12093,6 +12109,12 @@ paths:
                               type: string
                               nullable: true
                               description: Official registry name
+                            source:
+                              type: string
+                              enum:
+                                - official_registry
+                                - manual
+                              description: Source of the MCP server
                             created_at:
                               type: string
                               format: date-time
@@ -12113,6 +12135,7 @@ paths:
                             - status
                             - featured
                             - requires_oauth
+                            - source
                             - created_at
                             - updated_at
                         description: Array of server objects (minimal fields for listing)
diff --git a/services/backend/src/routes/mcp/servers/schemas.ts b/services/backend/src/routes/mcp/servers/schemas.ts
@@ -113,7 +113,12 @@ export const SEARCH_SERVERS_QUERY_SCHEMA = {
       enum: MCP_SERVER_STATUS_VALUES as unknown as string[],
       description: 'Filter by server status'
     },
-    featured: { 
+    source: {
+      type: 'string',
+      enum: ['official_registry', 'manual'],
+      description: 'Filter by server source: official_registry or manual'
+    },
+    featured: {
       type: 'string',
       enum: ['true', 'false'],
       description: 'Filter by featured status: true for featured servers, false for non-featured servers'
@@ -1184,10 +1189,11 @@ export const SERVER_LIST_ENTITY_SCHEMA = {
     author_name: { type: 'string', nullable: true, description: 'Author name' },
     organization: { type: 'string', nullable: true, description: 'Organization' },
     official_name: { type: 'string', nullable: true, description: 'Official registry name' },
+    source: { type: 'string', enum: ['official_registry', 'manual'], description: 'Source of the MCP server' },
     created_at: { type: 'string', format: 'date-time', description: 'Creation timestamp' },
     updated_at: { type: 'string', format: 'date-time', description: 'Last update timestamp' }
   },
-  required: ['id', 'name', 'slug', 'description', 'language', 'runtime', 'transport_type', 'visibility', 'status', 'featured', 'requires_oauth', 'created_at', 'updated_at']
+  required: ['id', 'name', 'slug', 'description', 'language', 'runtime', 'transport_type', 'visibility', 'status', 'featured', 'requires_oauth', 'source', 'created_at', 'updated_at']
 } as const;
 
 export const LIST_SERVERS_SUCCESS_RESPONSE_SCHEMA = {
@@ -1775,6 +1781,7 @@ export interface ServerListEntity {
   author_name: string | null;
   organization: string | null;
   official_name: string | null;
+  source: 'official_registry' | 'manual';
   created_at: string;
   updated_at: string;
 }
@@ -1972,6 +1979,7 @@ export function formatServerListResponse(
     author_name: server.author_name || null,
     organization: server.organization || null,
     official_name: server.official_name || null,
+    source: server.source || 'manual',
     created_at: server.created_at.toISOString(),
     updated_at: server.updated_at.toISOString()
   };
diff --git a/services/backend/src/routes/mcp/servers/search.ts b/services/backend/src/routes/mcp/servers/search.ts
@@ -19,6 +19,7 @@ interface SearchServersQueryParams extends Omit<ListServersQueryParams, 'search'
   q: string; // Search query is required for search endpoint
   tags?: string; // Optional comma-separated tags filter
   sort_by?: 'name' | 'github_stars'; // Optional sort parameter
+  source?: 'official_registry' | 'manual'; // Optional source filter
 }
 
 export default async function searchServers(server: FastifyInstance) {
@@ -63,6 +64,7 @@ export default async function searchServers(server: FastifyInstance) {
         language: queryParams.language,
         runtime: queryParams.runtime,
         status: queryParams.status,
+        source: queryParams.source,
         featured: queryParams.featured,
         tags: queryParams.tags
       },
@@ -112,7 +114,8 @@ export default async function searchServers(server: FastifyInstance) {
         runtime: queryParams.runtime,
         status: status,
         featured: featured,
-        tags: queryParams.tags
+        tags: queryParams.tags,
+        source: queryParams.source
       };
 
       // Get servers using the service (which handles permission filtering)
diff --git a/services/frontend/src/components/mcp-server/CategoryDisplay.vue b/services/frontend/src/components/mcp-server/CategoryDisplay.vue
@@ -12,9 +12,15 @@ const eventBus = useEventBus()
 // Storage key for categories cache
 const CATEGORIES_STORAGE_KEY = 'mcp_categories_cache'
 
+interface CategoryData {
+  id: string
+  name: string
+  icon?: string | null
+}
+
 interface Props {
   categoryId?: string | null
-  category?: McpCategory | null
+  category?: CategoryData | McpCategory | null
   showNotProvided?: boolean
   iconClass?: string
   textClass?: string
@@ -30,7 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
   containerClass: 'flex items-center gap-2'
 })
 
-const category = ref<McpCategory | null>(props.category)
+const category = ref<CategoryData | McpCategory | null>(props.category)
 const isLoading = ref(false)
 const error = ref<string | null>(null)
 
diff --git a/services/frontend/src/components/ui/input-group/InputGroup.vue b/services/frontend/src/components/ui/input-group/InputGroup.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'flex items-center rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow]',
+      'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+      'has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed',
+      props.class
+    )"
+    :data-disabled="disabled || undefined"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/services/frontend/src/components/ui/input-group/InputGroupAddon.vue b/services/frontend/src/components/ui/input-group/InputGroupAddon.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  align?: 'start' | 'end' | 'inline-start' | 'inline-end'
+}>()
+
+const alignmentClasses = {
+  'start': 'order-first pl-3',
+  'end': 'order-last pr-3',
+  'inline-start': 'order-first pl-3 border-r border-input bg-muted/50',
+  'inline-end': 'order-last pr-3 border-l border-input bg-muted/50',
+}
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'flex items-center justify-center text-muted-foreground [&>svg]:size-4',
+      alignmentClasses[align || 'end'],
+      props.class
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/services/frontend/src/components/ui/input-group/InputGroupInput.vue b/services/frontend/src/components/ui/input-group/InputGroupInput.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+  placeholder?: string
+  disabled?: boolean
+  type?: string
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    :type="type || 'text'"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :class="cn(
+      'flex-1 h-9 min-w-0 bg-transparent px-3 py-1 text-base outline-none placeholder:text-muted-foreground md:text-sm',
+      'disabled:pointer-events-none disabled:cursor-not-allowed',
+      props.class
+    )"
+  >
+</template>
diff --git a/services/frontend/src/components/ui/input-group/index.ts b/services/frontend/src/components/ui/input-group/index.ts
@@ -0,0 +1,3 @@
+export { default as InputGroup } from './InputGroup.vue'
+export { default as InputGroupInput } from './InputGroupInput.vue'
+export { default as InputGroupAddon } from './InputGroupAddon.vue'
diff --git a/services/frontend/src/i18n/locales/en/mcp-catalog.ts b/services/frontend/src/i18n/locales/en/mcp-catalog.ts
@@ -11,7 +11,8 @@ export default {
     noCategory: 'No category assigned',
     openMenu: 'Open menu',
     search: {
-      placeholder: 'Search servers by name, description, or tags...',
+      placeholder: 'Search MCP Server',
+      searching: 'Searching...',
       button: 'Search'
     },
     columns: {
@@ -20,6 +21,7 @@ export default {
       language: 'Language',
       runtime: 'Runtime',
       category: 'Category',
+      source: 'Source',
       status: 'Status',
       featured: 'Featured',
       created: 'Created',
@@ -860,6 +862,7 @@ export default {
   },
 
   filters: {
+    button: 'Filters',
     clear: 'Clear Filters',
     activeSearch: 'Search active - {count} results',
     filtersApplied: 'Filters applied - {count} results',
@@ -870,6 +873,7 @@ export default {
     },
     status: {
       label: 'Status',
+      placeholder: 'All',
       all: 'All Statuses',
       active: 'Active',
       deprecated: 'Deprecated',
@@ -878,23 +882,27 @@ export default {
     },
     language: {
       label: 'Language',
+      placeholder: 'All',
       all: 'All Languages'
     },
     runtime: {
       label: 'Runtime',
+      placeholder: 'All',
       all: 'All Runtimes'
     },
     featured: {
       label: 'Featured',
+      placeholder: 'All',
       all: 'All Servers',
-      yes: 'Featured Only',
-      no: 'Non-Featured'
+      yes: 'Yes',
+      no: 'No'
     },
     autoInstall: {
       label: 'Auto Install',
+      placeholder: 'All',
       all: 'All Servers',
-      yes: 'Auto Install Enabled',
-      no: 'Auto Install Disabled'
+      yes: 'Yes',
+      no: 'No'
     }
   },
 
diff --git a/services/frontend/src/services/mcpCatalogService.ts b/services/frontend/src/services/mcpCatalogService.ts
@@ -368,6 +368,7 @@ export class McpCatalogService {
     url.searchParams.append('q', params.q)
 
     // Optional parameters
+    if (params.source) url.searchParams.append('source', params.source)
     if (params.category) url.searchParams.append('category_id', params.category)
     if (params.language) url.searchParams.append('language', params.language)
     if (params.runtime) url.searchParams.append('runtime', params.runtime)
diff --git a/services/frontend/src/views/admin/mcp-server-catalog/McpServerTableColumns.vue b/services/frontend/src/views/admin/mcp-server-catalog/McpServerTableColumns.vue
diff --git a/services/frontend/src/views/admin/mcp-server-catalog/index.vue b/services/frontend/src/views/admin/mcp-server-catalog/index.vue

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export { default as InputGroup } from './InputGroup.vue'`
	`2`	`+export { default as InputGroupInput } from './InputGroupInput.vue'`
	`3`	`+export { default as InputGroupAddon } from './InputGroupAddon.vue'`