McpServerPopup 组件

McpServerPopup 组件

概述

McpServerPopup 是 MCP 服务器配置的弹出式组件，提供完整的 MCP 集成界面，包括模式切换、筛选器和配置展示。

文件路径

src/components/mcp/mcp-server-popup.tsx

功能特性

  • Popover 弹窗: 点击按钮展开的浮动面板
  • 模式切换: Remote / Local 模式选择
  • 筛选器: 按用户、分类、标签筛选 Prompts
  • API 密钥获取: 自动获取当前用户的 API 密钥
  • 配置预览: 使用 McpConfigTabs 展示配置
  • 响应式设计: 适配移动端和桌面端

接口定义

interface McpServerPopupProps {
  initialUsers?: string[];        // 预填充用户
  initialCategories?: string[];   // 预填充分类
  initialTags?: string[];         // 预填充标签
  baseUrl?: string;               // MCP 服务器基础 URL
  showOfficialBranding?: boolean; // 显示官方品牌
}

// MCP Logo 组件
export function McpIcon({ className }: { className?: string }): JSX.Element

使用示例

import { McpServerPopup } from "@/components/mcp/mcp-server-popup";

// 基础用法
<McpServerPopup />

// 带预填充筛选器
<McpServerPopup
  initialUsers={["john", "jane"]}
  initialCategories={["coding", "writing"]}
  initialTags={["react", "ai"]}
  showOfficialBranding={true}
/>

UI 结构

┌─────────────────────────────┐
│  [MCP Logo]  MCP Server  [Remote/Local] │
├─────────────────────────────┤
│  描述文本                     │
├─────────────────────────────┤
│  [Client Tabs]               │
│  [Mode Toggle]               │
│  [Config Code] [Copy]        │
├─────────────────────────────┤
│  [API Key Link] (if needed)  │
├─────────────────────────────┤
│  ▼ Customize Filters         │
│  ─────────────────────────   │
│  Users: [input] [+]          │
│  [tag] [tag] [tag]           │
│                              │
│  Categories: [input] [+]     │
│  [tag] [tag]                 │
│                              │
│  Tags: [input] [+]           │
│  [tag] [tag] [tag]           │
└─────────────────────────────┘

筛选器功能

用户筛选

  • 输入用户名（自动移除 @ 前缀）
  • 按 Enter 或点击 + 添加
  • 显示为 Badge 形式
  • 点击 X 移除

分类筛选

  • 输入分类名称（自动转小写）
  • 同上交互

标签筛选

  • 输入标签名称（自动转小写）
  • 同上交互

查询参数构建

const queryParams = useMemo(() => {
  const params = new URLSearchParams();
  
  if (users.length > 0) {
    params.set("users", users.join(","));
  }
  if (categories.length > 0) {
    params.set("categories", categories.join(","));
  }
  if (tags.length > 0) {
    params.set("tags", tags.join(","));
  }
  
  return params.toString();
}, [users, categories, tags]);

API 密钥获取

useEffect(() => {
  if (isOpen && session?.user && !apiKey) {
    fetch("/api/user/api-key")
      .then(res => res.json())
      .then(data => {
        if (data.apiKey) setApiKey(data.apiKey);
      })
      .catch(() => {/* ignore */});
  }
}, [isOpen, session?.user, apiKey]);

组件导出 McpIcon，支持深色模式：

export function McpIcon({ className }: { className?: string }) {
  return (
    <>
      <img src="/mcp.svg" className="dark:hidden" />
      <img src="/mcp-dark.svg" className="hidden dark:block" />
    </>
  );
}

依赖

  • next-intl - 国际化
  • next-auth/react - 认证
  • next/link - 链接
  • lucide-react - 图标
  • @/components/ui/* - UI 组件

- Button - Input - Badge - Popover

  • @/lib/utils - cn 工具函数
  • @/lib/analytics - 分析
  • ./mcp-config-tabs - 配置标签组件

分析事件

// 打开弹窗时触发
analyticsMcp.openPopup();

注意事项

  1. 需要用户登录才能获取 API 密钥
  2. 未登录时显示生成 API 密钥的链接
  3. 弹窗宽度：移动端全宽减去边距，桌面端 480px
  4. 筛选器默认折叠，点击展开
  5. 所有筛选条件实时应用到配置
  6. 打开弹窗时自动获取 API 密钥（如果已登录）

响应式设计

断点弹窗宽度
移动端calc(100vw - 2rem)
桌面端 (sm:)480px
← 返回目录