@assistkick/create 1.18.0 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistkick/create",
-  "version": "1.18.0",
+  "version": "1.21.0",
   "description": "Scaffold assistkick-product-system into any project",
   "type": "module",
   "bin": {

package/templates/assistkick-product-system/packages/backend/src/routes/mcp_config.ts

@@ -0,0 +1,89 @@
+/**
+ * MCP config routes — per-user MCP server configuration management.
+ * GET    /api/mcp-config           — get all configs for the authenticated user
+ * PUT    /api/mcp-config/:type     — upsert a config (type = localhost | remote)
+ * DELETE /api/mcp-config/:type     — delete a config
+ */
+
+import { Router } from 'express';
+import type { McpConfigService } from '../services/mcp_config_service.js';
+
+interface McpConfigRoutesDeps {
+  mcpConfigService: McpConfigService;
+  log: (tag: string, ...args: any[]) => void;
+}
+
+export const createMcpConfigRoutes = ({ mcpConfigService, log }: McpConfigRoutesDeps): Router => {
+  const router: Router = Router();
+
+  // GET /api/mcp-config — list all configs for the authenticated user
+  router.get('/', async (req, res) => {
+    const userId = (req as any).user?.id;
+    if (!userId) {
+      res.status(401).json({ error: 'Unauthorized' });
+      return;
+    }
+
+    try {
+      const configs = await mcpConfigService.getAllConfigs(userId);
+      res.json({ configs });
+    } catch (err: any) {
+      log('MCP_CONFIG', `List configs failed: ${err.message}`);
+      res.status(500).json({ error: 'Failed to list MCP configs' });
+    }
+  });
+
+  // PUT /api/mcp-config/:type — upsert a config
+  router.put('/:type', async (req, res) => {
+    const userId = (req as any).user?.id;
+    if (!userId) {
+      res.status(401).json({ error: 'Unauthorized' });
+      return;
+    }
+
+    const configType = req.params.type;
+    const { mcpServersJson } = req.body;
+
+    if (!mcpServersJson || typeof mcpServersJson !== 'string') {
+      res.status(400).json({ error: 'mcpServersJson is required and must be a string' });
+      return;
+    }
+
+    try {
+      const config = await mcpConfigService.upsertConfig(userId, configType, mcpServersJson);
+      res.json({ config });
+    } catch (err: any) {
+      log('MCP_CONFIG', `Upsert config failed: ${err.message}`);
+      if (err.message.includes('Invalid JSON') || err.message.includes('configType must be')) {
+        res.status(400).json({ error: err.message });
+        return;
+      }
+      res.status(500).json({ error: 'Failed to save MCP config' });
+    }
+  });
+
+  // DELETE /api/mcp-config/:type — delete a config
+  router.delete('/:type', async (req, res) => {
+    const userId = (req as any).user?.id;
+    if (!userId) {
+      res.status(401).json({ error: 'Unauthorized' });
+      return;
+    }
+
+    const configType = req.params.type;
+
+    try {
+      const deleted = await mcpConfigService.deleteConfig(userId, configType);
+      if (!deleted) {
+        res.status(404).json({ error: 'Config not found' });
+        return;
+      }
+      res.json({ success: true });
+    } catch (err: any) {
+      log('MCP_CONFIG', `Delete config failed: ${err.message}`);
+      res.status(500).json({ error: 'Failed to delete MCP config' });
+    }
+  });
+
+  return router;
+};

package/templates/assistkick-product-system/packages/backend/src/server.ts

@@ -54,6 +54,8 @@ import { createChatSessionRoutes } from './routes/chat_sessions.js';
 import { createChatUploadRoutes } from './routes/chat_upload.js';
 import { createChatFilesRoutes } from './routes/chat_files.js';
 import { createSkillRoutes } from './routes/skills.js';
+import { McpConfigService } from './services/mcp_config_service.js';
+import { createMcpConfigRoutes } from './routes/mcp_config.js';
 import { DevCommandDetector } from './services/dev_command_detector.js';
 import { PreviewServerManager } from './services/preview_server_manager.js';
 import { createPreviewApiRoutes, createPreviewProxyMiddleware } from './routes/preview.js';
@@ -186,6 +188,11 @@ waitForDb().then(async () => {
   logError('STARTUP', 'Startup tasks failed', err);
 });
 
+// MCP config routes (per-user MCP server configuration)
+const mcpConfigService = new McpConfigService({ getDb, log });
+const mcpConfigRoutes = createMcpConfigRoutes({ mcpConfigService, log });
+app.use('/api/mcp-config', authMiddleware.requireAuth, mcpConfigRoutes);
+
 // Chat v2 session management routes (authenticated)
 const chatSessionService = new ChatSessionService({ getDb, log });
 const chatMessageRepository = new ChatMessageRepository({ getDb, log });
@@ -262,7 +269,7 @@ const chatWss = new WebSocketServer({ noServer: true });
 const chatCliBridge = new ChatCliBridge({ projectRoot: paths.projectRoot, workspacesDir: paths.workspacesDir, log });
 const permissionService = new PermissionService({ getDb, log });
 const titleGeneratorService = new TitleGeneratorService({ log });
-const chatHandler = new ChatWsHandler({ wss: chatWss, authService, chatCliBridge, permissionService, chatMessageRepository, chatSessionService, titleGeneratorService, log });
+const chatHandler = new ChatWsHandler({ wss: chatWss, authService, chatCliBridge, permissionService, chatMessageRepository, chatSessionService, titleGeneratorService, mcpConfigService, log });
 
 // Chat permission routes — used by MCP permission server (no auth — internal only)
 const chatPermissionRoutes = createChatPermissionRoutes({ permissionService, log });

package/templates/assistkick-product-system/packages/backend/src/services/chat_cli_bridge.ts

@@ -33,6 +33,8 @@ export interface SpawnOptions {
   allowedTools?: string[];
   /** Compacted conversation context to prepend to the system prompt */
   continuationContext?: string;
+  /** Inline MCP config JSON string to pass via --mcp-config */
+  mcpConfigJson?: string;
   onEvent: (event: Record<string, unknown>) => void;
 }
 
@@ -90,6 +92,11 @@ export class ChatCliBridge {
       }
     }
 
+    // MCP server configuration (inline JSON string)
+    if (options.mcpConfigJson) {
+      args.push('--mcp-config', options.mcpConfigJson);
+    }
+
     // Prompt via stdin
     args.push('-p', '-');
 

package/templates/assistkick-product-system/packages/backend/src/services/chat_ws_handler.ts

@@ -29,6 +29,7 @@ import type { PermissionService, PermissionDecision, PermissionRequest } from '.
 import type { ChatMessageRepository } from './chat_message_repository.js';
 import type { ChatSessionService } from './chat_session_service.js';
 import type { TitleGeneratorService } from './title_generator_service.js';
+import type { McpConfigService } from './mcp_config_service.js';
 
 export interface ChatWsHandlerDeps {
   wss: WebSocketServer;
@@ -38,6 +39,7 @@ export interface ChatWsHandlerDeps {
   chatMessageRepository?: ChatMessageRepository;
   chatSessionService?: ChatSessionService;
   titleGeneratorService?: TitleGeneratorService;
+  mcpConfigService?: McpConfigService;
   log: (tag: string, ...args: unknown[]) => void;
 }
 
@@ -237,6 +239,7 @@ export class ChatWsHandler {
   private readonly chatMessageRepository: ChatMessageRepository | null;
   private readonly chatSessionService: ChatSessionService | null;
   private readonly titleGeneratorService: TitleGeneratorService | null;
+  private readonly mcpConfigService: McpConfigService | null;
   private readonly log: ChatWsHandlerDeps['log'];
   private readonly activeStreams = new Map<WebSocket, Set<string>>();
 
@@ -249,7 +252,10 @@ export class ChatWsHandler {
   /** Track stream context per Claude session ID for message persistence. */
   private readonly streamContexts = new Map<string, StreamContext>();
 
-  constructor({ wss, authService, chatCliBridge, permissionService, chatMessageRepository, chatSessionService, titleGeneratorService, log }: ChatWsHandlerDeps) {
+  /** Map WebSocket connections to their authenticated user ID. */
+  private readonly wsUserIds = new Map<WebSocket, string>();
+
+  constructor({ wss, authService, chatCliBridge, permissionService, chatMessageRepository, chatSessionService, titleGeneratorService, mcpConfigService, log }: ChatWsHandlerDeps) {
     this.wss = wss;
     this.authService = authService;
     this.chatCliBridge = chatCliBridge;
@@ -257,6 +263,7 @@ export class ChatWsHandler {
     this.chatMessageRepository = chatMessageRepository || null;
     this.chatSessionService = chatSessionService || null;
     this.titleGeneratorService = titleGeneratorService || null;
+    this.mcpConfigService = mcpConfigService || null;
     this.log = log;
 
     // Register the permission request handler to route requests to the right WebSocket
@@ -317,6 +324,7 @@ export class ChatWsHandler {
     }
 
     this.log('CHAT_WS', `Admin ${payload.email} connected`);
+    this.wsUserIds.set(ws, payload.sub);
 
     ws.on('message', (raw: Buffer | string) => {
       let msg: ChatClientMessage;
@@ -340,6 +348,7 @@ export class ChatWsHandler {
 
     ws.on('close', () => {
       this.log('CHAT_WS', `Admin ${payload.email} disconnected`);
+      this.wsUserIds.delete(ws);
       this.cancelActiveStream(ws);
     });
 
@@ -416,6 +425,21 @@ export class ChatWsHandler {
       }
     }
 
+    // Build inline MCP config JSON for this spawn (if user has MCP servers configured)
+    let mcpConfigJson: string | undefined;
+    const userId = this.wsUserIds.get(ws);
+    if (userId && this.mcpConfigService) {
+      try {
+        const mergedServers = await this.mcpConfigService.buildMergedConfig(userId);
+        if (mergedServers) {
+          mcpConfigJson = JSON.stringify({ mcpServers: mergedServers });
+          this.log('CHAT_WS', `MCP config: ${Object.keys(mergedServers).length} server(s) for user ${userId}`);
+        }
+      } catch (err: any) {
+        this.log('CHAT_WS', `Failed to build MCP config: ${err.message}`);
+      }
+    }
+
     try {
       const { completion, systemPrompt } = this.chatCliBridge.spawn({
         projectId,
@@ -425,6 +449,7 @@ export class ChatWsHandler {
         permissionMode,
         allowedTools: msg.allowedTools,
         continuationContext,
+        mcpConfigJson,
         onEvent: (event) => {
           // Forward to current WS (may have been re-attached after disconnect)
           const currentWs = this.sessionToWs.get(claudeSessionId);

package/templates/assistkick-product-system/packages/backend/src/services/mcp_config_service.ts

@@ -0,0 +1,134 @@
+/**
+ * McpConfigService — CRUD operations for per-user MCP server configurations.
+ * Each user has two config slots: 'localhost' (for local dev) and 'remote' (for Docker/cloud).
+ * Uses deterministic IDs to enforce uniqueness at the PK level.
+ */
+
+import {eq} from 'drizzle-orm';
+import {userMcpConfigs} from '@assistkick/shared/db/schema.js';
+
+interface McpConfigServiceDeps {
+  getDb: () => any;
+  log: (tag: string, ...args: unknown[]) => void;
+}
+
+export interface McpConfigRecord {
+  id: string;
+  userId: string;
+  configType: string;
+  mcpServersJson: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export class McpConfigService {
+  private readonly getDb: () => any;
+  private readonly log: McpConfigServiceDeps['log'];
+
+  constructor({ getDb, log }: McpConfigServiceDeps) {
+    this.getDb = getDb;
+    this.log = log;
+  }
+
+  /** Generate a deterministic ID to enforce (userId, configType) uniqueness. */
+  private makeId = (userId: string, configType: string): string => {
+    return `mcpcfg_${userId}_${configType}`;
+  };
+
+  /** Get all MCP configs for a user (localhost + remote). */
+  getAllConfigs = async (userId: string): Promise<McpConfigRecord[]> => {
+    const db = this.getDb();
+    return db.select().from(userMcpConfigs).where(eq(userMcpConfigs.userId, userId));
+  };
+
+  /** Get a single config by user and type. */
+  getConfig = async (userId: string, configType: string): Promise<McpConfigRecord | null> => {
+    const db = this.getDb();
+    const id = this.makeId(userId, configType);
+    const [row] = await db.select().from(userMcpConfigs).where(eq(userMcpConfigs.id, id));
+    return row || null;
+  };
+
+  /** Create or update a config. Validates JSON before storing. */
+  upsertConfig = async (userId: string, configType: string, mcpServersJson: string): Promise<McpConfigRecord> => {
+    // Validate JSON
+    try {
+      JSON.parse(mcpServersJson);
+    } catch {
+      throw new Error('Invalid JSON in mcpServersJson');
+    }
+
+    if (configType !== 'localhost' && configType !== 'remote') {
+      throw new Error('configType must be "localhost" or "remote"');
+    }
+
+    const db = this.getDb();
+    const id = this.makeId(userId, configType);
+    const now = new Date().toISOString();
+
+    const existing = await this.getConfig(userId, configType);
+
+    if (existing) {
+      await db.update(userMcpConfigs)
+        .set({ mcpServersJson, updatedAt: now })
+        .where(eq(userMcpConfigs.id, id));
+      this.log('MCP_CONFIG', `Updated ${configType} config for user ${userId}`);
+      return { ...existing, mcpServersJson, updatedAt: now };
+    }
+
+    const record: McpConfigRecord = {
+      id,
+      userId,
+      configType,
+      mcpServersJson,
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    await db.insert(userMcpConfigs).values(record);
+    this.log('MCP_CONFIG', `Created ${configType} config for user ${userId}`);
+    return record;
+  };
+
+  /** Delete a config. */
+  deleteConfig = async (userId: string, configType: string): Promise<boolean> => {
+    const db = this.getDb();
+    const id = this.makeId(userId, configType);
+    const existing = await this.getConfig(userId, configType);
+    if (!existing) return false;
+
+    await db.delete(userMcpConfigs).where(eq(userMcpConfigs.id, id));
+    this.log('MCP_CONFIG', `Deleted ${configType} config for user ${userId}`);
+    return true;
+  };
+
+  /**
+   * Build a merged mcpServers object for a user based on the current environment.
+   * In Docker: only remote configs are included.
+   * Locally: both localhost and remote configs are merged.
+   */
+  buildMergedConfig = async (userId: string): Promise<Record<string, unknown> | null> => {
+    const configs = await this.getAllConfigs(userId);
+    if (configs.length === 0) return null;
+
+    const isDocker = process.env.DOCKER === '1'
+      || (await import('node:fs')).existsSync('/.dockerenv');
+
+    const merged: Record<string, unknown> = {};
+
+    for (const cfg of configs) {
+      if (isDocker && cfg.configType === 'localhost') continue;
+
+      try {
+        const servers = JSON.parse(cfg.mcpServersJson);
+        if (servers && typeof servers === 'object') {
+          Object.assign(merged, servers);
+        }
+      } catch {
+        // Skip invalid JSON entries
+      }
+    }
+
+    return Object.keys(merged).length > 0 ? merged : null;
+  };
+}

package/templates/assistkick-product-system/packages/frontend/src/api/client.ts

@@ -941,6 +941,40 @@ export class ApiClient {
     return resp.json();
   };
 
+  // --- MCP Config ---
+
+  /** Fetch all MCP configs for the authenticated user. */
+  getMcpConfigs = async (): Promise<{ configs: Array<{ id: string; userId: string; configType: string; mcpServersJson: string; createdAt: string; updatedAt: string }> }> => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/mcp-config`);
+    if (!resp.ok) throw new Error(`Failed to fetch MCP configs: ${resp.status}`);
+    return resp.json();
+  };
+
+  /** Save (create or update) an MCP config for the authenticated user. */
+  saveMcpConfig = async (configType: 'localhost' | 'remote', mcpServersJson: string): Promise<{ config: any }> => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/mcp-config/${configType}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ mcpServersJson }),
+    });
+    if (!resp.ok) {
+      const err = await resp.json().catch(() => ({}));
+      throw new Error(err.error || `Failed to save MCP config: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  /** Delete an MCP config for the authenticated user. */
+  deleteMcpConfig = async (configType: 'localhost' | 'remote'): Promise<void> => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/mcp-config/${configType}`, {
+      method: 'DELETE',
+    });
+    if (!resp.ok) {
+      const err = await resp.json().catch(() => ({}));
+      throw new Error(err.error || `Failed to delete MCP config: ${resp.status}`);
+    }
+  };
+
   // --- File system ---
 
   fetchFileTree = async (projectId: string) => {

package/templates/assistkick-product-system/packages/frontend/src/components/ChatView.tsx

@@ -30,7 +30,8 @@ import {PermissionModeSelector} from './PermissionModeSelector';
 import {AttachmentManager} from '../lib/attachment_manager';
 import type {SkillInfo} from '../api/client';
 import {apiClient} from '../api/client';
-import {Check, ChevronDown, ChevronUp, Copy, Search, Settings2, X, Zap} from 'lucide-react';
+import {Check, ChevronDown, ChevronUp, Copy, Search, Server, Settings2, X, Zap} from 'lucide-react';
+import {McpConfigModal} from './McpConfigModal';
 import {IconButton} from './ds/IconButton';
 import {formatTokenCount} from '../lib/context_usage_helpers';
 import {useFileTreeCache} from '../hooks/use_file_tree_cache';
@@ -123,6 +124,7 @@ export function ChatView({ visible }: ChatViewProps) {
   useEffect(() => { localStorage.setItem('chat_allowed_tools', JSON.stringify(allowedTools)); }, [allowedTools]);
 
   const [showSettings, setShowSettings] = useState(false);
+  const [showMcpConfig, setShowMcpConfig] = useState(false);
   const [isNewSession, setIsNewSession] = useState(true);
   const [compacting, setCompacting] = useState(false);
   const [copiedSessionId, setCopiedSessionId] = useState(false);
@@ -757,6 +759,14 @@ export function ChatView({ visible }: ChatViewProps) {
                 Compact
               </button>
             )}
+            <IconButton
+              label="MCP server config"
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowMcpConfig(true)}
+            >
+              <Server size={14} strokeWidth={2} />
+            </IconButton>
             <IconButton
               label="Chat settings"
               variant={showSettings ? 'accent' : 'ghost'}
@@ -826,6 +836,9 @@ export function ChatView({ visible }: ChatViewProps) {
         }
         onRespond={handlePermissionResponse}
       />
+
+      {/* MCP Config modal */}
+      {showMcpConfig && <McpConfigModal onClose={() => setShowMcpConfig(false)} />}
     </div>
   );
 }

package/templates/assistkick-product-system/packages/frontend/src/components/McpConfigModal.tsx

@@ -0,0 +1,208 @@
+/**
+ * McpConfigModal — Modal dialog for editing per-user MCP server configurations.
+ * Two tabs: Localhost (for local dev) and Remote (for Docker/cloud deployments).
+ * Each tab has a JSON textarea editor with validation and save functionality.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import { X } from 'lucide-react';
+import { apiClient } from '../api/client';
+
+interface McpConfigModalProps {
+  onClose: () => void;
+}
+
+type ConfigTab = 'localhost' | 'remote';
+
+const PLACEHOLDER_CONFIG = JSON.stringify(
+  {
+    'example-server': {
+      url: 'http://localhost:8080/sse',
+    },
+  },
+  null,
+  2,
+);
+
+export function McpConfigModal({ onClose }: McpConfigModalProps) {
+  const [activeTab, setActiveTab] = useState<ConfigTab>('localhost');
+  const [localhostJson, setLocalhostJson] = useState('{}');
+  const [remoteJson, setRemoteJson] = useState('{}');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const { configs } = await apiClient.getMcpConfigs();
+        for (const cfg of configs) {
+          const formatted = JSON.stringify(JSON.parse(cfg.mcpServersJson), null, 2);
+          if (cfg.configType === 'localhost') setLocalhostJson(formatted);
+          if (cfg.configType === 'remote') setRemoteJson(formatted);
+        }
+      } catch (err: any) {
+        setError(`Failed to load configs: ${err.message}`);
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, []);
+
+  const currentJson = activeTab === 'localhost' ? localhostJson : remoteJson;
+  const setCurrentJson = activeTab === 'localhost' ? setLocalhostJson : setRemoteJson;
+
+  const validateJson = useCallback((json: string): string | null => {
+    try {
+      const parsed = JSON.parse(json);
+      if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+        return 'Must be a JSON object (e.g. { "server-name": { ... } })';
+      }
+      return null;
+    } catch {
+      return 'Invalid JSON syntax';
+    }
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    const jsonToSave = activeTab === 'localhost' ? localhostJson : remoteJson;
+    const validationError = validateJson(jsonToSave);
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      await apiClient.saveMcpConfig(activeTab, jsonToSave);
+      setSuccess(`${activeTab === 'localhost' ? 'Localhost' : 'Remote'} config saved`);
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  }, [activeTab, localhostJson, remoteJson, validateJson]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault();
+        handleSave();
+      }
+    },
+    [onClose, handleSave],
+  );
+
+  const jsonError = validateJson(currentJson);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="bg-surface border border-edge rounded-lg shadow-xl w-[640px] max-h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-edge">
+          <h2 className="text-sm font-semibold text-content">MCP Server Configuration</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-content-muted hover:text-content transition-colors"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Description */}
+        <div className="px-4 py-2 text-[11px] text-content-muted border-b border-edge">
+          Configure MCP servers for your chat sessions. <strong>Localhost</strong> servers are only
+          used in local development. <strong>Remote</strong> servers are used in all environments
+          (local + Docker).
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-edge">
+          {(['localhost', 'remote'] as ConfigTab[]).map((tab) => (
+            <button
+              key={tab}
+              type="button"
+              className={`flex-1 px-4 py-2 text-xs font-mono transition-colors ${
+                activeTab === tab
+                  ? 'text-accent border-b-2 border-accent bg-surface-alt'
+                  : 'text-content-muted hover:text-content hover:bg-surface-raised'
+              }`}
+              onClick={() => { setActiveTab(tab); setError(null); setSuccess(null); }}
+            >
+              {tab === 'localhost' ? 'Localhost' : 'Remote'}
+            </button>
+          ))}
+        </div>
+
+        {/* Editor */}
+        <div className="flex-1 overflow-auto p-4">
+          {loading ? (
+            <div className="text-content-muted text-xs text-center py-8">Loading...</div>
+          ) : (
+            <>
+              <label className="block text-[11px] text-content-muted mb-1.5">
+                mcpServers JSON ({activeTab === 'localhost' ? 'local dev only' : 'all environments'})
+              </label>
+              <textarea
+                className={`w-full h-64 bg-surface-alt border rounded font-mono text-xs text-content p-3 resize-y focus:outline-none focus:ring-1 ${
+                  jsonError ? 'border-error focus:ring-error' : 'border-edge focus:ring-accent'
+                }`}
+                value={currentJson}
+                onChange={(e) => {
+                  setCurrentJson(e.target.value);
+                  setError(null);
+                }}
+                placeholder={PLACEHOLDER_CONFIG}
+                spellCheck={false}
+              />
+              {jsonError && (
+                <p className="text-[11px] text-error mt-1">{jsonError}</p>
+              )}
+              <p className="text-[10px] text-content-muted mt-1.5">
+                Enter the content of the <code className="bg-surface-raised px-1 rounded">mcpServers</code> object.
+                Example: <code className="bg-surface-raised px-1 rounded">{'{ "jetbrains": { "url": "http://localhost:6637/sse" } }'}</code>
+              </p>
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-4 py-3 border-t border-edge">
+          <div className="text-[11px]">
+            {error && <span className="text-error">{error}</span>}
+            {success && <span className="text-accent">{success}</span>}
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="h-7 px-3 rounded text-[11px] font-mono text-content-secondary bg-transparent border border-edge hover:bg-surface-raised transition-colors"
+            >
+              Close
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={saving || !!jsonError || loading}
+              className="h-7 px-3 rounded text-[11px] font-mono text-white bg-accent hover:bg-accent/90 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+            >
+              {saving ? 'Saving...' : 'Save'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/assistkick-product-system/packages/shared/db/migrations/0001_superb_roxanne_simpson.sql

@@ -0,0 +1,8 @@
+CREATE TABLE `user_mcp_configs` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` text NOT NULL,
+	`config_type` text NOT NULL,
+	`mcp_servers_json` text DEFAULT '{}' NOT NULL,
+	`created_at` text NOT NULL,
+	`updated_at` text NOT NULL
+);