McpConfigTabs 组件

McpConfigTabs 组件

概述

McpConfigTabs 是 MCP（Model Context Protocol）配置标签组件，为不同客户端生成对应的 MCP 服务器配置代码，支持远程和本地两种模式。

文件路径

src/components/mcp/mcp-config-tabs.tsx

功能特性

  • 多客户端支持: 6 种主流 AI 编辑器
  • 双模式切换: Remote / Local 模式
  • 配置生成: 自动生成对应格式的配置代码
  • 一键复制: 复制配置到剪贴板
  • API 密钥管理: 显示/隐藏 API 密钥
  • 官方品牌支持: Cursor/VS Code 快捷安装按钮

支持的客户端

客户端标识配置格式
VS CodevscodeJSON
WindsurfwindsurfJSON
CursorcursorJSON
Claudeclaude-codeCLI 命令
CodexcodexTOML
GeminigeminiCLI 命令

接口定义

type Client = "cursor" | "claude-code" | "vscode" | "codex" | "windsurf" | "gemini";
type Mode = "remote" | "local";

interface McpConfigTabsProps {
  baseUrl?: string;                    // MCP 服务器基础 URL
  queryParams?: string;                // URL 查询参数
  className?: string;                  // 额外的 CSS 类
  mode?: "remote" | "local";           // 外部控制模式
  onModeChange?: (mode: Mode) => void; // 模式变化回调
  hideModeToggle?: boolean;            // 隐藏模式切换
  apiKey?: string | null;              // API 密钥
  showOfficialBranding?: boolean;      // 显示官方品牌
}

配置格式

Remote 模式

使用 HTTP/SSE 连接到远程 MCP 服务器：

Cursor:

{
  "mcpServers": {
    "prompts.chat": {
      "url": "https://prompts.chat/api/mcp"
    }
  }
}

Claude:

claude mcp add --transport http prompts.chat https://prompts.chat/api/mcp

Local 模式

使用本地 npx 运行 MCP 服务器：

VS Code:

{
  "mcp": {
    "servers": {
      "prompts.chat": {
        "type": "stdio",
        "command": "npx",
        "args": ["-y", "@fkadev/prompts.chat-mcp"]
      }
    }
  }
}

使用示例

import { McpConfigTabs } from "@/components/mcp/mcp-config-tabs";

export default function McpPage() {
  return (
    <McpConfigTabs
      baseUrl="https://prompts.chat"
      queryParams="users=john&categories=ai"
      apiKey={user.apiKey}
      showOfficialBranding={true}
    />
  );
}

受控模式

const [mode, setMode] = useState<"remote" | "local">("remote");

<McpConfigTabs
  mode={mode}
  onModeChange={setMode}
  hideModeToggle  // 隐藏内部切换按钮
/>

NPM 包

本地模式使用的包：

@fkadev/prompts.chat-mcp

环境变量

本地模式支持的环境变量：

PROMPTS_API_KEY     // API 密钥
PROMPTS_QUERY       // 查询参数

快捷安装（官方品牌）

Cursor

const cursorConfig = {
  command: "npx",
  args: ["-y", NPM_PACKAGE],
};
const configBase64 = btoa(JSON.stringify(cursorConfig));
window.open(`cursor://anysphere.cursor-deeplink/mcp/install?...`, "_self");

VS Code

// 标准版
vscode:mcp/by-name/io.github.f/prompts.chat-mcp

// Insiders 版
vscode-insiders:mcp/by-name/io.github.f/prompts.chat-mcp

依赖

  • lucide-react - 图标
  • @/components/ui/button - 按钮
  • @/lib/utils - cn 工具函数
  • @/lib/analytics - 分析

注意事项

  1. API 密钥默认隐藏，点击可显示
  2. 复制配置时会触发分析事件
  3. 官方品牌按钮仅在 showOfficialBranding=true 时显示
  4. 本地模式需要安装 Node.js 和 npx
  5. 远程模式需要网络连接
  6. VS Code 配置使用 mcp.servers 格式，其他使用 mcpServers
← 返回目录