feat: add target_port to run custom server (#501)

Author: peppescg

renderer/src/features/mcp-servers/components/__tests__/dialog-form-run-mcp-command.test.tsx

@@ -89,6 +89,8 @@ it('is able to run an MCP server with docker', async () => {
   await userEvent.click(screen.getByLabelText('Transport'))
   await userEvent.click(screen.getByRole('option', { name: 'stdio' }))
 
+  await userEvent.type(screen.getByLabelText('Target port'), '8000')
+
   await userEvent.type(
     screen.getByLabelText('Docker image'),
     'ghcr.io/github/github-mcp-server'
@@ -139,6 +141,7 @@ it('is able to run an MCP server with docker', async () => {
   expect(payload).toBeDefined()
   expect(payload['name'], 'Should have name').toBe('foo-bar')
   expect(payload['transport'], 'Should have transport').toBe('stdio')
+  expect(payload['target_port']).toBe(8000)
   expect(payload['image'], 'Should have image').toBe(
     'ghcr.io/github/github-mcp-server'
   )
@@ -189,6 +192,8 @@ it('is able to run an MCP server with npx', async () => {
   await userEvent.click(screen.getByLabelText('Transport'))
   await userEvent.click(screen.getByRole('option', { name: 'stdio' }))
 
+  await userEvent.type(screen.getByLabelText('Target port'), '8800')
+
   await userEvent.click(screen.getByLabelText('Protocol'))
   await userEvent.click(screen.getByRole('option', { name: 'npx' }))
 
@@ -243,6 +248,7 @@ it('is able to run an MCP server with npx', async () => {
   expect(payload['name'], 'Should have name').toBe('foo-bar')
   expect(payload['transport'], 'Should have transport').toBe('stdio')
   expect(payload['protocol'], 'Should have protocol').toBe('npx')
+  expect(payload['target_port']).toBe(8800)
   expect(payload['package_name'], 'Should have package name').toBe(
     '@modelcontextprotocol/server-everything'
   )
@@ -293,6 +299,8 @@ it('is able to run an MCP server with uvx', async () => {
   await userEvent.click(screen.getByLabelText('Transport'))
   await userEvent.click(screen.getByRole('option', { name: 'stdio' }))
 
+  await userEvent.type(screen.getByLabelText('Target port'), '8000')
+
   await userEvent.click(screen.getByLabelText('Protocol'))
   await userEvent.click(screen.getByRole('option', { name: 'uvx' }))
 
@@ -347,6 +355,7 @@ it('is able to run an MCP server with uvx', async () => {
   expect(payload['name'], 'Should have name').toBe('foo-bar')
   expect(payload['transport'], 'Should have transport').toBe('stdio')
   expect(payload['protocol'], 'Should have protocol').toBe('uvx')
+  expect(payload['target_port']).toBe(8000)
   expect(payload['package_name'], 'Should have package name').toBe(
     'mcp-server-fetch'
   )
@@ -397,6 +406,8 @@ it('is able to run an MCP server with go', async () => {
   await userEvent.click(screen.getByLabelText('Transport'))
   await userEvent.click(screen.getByRole('option', { name: 'stdio' }))
 
+  await userEvent.type(screen.getByLabelText('Target port'), '8000')
+
   await userEvent.click(screen.getByLabelText('Protocol'))
   await userEvent.click(screen.getByRole('option', { name: 'go' }))
 
@@ -451,6 +462,7 @@ it('is able to run an MCP server with go', async () => {
   expect(payload['name'], 'Should have name').toBe('foo-bar')
   expect(payload['transport'], 'Should have transport').toBe('stdio')
   expect(payload['protocol'], 'Should have protocol').toBe('go')
+  expect(payload['target_port']).toBe(8000)
   expect(payload['package_name'], 'Should have package name').toBe(
     'github.com/example/go-mcp-server'
   )

renderer/src/features/mcp-servers/components/dialog-form-run-mcp-command.tsx

@@ -40,6 +40,7 @@ export function DialogFormRunMcpServerWithCommand({
     resolver: zodV4Resolver(getFormSchemaRunMcpCommand(workloads)),
     defaultValues: {
       type: 'docker_image',
+      target_port: undefined,
     },
   })
 

renderer/src/features/mcp-servers/components/form-fields-run-mcp-command.tsx

@@ -109,6 +109,37 @@ export function FormFieldsRunMcpCommand({
         )}
       />
 
+      <FormField
+        control={form.control}
+        name="target_port"
+        render={({ field }) => (
+          <FormItem>
+            <div className="flex items-center gap-1">
+              <FormLabel htmlFor={field.name}>Target port</FormLabel>
+              <TooltipInfoIcon>
+                Target port to expose from the container. If not specified,
+                ToolHive will automatically assign a random port.
+              </TooltipInfoIcon>
+            </div>
+            <FormControl>
+              <Input
+                id={field.name}
+                autoCorrect="off"
+                autoComplete="off"
+                autoFocus
+                type="number"
+                data-1p-ignore
+                placeholder="e.g. 50051"
+                defaultValue={field.value}
+                onChange={(e) => field.onChange(parseInt(e.target.value, 10))}
+                name={field.name}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
       {typeValue === 'docker_image' ? (
         <FormField
           control={form.control}

renderer/src/features/mcp-servers/lib/form-schema-run-mcp-server-with-command.ts

@@ -14,6 +14,7 @@ const getCommonFields = (workloads: WorkloadsWorkload[]) =>
       [z.literal('sse'), z.literal('stdio'), z.literal('streamable-http')],
       'Please select either SSE, stdio, or streamable-http.'
     ),
+    target_port: z.number().optional(),
     cmd_arguments: z.string().optional(),
     envVars: z
       .object({

renderer/src/features/mcp-servers/lib/orchestrate-run-custom-server.tsx

@@ -134,13 +134,15 @@ function transformTypeSpecificData(
         name: values.name,
         transport: values.transport,
         image: values.image,
+        target_port: values.target_port,
       }
     }
     case 'package_manager': {
       return {
         name: values.name,
         transport: values.transport,
         image: `${values.protocol}://${values.package_name}`,
+        target_port: values.target_port,
       }
     }
     default: