ltcai 0.1.25 → 0.1.26

package/README.md

@@ -294,7 +294,7 @@ Or: `./start_ai.sh` (auto-restart + caffeinate)
 | VS Code Marketplace | [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=parktaesoo.ltcai) |
 | Open VSX | [open-vsx.org](https://open-vsx.org/extension/parktaesoo/ltcai) |
 
-Current version: **0.1.25** — [Changelog](docs/CHANGELOG.md)
+Current version: **0.1.26** — [Changelog](docs/CHANGELOG.md)
 
 ---
 

package/docs/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [0.1.26] - 2026-05-24
+
+### MCP 관리 대폭 확장 — 3-탭 UI
+
+**새 기능**
+
+- **레지스트리 탭** — 기존 MCP 목록 (빌트인 + 원격 레지스트리)
+  - 인기 MCP 20개 추가: `mcp-postgres`, `mcp-sqlite`, `mcp-brave-search`, `mcp-tavily`, `mcp-puppeteer`, `mcp-vercel`, `mcp-cloudflare`, `mcp-docker`, `mcp-stripe`, `mcp-supabase`, `mcp-hubspot`, `mcp-memory`, `mcp-sequential-thinking`, `mcp-discord`, `mcp-telegram`, `mcp-everything` 등
+  - 각 항목에 `env_vars` 필드 (설치 시 필요한 환경변수 안내)
+
+- **Claude Code 탭** — `~/.claude/settings.json` mcpServers 자동 동기화
+  - Claude Code에서 설치한 MCP 목록을 Lattice AI UI에서 바로 확인
+  - 이름·패키지·환경변수 정보 표시, "Claude Code" 소스 배지
+
+- **직접 추가 탭** — 커스텀 MCP 폼
+  - 이름·패키지·설명·환경변수·아이콘 직접 입력
+  - 추가된 항목은 `~/.ltcai/custom_mcps.json`에 저장 (서버 재시작 후에도 유지)
+  - 삭제 버튼 (어드민 전용)
+
+**API 엔드포인트**
+- `GET /mcp/claude-code-servers` — Claude Code settings.json mcpServers 반환
+- `GET /mcp/custom` — 사용자 추가 커스텀 MCP 목록
+- `POST /mcp/custom` — 커스텀 MCP 추가
+- `DELETE /mcp/custom/{id}` — 커스텀 MCP 삭제 (어드민)
+
+---
+
 ## [0.1.25] - 2026-05-24
 
 ### Knowledge Graph 전면 재설계 — 점=명사, 선=동사

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ltcai",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "Lattice AI local MLX/cloud LLM workspace server",
   "homepage": "https://github.com/TaeSooPark-PTS/LatticeAI#readme",
   "repository": {

package/server.py

@@ -387,6 +387,14 @@ class McpRecommendRequest(BaseModel):
 class McpInstallRequest(BaseModel):
     mcp_id: str
 
+class McpCustomRequest(BaseModel):
+    name: str
+    package: str
+    description: str = ""
+    category: str = "custom"
+    icon: str = "🔌"
+    env_vars: List[Dict] = []
+
 class SkillInstallRequest(BaseModel):
     plugin: str
     skill: str
@@ -673,6 +681,187 @@ MCP_REGISTRY = [
         "keywords": ["canva", "design", "poster", "card", "캔바", "디자인"],
         "capabilities": ["디자인 템플릿", "이미지 제작 워크플로"],
     },
+    # ── 데이터베이스 ─────────────────────────────────────────────────────────
+    {
+        "id": "mcp-postgres",
+        "name": "PostgreSQL MCP",
+        "category": "Database",
+        "install_mode": "npm",
+        "package": "@modelcontextprotocol/server-postgres",
+        "description": "PostgreSQL 데이터베이스에 연결해 쿼리 실행, 스키마 탐색, 데이터 분석을 수행합니다.",
+        "keywords": ["postgres", "postgresql", "database", "sql", "db", "데이터베이스", "쿼리"],
+        "capabilities": ["SQL 쿼리 실행", "스키마 탐색", "테이블 분석"],
+        "env_vars": [{"name": "POSTGRES_CONNECTION_STRING", "description": "postgresql://user:pass@host:5432/db"}],
+    },
+    {
+        "id": "mcp-sqlite",
+        "name": "SQLite MCP",
+        "category": "Database",
+        "install_mode": "npm",
+        "package": "@modelcontextprotocol/server-sqlite",
+        "description": "로컬 SQLite 파일에 쿼리를 실행하고 데이터를 탐색합니다.",
+        "keywords": ["sqlite", "database", "sql", "local", "로컬", "데이터베이스"],
+        "capabilities": ["SQLite 쿼리", "테이블 탐색", "데이터 집계"],
+        "env_vars": [{"name": "SQLITE_DB_PATH", "description": "/path/to/database.db"}],
+    },
+    # ── 검색 / 웹 ────────────────────────────────────────────────────────────
+    {
+        "id": "mcp-brave-search",
+        "name": "Brave Search MCP",
+        "category": "Search / web",
+        "install_mode": "npm",
+        "package": "@modelcontextprotocol/server-brave-search",
+        "description": "Brave Search API로 실시간 웹 검색 결과를 가져옵니다.",
+        "keywords": ["search", "web", "brave", "websearch", "검색", "웹검색"],
+        "capabilities": ["실시간 웹 검색", "뉴스 검색", "이미지 검색"],
+        "env_vars": [{"name": "BRAVE_API_KEY", "description": "Brave Search API 키 (search.brave.com)"}],
+    },
+    {
+        "id": "mcp-tavily",
+        "name": "Tavily Search MCP",
+        "category": "Search / web",
+        "install_mode": "npm",
+        "package": "tavily-mcp",
+        "description": "AI 최적화 웹 검색 엔진 Tavily로 고품질 검색 결과를 가져옵니다.",
+        "keywords": ["search", "tavily", "ai search", "검색", "AI검색"],
+        "capabilities": ["AI 최적화 검색", "요약 검색 결과"],
+        "env_vars": [{"name": "TAVILY_API_KEY", "description": "app.tavily.com에서 발급"}],
+    },
+    {
+        "id": "mcp-puppeteer",
+        "name": "Puppeteer MCP",
+        "category": "Browser automation",
+        "install_mode": "npm",
+        "package": "@modelcontextprotocol/server-puppeteer",
+        "description": "Puppeteer로 브라우저를 제어하고 웹 스크래핑, 스크린샷, 자동화를 수행합니다.",
+        "keywords": ["puppeteer", "browser", "scraping", "screenshot", "automation", "스크래핑", "자동화"],
+        "capabilities": ["웹 스크래핑", "스크린샷", "폼 자동화", "클릭/입력"],
+    },
+    # ── 배포 / 인프라 ─────────────────────────────────────────────────────────
+    {
+        "id": "mcp-vercel",
+        "name": "Vercel MCP",
+        "category": "Deployment",
+        "install_mode": "npm",
+        "package": "@vercel/mcp-adapter",
+        "description": "Vercel 프로젝트 배포 상태 확인, 로그 조회, 환경 변수 관리를 수행합니다.",
+        "keywords": ["vercel", "deploy", "deployment", "serverless", "배포", "버셀"],
+        "capabilities": ["배포 상태 확인", "로그 조회", "환경 변수 관리"],
+        "env_vars": [{"name": "VERCEL_API_TOKEN", "description": "Vercel 계정 토큰"}],
+    },
+    {
+        "id": "mcp-cloudflare",
+        "name": "Cloudflare MCP",
+        "category": "Deployment / CDN",
+        "install_mode": "npm",
+        "package": "@cloudflare/mcp-server-cloudflare",
+        "description": "Cloudflare Workers, KV, R2, D1 등 Cloudflare 서비스를 관리합니다.",
+        "keywords": ["cloudflare", "workers", "cdn", "kv", "r2", "클라우드플레어"],
+        "capabilities": ["Workers 배포", "KV/R2 관리", "DNS 조회", "D1 쿼리"],
+        "env_vars": [{"name": "CLOUDFLARE_API_TOKEN", "description": "Cloudflare API 토큰"}],
+    },
+    {
+        "id": "mcp-docker",
+        "name": "Docker MCP",
+        "category": "Infrastructure",
+        "install_mode": "npm",
+        "package": "docker-mcp",
+        "description": "Docker 컨테이너 목록 조회, 실행/중지, 로그 확인을 수행합니다.",
+        "keywords": ["docker", "container", "devops", "도커", "컨테이너", "인프라"],
+        "capabilities": ["컨테이너 관리", "이미지 조회", "로그 확인", "실행/중지"],
+    },
+    # ── SaaS / 결제 ───────────────────────────────────────────────────────────
+    {
+        "id": "mcp-stripe",
+        "name": "Stripe MCP",
+        "category": "Payments",
+        "install_mode": "npm",
+        "package": "@stripe/agent-toolkit",
+        "description": "Stripe 결제, 고객, 구독, 인보이스를 조회하고 관리합니다.",
+        "keywords": ["stripe", "payment", "billing", "subscription", "결제", "스트라이프"],
+        "capabilities": ["결제 조회", "고객 관리", "구독 확인", "인보이스"],
+        "env_vars": [{"name": "STRIPE_SECRET_KEY", "description": "Stripe Secret Key (sk_...)"}],
+    },
+    {
+        "id": "mcp-supabase",
+        "name": "Supabase MCP",
+        "category": "Database / BaaS",
+        "install_mode": "npm",
+        "package": "@supabase/mcp-server-supabase",
+        "description": "Supabase 프로젝트의 DB 쿼리, Auth 관리, Storage 파일 접근을 수행합니다.",
+        "keywords": ["supabase", "database", "auth", "storage", "supabase", "슈퍼베이스"],
+        "capabilities": ["DB 쿼리", "Auth 사용자 조회", "Storage 파일 관리"],
+        "env_vars": [
+            {"name": "SUPABASE_URL", "description": "https://xxx.supabase.co"},
+            {"name": "SUPABASE_SERVICE_ROLE_KEY", "description": "service_role 키"},
+        ],
+    },
+    {
+        "id": "mcp-hubspot",
+        "name": "HubSpot MCP",
+        "category": "CRM / marketing",
+        "install_mode": "npm",
+        "package": "@hubspot/mcp-server",
+        "description": "HubSpot CRM의 연락처, 딜, 캠페인 데이터를 조회하고 분석합니다.",
+        "keywords": ["hubspot", "crm", "marketing", "sales", "허브스팟", "CRM"],
+        "capabilities": ["연락처 조회", "딜 파이프라인", "캠페인 분석"],
+        "env_vars": [{"name": "HUBSPOT_ACCESS_TOKEN", "description": "HubSpot Private App 토큰"}],
+    },
+    # ── AI / 메모리 ───────────────────────────────────────────────────────────
+    {
+        "id": "mcp-memory",
+        "name": "Memory MCP (공식)",
+        "category": "Memory / knowledge",
+        "install_mode": "npm",
+        "package": "@modelcontextprotocol/server-memory",
+        "description": "대화 간 지속 메모리를 저장하고 검색하는 공식 MCP 서버입니다.",
+        "keywords": ["memory", "remember", "knowledge", "기억", "메모리", "지식"],
+        "capabilities": ["장기 기억 저장", "메모리 검색", "엔티티 추적"],
+    },
+    {
+        "id": "mcp-sequential-thinking",
+        "name": "Sequential Thinking MCP",
+        "category": "AI / reasoning",
+        "install_mode": "npm",
+        "package": "@modelcontextprotocol/server-sequential-thinking",
+        "description": "복잡한 문제를 단계별로 분해해 추론하는 사고 흐름 도구입니다.",
+        "keywords": ["reasoning", "thinking", "chain of thought", "추론", "사고"],
+        "capabilities": ["단계별 추론", "문제 분해", "사고 흐름 추적"],
+    },
+    # ── 커뮤니케이션 ──────────────────────────────────────────────────────────
+    {
+        "id": "mcp-discord",
+        "name": "Discord MCP",
+        "category": "Communication",
+        "install_mode": "npm",
+        "package": "discord-mcp",
+        "description": "Discord 서버 채널 메시지 전송, 읽기, 관리 자동화를 수행합니다.",
+        "keywords": ["discord", "message", "channel", "디스코드", "메시지", "알림"],
+        "capabilities": ["메시지 전송", "채널 읽기", "알림 자동화"],
+        "env_vars": [{"name": "DISCORD_BOT_TOKEN", "description": "Discord Bot 토큰"}],
+    },
+    {
+        "id": "mcp-telegram",
+        "name": "Telegram MCP",
+        "category": "Communication",
+        "install_mode": "npm",
+        "package": "telegram-mcp",
+        "description": "Telegram 봇을 통한 메시지 전송, 수신, 알림 자동화를 수행합니다.",
+        "keywords": ["telegram", "bot", "message", "텔레그램", "봇", "메시지"],
+        "capabilities": ["메시지 전송/수신", "알림 자동화", "그룹 관리"],
+        "env_vars": [{"name": "TELEGRAM_BOT_TOKEN", "description": "BotFather에서 발급한 토큰"}],
+    },
+    # ── 개발 도구 ─────────────────────────────────────────────────────────────
+    {
+        "id": "mcp-everything",
+        "name": "Everything MCP (테스트)",
+        "category": "Developer tools",
+        "install_mode": "npm",
+        "package": "@modelcontextprotocol/server-everything",
+        "description": "MCP 연결 테스트용 모든 기능이 포함된 데모 서버입니다.",
+        "keywords": ["test", "demo", "everything", "테스트", "개발"],
+        "capabilities": ["MCP 기능 테스트", "프로토타입"],
+    },
 ]
 
 # ── Remote MCP Registry (registry.modelcontextprotocol.io) ───────────────────
@@ -6316,6 +6505,106 @@ async def mcp_registry_refresh(request: Request):
     return {"status": "ok", "total": len(registry), "remote": len(_REMOTE_REGISTRY_CACHE)}
 
 
+@app.get("/mcp/claude-code-servers")
+async def mcp_claude_code_servers(request: Request):
+    """Read ~/.claude/settings.json mcpServers and return them as Lattice MCP items."""
+    require_user(request)
+    settings_path = Path.home() / ".claude" / "settings.json"
+    if not settings_path.exists():
+        return {"servers": []}
+    try:
+        with open(settings_path, "r", encoding="utf-8") as f:
+            settings = json.load(f)
+        mcp_servers = settings.get("mcpServers", {})
+        servers = []
+        for name, cfg in mcp_servers.items():
+            cmd = cfg.get("command", "")
+            args = cfg.get("args", [])
+            package = " ".join([cmd] + args) if args else cmd
+            env = cfg.get("env", {})
+            env_vars = [{"name": k, "value": v} for k, v in env.items()]
+            servers.append({
+                "id": f"claude-code:{name}",
+                "name": name,
+                "description": f"Claude Code MCP: {package}",
+                "package": package,
+                "icon": "🤖",
+                "category": "Claude Code",
+                "source": "claude-code",
+                "installed": True,
+                "env_vars": env_vars,
+            })
+        return {"servers": servers}
+    except Exception as e:
+        logging.warning("mcp_claude_code_servers failed: %s", e)
+        return {"servers": []}
+
+
+_CUSTOM_MCP_FILE = DATA_DIR / "custom_mcps.json"
+
+def _load_custom_mcps() -> List[Dict]:
+    if not _CUSTOM_MCP_FILE.exists():
+        return []
+    try:
+        with open(_CUSTOM_MCP_FILE, "r", encoding="utf-8") as f:
+            return json.load(f)
+    except Exception:
+        return []
+
+def _save_custom_mcps(items: List[Dict]):
+    with open(_CUSTOM_MCP_FILE, "w", encoding="utf-8") as f:
+        json.dump(items, f, ensure_ascii=False, indent=2)
+
+
+@app.get("/mcp/custom")
+async def mcp_custom_list(request: Request):
+    """Return user-added custom MCP entries."""
+    require_user(request)
+    return {"custom": _load_custom_mcps()}
+
+
+@app.post("/mcp/custom")
+async def mcp_custom_add(req: McpCustomRequest, request: Request):
+    """Save a custom MCP entry (user-defined)."""
+    require_user(request)
+    if not req.name.strip():
+        raise HTTPException(status_code=400, detail="name은 필수입니다.")
+    if not req.package.strip():
+        raise HTTPException(status_code=400, detail="package는 필수입니다.")
+    items = _load_custom_mcps()
+    entry = {
+        "id": f"custom:{req.name.strip().lower().replace(' ', '-')}",
+        "name": req.name.strip(),
+        "package": req.package.strip(),
+        "description": req.description.strip(),
+        "category": req.category or "custom",
+        "icon": req.icon or "🔌",
+        "env_vars": req.env_vars or [],
+        "install_mode": "npm",
+        "source": "custom",
+        "installed": False,
+        "added_at": datetime.now().isoformat(),
+    }
+    # overwrite if same id
+    items = [e for e in items if e["id"] != entry["id"]]
+    items.append(entry)
+    _save_custom_mcps(items)
+    return {"status": "ok", "entry": entry}
+
+
+@app.delete("/mcp/custom/{mcp_id:path}")
+async def mcp_custom_delete(mcp_id: str, request: Request):
+    """Remove a custom MCP entry."""
+    require_admin(request)
+    items = _load_custom_mcps()
+    before = len(items)
+    items = [e for e in items if e["id"] != mcp_id]
+    if len(items) == before:
+        raise HTTPException(status_code=404, detail="항목을 찾을 수 없습니다.")
+    _save_custom_mcps(items)
+    return {"status": "ok"}
+
+
 # ── Skills & Plugin Directory endpoints ───────────────────────────────────────
 
 @app.get("/skills/marketplace")

package/static/chat.html

@@ -534,6 +534,44 @@
         }
         .mcp-install-btn:hover { background: rgba(34,211,160,0.15); }
         .mcp-install-btn.installed { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--faint); }
