feat(all): add README content management to MCP server forms

Author: Lasim

services/backend/src/routes/mcp/servers/schemas.ts

@@ -1023,10 +1023,14 @@ export const UPDATE_GLOBAL_SERVER_REQUEST_SCHEMA = { type: 'object',
     repository_subfolder: SERVER_FIELDS.repository_subfolder,
     git_branch: SERVER_FIELDS.git_branch,
     website_url: SERVER_FIELDS.website_url,
-    github_account_id: { 
+    github_account_id: {
       type: 'string',
       description: 'GitHub Account ID (owner.id from GitHub API)'
     },
+    github_readme_base64: {
+      type: 'string',
+      description: 'Base64 encoded README content'
+    },
     language: SERVER_FIELDS.language,
     runtime: SERVER_FIELDS.runtime,
     transport_type: SERVER_FIELDS.transport_type,

services/backend/src/routes/mcp/servers/update-global.ts

@@ -27,6 +27,7 @@ interface UpdateGlobalServerRequest {
   git_branch?: string;
   website_url?: string;
   github_account_id?: string;
+  github_readme_base64?: string;
   language?: string;
   runtime?: string;
   transport_type?: 'stdio' | 'http' | 'sse';

services/frontend/src/components/admin/mcp-catalog/McpServerAddFormWizard.vue

@@ -214,6 +214,9 @@ const compatibleFormData = computed((): McpServerFormData => ({
   },
   configuration_schema: formData.value.configuration_schema,
   repository_setup: formData.value.repository,
+  readme: {
+    github_readme_base64: ''
+  },
   review: {}
 }))
 

services/frontend/src/components/admin/mcp-catalog/McpServerEditFormWizard.vue

@@ -17,14 +17,15 @@ import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { ProgressBars } from '@/components/ui/progress-bars'
-import { FileText, GitBranch, Code, Settings, CheckCircle } from 'lucide-vue-next'
+import { FileText, GitBranch, Code, Settings, CheckCircle, BookOpen } from 'lucide-vue-next'
 import { McpCatalogService } from '@/services/mcpCatalogService'
 import { useEventBus } from '@/composables/useEventBus'
 import ContentWrapper from '@/components/ContentWrapper.vue'
 import BasicInfoStepEdit from '@/components/admin/mcp-catalog/steps/BasicInfoStepEdit.vue'
 import TechnicalStep from '@/components/admin/mcp-catalog/TechnicalStep.vue'
 import ConfigurationSchemaStepEdit from '@/components/admin/mcp-catalog/steps/ConfigurationSchemaStepEdit.vue'
 import RepositoryStep from '@/components/admin/mcp-catalog/RepositoryStep.vue'
+import ReadmeStep from '@/components/admin/mcp-catalog/ReadmeStep.vue'
 import ReviewStep from '@/components/admin/mcp-catalog/ReviewStep.vue'
 import type {
   McpServerFormData,
@@ -88,6 +89,12 @@ const steps = [
     icon: Settings,
     component: ConfigurationSchemaStepEdit
   },
+  {
+    key: 'readme' as const,
+    label: 'README',
+    icon: BookOpen,
+    component: ReadmeStep
+  },
   {
     key: 'review' as const,
     label: t('mcpCatalog.form.steps.review'),
@@ -273,6 +280,19 @@ const initializeStorageWithData = (data: McpServerFormData) => {
     }
     eventBus.setState('edit_claude_config', JSON.stringify(claudeConfig, null, 2))
   }
+
+  // Initialize README data - decode base64 to markdown for editing
+  if (data.readme && data.readme.github_readme_base64) {
+    try {
+      const readmeMarkdown = atob(data.readme.github_readme_base64)
+      eventBus.setState('edit_readme_data', { readme_markdown: readmeMarkdown })
+    } catch (e) {
+      console.error('Failed to decode README base64:', e)
+      eventBus.setState('edit_readme_data', { readme_markdown: '' })
+    }
+  } else {
+    eventBus.setState('edit_readme_data', { readme_markdown: '' })
+  }
 }
 
 // Form data with proper initialization
@@ -313,6 +333,9 @@ const formData = ref<McpServerFormData>({
     git_branch: '',
     auto_populated: false
   },
+  readme: {
+    github_readme_base64: ''
+  },
   review: {}
 })
 
@@ -329,6 +352,7 @@ watch(
         technical: { ...formData.value.technical, ...newInitialData.technical },
         configuration_schema: newInitialData.configuration_schema ? newInitialData.configuration_schema : formData.value.configuration_schema,
         repository_setup: { ...formData.value.repository_setup, ...newInitialData.repository_setup },
+        readme: { ...formData.value.readme, ...newInitialData.readme },
         review: { ...formData.value.review, ...newInitialData.review }
       }
 

services/frontend/src/components/admin/mcp-catalog/ReadmeStep.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { useEventBus } from '@/composables/useEventBus'
+import type { McpServerFormData } from '../../../views/admin/mcp-server-catalog/types'
+
+interface Props {
+  modelValue: McpServerFormData['readme']
+  formData: McpServerFormData
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: McpServerFormData['readme']): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const eventBus = useEventBus()
+
+// Storage key for this step
+const STORAGE_KEY = 'edit_readme_data'
+
+// Form state - store as plain markdown text
+const readmeMarkdown = ref('')
+
+// Load data from storage on mount
+const loadFromStorage = () => {
+  const stored = eventBus.getState<{ readme_markdown: string }>(STORAGE_KEY)
+  if (stored) {
+    readmeMarkdown.value = stored.readme_markdown || ''
+  } else if (props.modelValue && props.modelValue.github_readme_base64) {
+    // Decode base64 to markdown for editing
+    try {
+      readmeMarkdown.value = atob(props.modelValue.github_readme_base64)
+    } catch {
+      readmeMarkdown.value = ''
+    }
+  }
+}
+
+// Save data to storage
+const saveToStorage = () => {
+  const data = {
+    readme_markdown: readmeMarkdown.value
+  }
+  eventBus.setState(STORAGE_KEY, data)
+  // Note: We'll convert to base64 only on final submit
+  emit('update:modelValue', { github_readme_base64: '' })
+}
+
+// Watch for changes and auto-save to storage
+watch([readmeMarkdown], () => {
+  saveToStorage()
+})
+
+// Initialize on mount
+onMounted(() => {
+  loadFromStorage()
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div>
+      <h2 class="text-2xl font-semibold mb-2">README Content</h2>
+      <p class="text-muted-foreground">
+        Enter the README content in Markdown format
+      </p>
+    </div>
+
+    <div class="space-y-4">
+      <!-- README Input -->
+      <div class="space-y-2">
+        <Label for="readme-content">README Content (Markdown)</Label>
+        <Textarea
+          id="readme-content"
+          v-model="readmeMarkdown"
+          placeholder="# My MCP Server&#10;&#10;Description of the server...&#10;&#10;## Features&#10;&#10;- Feature 1&#10;- Feature 2"
+          class="min-h-[400px] font-mono text-sm"
+        />
+        <p class="text-sm text-muted-foreground">
+          Enter your README content in Markdown format. It will be automatically converted to base64 when you submit.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

services/frontend/src/views/admin/mcp-server-catalog/edit/[id].vue

@@ -47,9 +47,11 @@ const clearEditStorage = () => {
   const editStorageKeys = [
     'edit_basic_data',
     'edit_repository_data',
+    'edit_repository_setup_data',
     'edit_technical_data',
     'edit_configuration_schema',
     'edit_claude_config',
+    'edit_readme_data',
     'technical_extracted_env_vars_edit',
     'mcp_edit_drafts'
   ]
@@ -80,8 +82,18 @@ const loadServerData = async () => {
 
     serverData.value = server
 
+    // Fetch README data separately using dedicated endpoint
+    let readmeBase64 = ''
+    try {
+      const readmeResponse = await McpCatalogService.getServerReadme(serverId)
+      readmeBase64 = readmeResponse || ''
+    } catch (readmeError) {
+      console.warn('Failed to fetch README:', readmeError)
+      // Continue even if README fetch fails
+    }
+
     // Convert server data to form data format
-    initialFormData.value = convertServerToFormData(server)
+    initialFormData.value = convertServerToFormData(server, readmeBase64)
 
   } catch (error) {
     loadError.value = error instanceof Error ? error.message : 'Failed to load server data'
@@ -110,7 +122,7 @@ const parseJsonField = (fieldValue: any, defaultValue: any) => {
 }
 
 // Convert server data to form data format
-const convertServerToFormData = (server: McpServer): Partial<McpServerFormData> => {
+const convertServerToFormData = (server: McpServer, readmeBase64: string = ''): Partial<McpServerFormData> => {
   // Parse tags with proper handling
   const parsedTags = parseJsonField(server.tags, [])
 
@@ -181,6 +193,9 @@ const convertServerToFormData = (server: McpServer): Partial<McpServerFormData>
       git_branch: server.git_branch || '',
       auto_populated: false
     },
+    readme: {
+      github_readme_base64: readmeBase64
+    },
     review: {}
   }
 }
@@ -210,6 +225,11 @@ const handleSubmit = async (formData: McpServerFormData) => {
     git_branch: repositorySetupData?.git_branch !== undefined ? repositorySetupData.git_branch : formData.repository.git_branch
   }
 
+  // Get README markdown from storage and convert to base64
+  const readmeData = eventBus.getState<{ readme_markdown: string }>('edit_readme_data')
+  const readmeMarkdown = readmeData?.readme_markdown || ''
+  const readmeBase64 = readmeMarkdown ? btoa(readmeMarkdown) : ''
+
   // CRITICAL FIX: Synchronize environment variables from installation_methods to team_env_schema
   let finalConfigurationSchema = { ...formData.configuration_schema }
 
@@ -278,6 +298,9 @@ const handleSubmit = async (formData: McpServerFormData) => {
     git_branch: finalRepositoryData.git_branch ? finalRepositoryData.git_branch : null,
     website_url: formData.basic.website_url || undefined,
 
+    // README content
+    github_readme_base64: readmeBase64 || undefined,
+
     // Technical
     language: formData.technical.language,
     runtime: formData.technical.runtime,

services/frontend/src/views/admin/mcp-server-catalog/types.ts

@@ -262,6 +262,7 @@ export interface UpdateMcpServerRequest {
   description?: string
   long_description?: string
   github_account_id?: string
+  github_readme_base64?: string
   github_stars?: number
   // Repository platform fields
   repository_url?: string
@@ -377,12 +378,17 @@ export interface ConfigurationSchemaFormData {
   user_url_query_params_schema?: UserUrlQueryParamsSchema[]
 }
 
+export interface ReadmeFormData {
+  github_readme_base64: string
+}
+
 export interface McpServerFormData {
   basic: BasicInfoFormData
   repository: RepositoryFormData
   technical: TechnicalFormData
   configuration_schema: ConfigurationSchemaFormData
   repository_setup: RepositorySetupFormData
+  readme: ReadmeFormData
   review: ReviewFormData
 }