feat(web): manage custom MCP servers from the connectors page

Add create, replace, and delete endpoints for MCP servers, writing only the
user-global mcp.json under a lock and an atomic rename, and surface them as a
form on the connectors settings page. Entries declared by a project file or a
plugin stay read-only. A written server reaches the agent on the next session;
the running agent is not reloaded.

Author: elkaix

.changeset/web-mcp-server-crud.md

@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": minor
+---
+
+Add, edit, and remove your own MCP servers from the connectors page in the web UI; a new or edited server starts with your next session.

apps/pythinker-web/src/App.vue

@@ -1101,6 +1101,7 @@ function openPr(url: string): void {
       :skills="client.skills.value"
       :connectors="client.connectors.value"
       :connectors-loading="client.connectorsLoading.value"
+      :connectors-error="client.connectorsError.value"
       :sessions="client.sessionsWithUsage.value"
       :plugins="client.plugins.value"
       :subagents="client.subagents.value"
@@ -1111,6 +1112,9 @@ function openPr(url: string): void {
       @set-plugin-enabled="client.setPluginEnabled($event.pluginId, $event.enabled)"
       @set-tools="applySessionTools($event)"
       @restart-connector="client.restartConnector($event)"
+      @create-connector="client.createConnector($event)"
+      @update-connector="client.updateConnector($event.connectorId, $event.input)"
+      @remove-connector="client.removeConnector($event)"
       @set-theme="client.setTheme($event)"
       @set-color-scheme="client.setColorScheme($event)"
       @set-ui-font-size="client.setUiFontSize($event)"

apps/pythinker-web/src/api/daemon/client.ts

@@ -5,6 +5,8 @@ import type { PythinkerApiConfig } from '../config';
 import { buildRestUrl, buildWsUrl } from '../config';
 import type {
   AppConfig,
+  AppMcpServerDefinition,
+  AppMcpServerInput,
   AppMessage,
   AppMessageRole,
   AppModel,
@@ -146,6 +148,17 @@ interface WireMcpServer {
   status: 'connected' | 'connecting' | 'disconnected' | 'error';
   tool_count: number;
   last_error?: string;
+  editable: boolean;
+  definition?: WireMcpServerDefinition;
+}
+
+interface WireMcpServerDefinition {
+  transport: 'stdio' | 'http' | 'sse';
+  command?: string;
+  args?: string[];
+  env?: Record<string, string>;
+  url?: string;
+  headers?: Record<string, string>;
 }
 
 interface WirePlugin {
@@ -170,6 +183,28 @@ interface WireAgentProfile {
   when_to_use?: string;
 }
 
+function toAppMcpDefinition(definition: WireMcpServerDefinition): AppMcpServerDefinition {
+  return {
+    transport: definition.transport,
+    command: definition.command,
+    args: definition.args,
+    env: definition.env,
+    url: definition.url,
+    headers: definition.headers,
+  };
+}
+
+function toWireMcpDefinition(input: AppMcpServerInput): WireMcpServerDefinition {
+  return {
+    transport: input.transport,
+    command: input.command,
+    args: input.args,
+    env: input.env,
+    url: input.url,
+    headers: input.headers,
+  };
+}
+
 interface WireArchiveResult {
   archived: true;
 }
@@ -786,9 +821,34 @@ export class DaemonPythinkerWebApi implements PythinkerWebApi {
       status: server.status,
       toolCount: server.tool_count,
       lastError: server.last_error,
+      editable: server.editable,
+      definition: server.definition === undefined ? undefined : toAppMcpDefinition(server.definition),
     }));
   }
 
+  async createConnector(input: AppMcpServerInput): Promise<{ created: true }> {
+    return this.http.post<{ created: true }>('/mcp/servers', {
+      mcp_server_id: input.name,
+      config: toWireMcpDefinition(input),
+    });
+  }
+
+  async updateConnector(
+    connectorId: string,
+    input: AppMcpServerInput,
+  ): Promise<{ updated: true }> {
+    return this.http.put<{ updated: true }>(
+      `/mcp/servers/${encodeURIComponent(connectorId)}`,
+      { config: toWireMcpDefinition(input) },
+    );
+  }
+
+  async removeConnector(connectorId: string): Promise<{ deleted: true }> {
+    return this.http.delete<{ deleted: true }>(
+      `/mcp/servers/${encodeURIComponent(connectorId)}`,
+    );
+  }
+
   async listPlugins(): Promise<AppPlugin[]> {
     const data = await this.http.get<{ plugins: WirePlugin[] }>('/plugins');
     return (data.plugins ?? []).map((plugin) => ({

apps/pythinker-web/src/api/daemon/http.ts

@@ -170,6 +170,10 @@ export class DaemonHttpClient {
     return this.request<T>('PATCH', path, body);
   }
 
+  async put<T>(path: string, body: unknown): Promise<T> {
+    return this.request<T>('PUT', path, body);
+  }
+
   async delete<T>(path: string): Promise<T> {
     return this.request<T>('DELETE', path);
   }

apps/pythinker-web/src/api/types.ts

@@ -646,13 +646,28 @@ export interface AppSubagent {
 }
 
 /** A configured MCP server ("connector") and its live connection state. */
+export interface AppMcpServerDefinition {
+  transport: 'stdio' | 'http' | 'sse';
+  command?: string;
+  args?: string[];
+  env?: Record<string, string>;
+  url?: string;
+  headers?: Record<string, string>;
+}
+
+export interface AppMcpServerInput extends AppMcpServerDefinition {
+  name: string;
+}
+
 export interface AppConnector {
   id: string;
   name: string;
   transport: 'stdio' | 'http' | 'sse';
   status: 'connected' | 'connecting' | 'disconnected' | 'error';
   toolCount: number;
   lastError?: string;
+  editable: boolean;
+  definition?: AppMcpServerDefinition;
 }
 
 /** One tool available to the current session. */
@@ -704,6 +719,12 @@ export interface PythinkerWebApi {
   activateSkill(sessionId: string, skillName: string, args?: string): Promise<{ activated: true; skillName: string }>;
   /** Configured MCP servers — GET /mcp/servers. */
   listConnectors(): Promise<AppConnector[]>;
+  /** Create one user-global MCP server — POST /mcp/servers. */
+  createConnector(input: AppMcpServerInput): Promise<{ created: true }>;
+  /** Replace one user-global MCP server — PUT /mcp/servers/{id}. */
+  updateConnector(connectorId: string, input: AppMcpServerInput): Promise<{ updated: true }>;
+  /** Remove one user-global MCP server — DELETE /mcp/servers/{id}. */
+  removeConnector(connectorId: string): Promise<{ deleted: true }>;
   /** Restart one MCP server — POST /mcp/servers/{id}:restart. */
   restartConnector(connectorId: string): Promise<{ restarting: true }>;
   /** Installed plugins — GET /plugins. */

apps/pythinker-web/src/components/settings/McpServerForm.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import type { AppConnector, AppMcpServerInput } from '../../api/types';
+
+type McpTransport = AppMcpServerInput['transport'];
+
+interface FormState {
+  name: string;
+  transport: McpTransport;
+  command: string;
+  args: string;
+  env: string;
+  url: string;
+  headers: string;
+}
+
+const props = defineProps<{
+  connector?: AppConnector;
+}>();
+
+const emit = defineEmits<{
+  submit: [input: AppMcpServerInput];
+  cancel: [];
+}>();
+
+const { t } = useI18n();
+const isEditing = computed(() => props.connector !== undefined);
+const formError = ref<string>();
+const definition = props.connector?.definition;
+const form = reactive<FormState>({
+  name: props.connector?.name ?? '',
+  transport: definition?.transport ?? props.connector?.transport ?? 'stdio',
+  command: definition?.command ?? '',
+  args: definition?.args?.join('\n') ?? '',
+  env: stringifyRecord(definition?.env),
+  url: definition?.url ?? '',
+  headers: stringifyRecord(definition?.headers),
+});
+
+function stringifyRecord(value: Record<string, string> | undefined): string {
+  return value === undefined ? '' : JSON.stringify(value, null, 2);
+}
+
+function parseRecord(value: string, field: string): Record<string, string> | undefined {
+  if (value.trim() === '') return undefined;
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(value);
+  } catch {
+    formError.value = t('settings.connectors.form.invalidJson', { field });
+    return undefined;
+  }
+  if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+    formError.value = t('settings.connectors.form.objectRequired', { field });
+    return undefined;
+  }
+  const entries = Object.entries(parsed as Record<string, unknown>);
+  if (entries.some(([, entry]) => typeof entry !== 'string')) {
+    formError.value = t('settings.connectors.form.stringValuesRequired', { field });
+    return undefined;
+  }
+  return Object.fromEntries(entries) as Record<string, string>;
+}
+
+function submit(): void {
+  formError.value = undefined;
+  const env = form.transport === 'stdio' ? parseRecord(form.env, 'env') : undefined;
+  if (form.transport === 'stdio' && form.env.trim() !== '' && env === undefined) return;
+  const headers = form.transport !== 'stdio' ? parseRecord(form.headers, 'headers') : undefined;
+  if (form.transport !== 'stdio' && form.headers.trim() !== '' && headers === undefined) return;
+  emit('submit', {
+    name: form.name,
+    transport: form.transport,
+    command: form.transport === 'stdio' ? form.command : undefined,
+    args: form.transport === 'stdio' && form.args.trim() !== ''
+      ? form.args.split('\n').map((arg) => arg.trim()).filter((arg) => arg.length > 0)
+      : undefined,
+    env,
+    url: form.transport === 'stdio' ? undefined : form.url,
+    headers,
+  });
+}
+</script>
+
+<template>
+  <form class="connector-form" @submit.prevent="submit">
+    <div class="connector-fields">
+      <label class="connector-field">
+        <span class="rlabel">{{ t('settings.connectors.form.name') }}</span>
+        <input v-model="form.name" class="page-search" :readonly="isEditing" required />
+      </label>
+      <label class="connector-field">
+        <span class="rlabel">{{ t('settings.connectors.form.transport') }}</span>
+        <select v-model="form.transport" class="page-search">
+          <option value="stdio">stdio</option>
+          <option value="http">http</option>
+          <option value="sse">sse</option>
+        </select>
+      </label>
+      <label v-if="form.transport === 'stdio'" class="connector-field">
+        <span class="rlabel">{{ t('settings.connectors.form.command') }}</span>
+        <input v-model="form.command" class="page-search" required />
+      </label>
+      <label v-if="form.transport === 'stdio'" class="connector-field">
+        <span class="rlabel">{{ t('settings.connectors.form.args') }}</span>
+        <textarea v-model="form.args" class="page-search connector-textarea" :placeholder="t('settings.connectors.form.argsHint')" />
+      </label>
+      <label v-if="form.transport === 'stdio'" class="connector-field">
+        <span class="rlabel">{{ t('settings.connectors.form.env') }}</span>
+        <textarea v-model="form.env" class="page-search connector-textarea" :placeholder="t('settings.connectors.form.objectHint')" />
+      </label>
+      <label v-else class="connector-field">
+        <span class="rlabel">{{ t('settings.connectors.form.url') }}</span>
+        <input v-model="form.url" class="page-search" type="url" required />
+      </label>
+      <label v-if="form.transport !== 'stdio'" class="connector-field">
+        <span class="rlabel">{{ t('settings.connectors.form.headers') }}</span>
+        <textarea v-model="form.headers" class="page-search connector-textarea" :placeholder="t('settings.connectors.form.objectHint')" />
+      </label>
+    </div>
+    <p v-if="formError" class="listing-error">{{ formError }}</p>
+    <div class="connector-form-actions">
+      <button type="submit" class="act">{{ isEditing ? t('settings.connectors.form.save') : t('settings.connectors.form.add') }}</button>
+      <button v-if="isEditing" type="button" class="act" @click="emit('cancel')">{{ t('settings.connectors.form.cancel') }}</button>
+    </div>
+  </form>
+</template>
+
+<style scoped src="./settings.css"></style>
+
+<style scoped>
+.connector-form {
+  margin: 12px 0 16px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: var(--panel);
+}
+.connector-fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 8px 12px;
+}
+.connector-field { min-width: 0; }
+.connector-field .page-search { margin: 4px 0 0; }
+.connector-textarea {
+  min-height: 64px;
+  resize: vertical;
+  font-family: var(--mono);
+}
+.connector-form-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+}
+</style>

apps/pythinker-web/src/components/settings/SettingsPane.vue

@@ -2,6 +2,7 @@
 import type {
   AppConfig,
   AppConnector,
+  AppMcpServerInput,
   AppModel,
   AppPlugin,
   AppSession,
@@ -40,6 +41,7 @@ defineProps<{
   skills?: AppSkill[];
   connectors?: AppConnector[];
   connectorsLoading?: boolean;
+  connectorsError?: string;
   sessions?: AppSession[];
   plugins?: AppPlugin[];
   subagents?: AppSubagent[];
@@ -59,6 +61,9 @@ const emit = defineEmits<{
   openOnboarding: [];
   updateConfig: [patch: Partial<AppConfig>];
   restartConnector: [connectorId: string];
+  createConnector: [input: AppMcpServerInput];
+  updateConnector: [payload: { connectorId: string; input: AppMcpServerInput }];
+  removeConnector: [connectorId: string];
   setPluginEnabled: [payload: { pluginId: string; enabled: boolean }];
   setTools: [names: string[]];
   close: [];
@@ -125,7 +130,11 @@ const { t } = useI18n();
       v-show="activeTab === 'connectors'"
       :connectors="connectors"
       :connectors-loading="connectorsLoading"
+      :connectors-error="connectorsError"
       @restart-connector="emit('restartConnector', $event)"
+      @create-connector="emit('createConnector', $event)"
+      @update-connector="emit('updateConnector', $event)"
+      @remove-connector="emit('removeConnector', $event)"
     />
     <HooksPage v-show="activeTab === 'hooks'" :config="config" />
     <UsagePage v-show="activeTab === 'usage'" :sessions="sessions" />