+        /* MCP 소스 배지 */
+        .mcp-source-badge {
+            font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
+            text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0;
+        }
+        .mcp-source-badge.claude-code { background: rgba(100,180,255,0.12); color: #64b4ff; border: 1px solid rgba(100,180,255,0.2); }
+        .mcp-source-badge.custom { background: rgba(255,180,60,0.12); color: #ffb43c; border: 1px solid rgba(255,180,60,0.2); }
+        /* MCP 탭 */
+        .mcp-tabs { display: flex; gap: 4px; padding: 12px 20px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
+        .mcp-tab {
+            padding: 7px 14px; border-radius: 8px 8px 0 0; font-size: 12px; font-weight: 600;
+            color: var(--faint); cursor: pointer; border: none; background: none;
+            border-bottom: 2px solid transparent; transition: all .15s;
+        }
+        .mcp-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(34,211,160,0.06); }
+        .mcp-tab:hover:not(.active) { color: var(--text); background: rgba(255,255,255,0.04); }
+        /* Custom MCP 추가 폼 */
+        .mcp-add-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
+        .mcp-add-form label { font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
+        .mcp-add-form input, .mcp-add-form textarea, .mcp-add-form select {
+            width: 100%; padding: 8px 11px; border-radius: 8px; font-size: 13px;
+            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
+            color: var(--text); outline: none; transition: border .15s; box-sizing: border-box;
+        }
+        .mcp-add-form input:focus, .mcp-add-form textarea:focus { border-color: rgba(34,211,160,0.4); }
+        .mcp-add-form .field-hint { font-size: 10.5px; color: var(--faint); margin-top: -6px; }
+        .mcp-submit-btn {
+            padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 700;
+            background: rgba(34,211,160,0.12); border: 1px solid rgba(34,211,160,0.3);
+            color: var(--accent); cursor: pointer; transition: all .15s; align-self: flex-end;
+        }
+        .mcp-submit-btn:hover { background: rgba(34,211,160,0.22); }
+        .mcp-delete-btn {
+            padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
+            background: rgba(255,80,80,0.08); border: 1px solid rgba(255,80,80,0.2);
+            color: #ff6b6b; cursor: pointer; transition: all .15s; flex-shrink: 0;
+        }
+        .mcp-delete-btn:hover { background: rgba(255,80,80,0.18); }
         .acct-modal {
             background: var(--surface, #1e293b);
             border: 1px solid rgba(255,255,255,0.08);
@@ -3160,6 +3198,11 @@
                         <h3><i class="ti ti-plug-connected"></i> MCP 서버 관리</h3>
                         <button class="mcp-modal-close" onclick="closeMcpModal()"><i class="ti ti-x"></i></button>
                     </div>
+                    <div class="mcp-tabs" id="mcp-tabs">
+                        <button class="mcp-tab active" onclick="switchMcpTab('registry',this)">🗂 레지스트리</button>
+                        <button class="mcp-tab" onclick="switchMcpTab('claude-code',this)">🤖 Claude Code</button>
+                        <button class="mcp-tab" onclick="switchMcpTab('custom',this)">➕ 직접 추가</button>
+                    </div>
                     <div class="mcp-modal-body" id="mcp-modal-body">
                         <div style="color:var(--faint);font-size:13px;text-align:center;padding:24px">로딩 중...</div>
                     </div>
@@ -6952,18 +6995,39 @@
 
     <script>
     // ── MCP 관리 모달 ────────────────────────────────────────────────────────
+    let _mcpCurrentTab = 'registry';
+
     async function openMcpModal() {
         document.getElementById('mcp-modal-overlay').classList.add('open');
-        await renderMcpModal();
+        await renderMcpModal(_mcpCurrentTab);
     }
 
     function closeMcpModal() {
         document.getElementById('mcp-modal-overlay').classList.remove('open');
     }
 
-    async function renderMcpModal() {
+    function switchMcpTab(tab, btn) {
+        _mcpCurrentTab = tab;
+        document.querySelectorAll('.mcp-tab').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        renderMcpModal(tab);
+    }
+
+    async function renderMcpModal(tab) {
+        tab = tab || _mcpCurrentTab || 'registry';
         const body = document.getElementById('mcp-modal-body');
         body.innerHTML = '<div style="color:var(--faint);font-size:13px;text-align:center;padding:24px">로딩 중...</div>';
+
+        if (tab === 'claude-code') {
+            await renderMcpClaudeCode(body);
+        } else if (tab === 'custom') {
+            await renderMcpCustom(body);
+        } else {
+            await renderMcpRegistry(body);
+        }
+    }
+
+    async function renderMcpRegistry(body) {
         try {
             const [installedRes, toolsRes] = await Promise.all([
                 apiFetch('/mcp/installed'),
@@ -7015,6 +7079,148 @@
         }
     }
 
+    async function renderMcpClaudeCode(body) {
+        try {
+            const res = await apiFetch('/mcp/claude-code-servers');
+            const data = res.ok ? await res.json() : { servers: [] };
+            const servers = data.servers || [];
+
+            if (!servers.length) {
+                body.innerHTML = `
+                    <div style="color:var(--faint);font-size:13px;text-align:center;padding:32px 24px;">
+                        <div style="font-size:28px;margin-bottom:10px">🤖</div>
+                        <div><strong>Claude Code MCP 없음</strong></div>
+                        <div style="margin-top:6px;font-size:11px">~/.claude/settings.json에 mcpServers 항목이 없습니다.</div>
+                        <div style="margin-top:4px;font-size:11px">Claude Code에서 MCP를 설치하면 여기에 자동으로 표시됩니다.</div>
+                    </div>`;
+                return;
+            }
+
+            let html = '<div class="mcp-section-label">Claude Code에서 설치된 MCP</div>';
+            html += servers.map(srv => `
+                <div class="mcp-item">
+                    <div class="mcp-item-icon">${srv.icon || '🤖'}</div>
+                    <div class="mcp-item-info">
+                        <div class="mcp-item-name" style="display:flex;align-items:center;gap:6px;">
+                            ${escapeHtml(srv.name)}
+                            <span class="mcp-source-badge claude-code">Claude Code</span>
+                        </div>
+                        <div class="mcp-item-desc" title="${escapeHtml(srv.package || '')}">${escapeHtml(srv.package || '')}</div>
+                        ${srv.env_vars && srv.env_vars.length ? `<div class="mcp-item-desc" style="margin-top:2px">ENV: ${escapeHtml(srv.env_vars.map(e=>e.name).join(', '))}</div>` : ''}
+                    </div>
+                    <span class="mcp-item-status">활성</span>
+                </div>
+            `).join('');
+            body.innerHTML = html;
+        } catch (e) {
+            body.innerHTML = `<div style="color:#ff6b6b;font-size:13px;text-align:center;padding:24px">로드 실패: ${escapeHtml(e.message)}</div>`;
+        }
+    }
+
+    async function renderMcpCustom(body) {
+        // Load existing custom MCPs
+        let existingHtml = '';
+        try {
+            const res = await apiFetch('/mcp/custom');
+            const data = res.ok ? await res.json() : { custom: [] };
+            const customs = data.custom || [];
+            if (customs.length) {
+                existingHtml = '<div class="mcp-section-label">직접 추가한 MCP</div>';
+                existingHtml += customs.map(c => `
+                    <div class="mcp-item" id="mcp-custom-item-${escapeHtml(c.id)}">
+                        <div class="mcp-item-icon">${c.icon || '🔌'}</div>
+                        <div class="mcp-item-info">
+                            <div class="mcp-item-name" style="display:flex;align-items:center;gap:6px;">
+                                ${escapeHtml(c.name)}
+                                <span class="mcp-source-badge custom">Custom</span>
+                            </div>
+                            <div class="mcp-item-desc" title="${escapeHtml(c.package||'')}">${escapeHtml(c.package||'')}</div>
+                            ${c.description ? `<div class="mcp-item-desc">${escapeHtml(c.description)}</div>` : ''}
+                        </div>
+                        <button class="mcp-delete-btn" onclick="deleteCustomMcp('${escapeHtml(c.id)}')">삭제</button>
+                    </div>
+                `).join('');
+            }
+        } catch {}
+
+        body.innerHTML = existingHtml + `
+            <div class="mcp-section-label" style="margin-top:${existingHtml?'16px':'4px'}">새 MCP 추가</div>
+            <div class="mcp-add-form">
+                <div>
+                    <label>이름 *</label>
+                    <input id="mcp-add-name" type="text" placeholder="예: my-database" />
+                </div>
+                <div>
+                    <label>패키지 / 명령어 *</label>
+                    <input id="mcp-add-package" type="text" placeholder="예: @company/mcp-server 또는 npx mcp-server" />
+                    <div class="field-hint">npm 패키지명 또는 실행 명령어</div>
+                </div>
+                <div>
+                    <label>설명</label>
+                    <input id="mcp-add-desc" type="text" placeholder="이 MCP가 하는 일 (선택)" />
+                </div>
+                <div>
+                    <label>필요한 환경변수 (쉼표 구분)</label>
+                    <input id="mcp-add-envs" type="text" placeholder="예: API_KEY, BASE_URL" />
+                    <div class="field-hint">서버 실행 시 필요한 env var 이름들</div>
+                </div>
+                <div style="display:flex;align-items:center;gap:8px;">
+                    <input id="mcp-add-icon" type="text" placeholder="🔌" style="width:56px;text-align:center;" maxlength="4" />
+                    <label style="margin:0">아이콘 (이모지)</label>
+                </div>
+                <div id="mcp-add-error" style="color:#ff6b6b;font-size:12px;display:none;"></div>
+                <button class="mcp-submit-btn" onclick="submitCustomMcp()">➕ MCP 추가</button>
+            </div>
+        `;
+    }
+
+    async function submitCustomMcp() {
+        const name = document.getElementById('mcp-add-name').value.trim();
+        const pkg = document.getElementById('mcp-add-package').value.trim();
+        const desc = document.getElementById('mcp-add-desc').value.trim();
+        const envsRaw = document.getElementById('mcp-add-envs').value.trim();
+        const icon = document.getElementById('mcp-add-icon').value.trim() || '🔌';
+        const errEl = document.getElementById('mcp-add-error');
+        errEl.style.display = 'none';
+
+        if (!name) { errEl.textContent = '이름을 입력해주세요.'; errEl.style.display='block'; return; }
+        if (!pkg)  { errEl.textContent = '패키지를 입력해주세요.'; errEl.style.display='block'; return; }
+
+        const env_vars = envsRaw ? envsRaw.split(',').map(s=>({name:s.trim(),description:''})).filter(e=>e.name) : [];
+        try {
+            const res = await apiFetch('/mcp/custom', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, package: pkg, description: desc, icon, env_vars }),
+            });
+            if (res.ok) {
+                await renderMcpModal('custom');
+            } else {
+                const d = await res.json().catch(()=>({}));
+                errEl.textContent = d.detail || '추가 실패';
+                errEl.style.display = 'block';
+            }
+        } catch (e) {
+            errEl.textContent = e.message || '네트워크 오류';
+            errEl.style.display = 'block';
+        }
+    }
+
+    async function deleteCustomMcp(id) {
+        if (!confirm('이 MCP를 삭제하시겠습니까?')) return;
+        try {
+            const res = await apiFetch('/mcp/custom/' + encodeURIComponent(id), { method: 'DELETE' });
+            if (res.ok) {
+                await renderMcpModal('custom');
+            } else {
+                const d = await res.json().catch(()=>({}));
+                alert(d.detail || '삭제 실패');
+            }
+        } catch (e) {
+            alert(e.message || '네트워크 오류');
+        }
+    }
+
     async function installMcp(id) {
         const btn = document.querySelector(`#mcp-item-${CSS.escape(id)} .mcp-install-btn`);
         if (btn) { btn.disabled = true; btn.textContent = '설치 중...'; }
@@ -7025,7 +7231,7 @@
                 body: JSON.stringify({ mcp_id: id }),
             });
             if (res.ok) {
-                await renderMcpModal();
+                await renderMcpModal('registry');
             } else {
                 const d = await res.json().catch(() => ({}));
                 if (btn) { btn.disabled = false; btn.textContent = '설치'; }