# 第一阶段 · 模块一 · 第十六节：MCP Components
什么是 MCP Components？Claude Code 如何集成 MCP 协议组件？MCP UI 组件有哪些？如何自定义 MCP 组件？
Claude Code 全局架构
┌─────────────────────────────────────────────────────────────────────┐
│ UI 层（ui/） │
│ │
│ MCP Components ← 本节 │
│ ├── MCP 菜单 │
│ ├── 工具面板 │
│ └── 连接状态 │
└─────────────────────────────────────────────────────────────────────┘
源码位置：`src/ui/components/mcp/`
MCP Components 是 Claude Code 中用于展示和管理 MCP 服务器连接的 UI 组件。
┌─────────────────────────────────────────────────────────────────────┐
│ MCP 组件架构 │
│ │
│ <MCPProvider> │
│ <MCPServerList> │
│ <MCPServerItem /> │
│ </MCPServerList> │
│ <MCPStatusBar /> │
│ </MCPProvider> │
└─────────────────────────────────────────────────────────────────────┘
// MCP 组件列表
MCPProvider // MCP 上下文 Provider
MCPServerList // 服务器列表
MCPServerItem // 单个服务器
MCPStatusBar // 状态栏
MCPServerDialog // 添加服务器对话框
MCPConfigPanel // 配置面板
问 1：MCP Components 和普通组件有什么区别？
// 普通组件：
// - 独立功能
// - 无外部依赖
// MCP Components：
// - 需要 MCP Context
// - 与 MCP 服务器交互
// - 管理连接状态
源码位置：`src/ui/components/mcp/MCPProvider.tsx`
// MCP Context Provider
const MCPContext = createContext<MCPContextType | null>(null)
export function MCPProvider({ children }) {
const [servers, setServers] = useState<MCPServer[]>([])
const [activeServer, setActiveServer] = useState<string | null>(null)
const value = {
servers,
activeServer,
connect: async (config: ServerConfig) => { /* ... */ },
disconnect: async (serverId: string) => { /* ... */ }
}
return (
<MCPContext.Provider value={value}>
{children}
</MCPContext.Provider>
)
}
// MCP 状态
interface MCPState {
servers: MCPServer[]
connections: Map<string, Connection>
selectedServer: string | null
error: MCPError | null
}
源码位置：`src/ui/components/mcp/MCPServerList.tsx`
// 服务器列表组件
function MCPServerList() {
const { servers, activeServer } = useMCP()
return (
<div className="mcp-server-list">
{servers.map(server => (
<MCPServerItem
key={server.id}
server={server}
isActive={server.id === activeServer}
/>
))}
</div>
)
}
// 单个服务器项
function MCPServerItem({ server, isActive }) {
return (
<div className={`server-item ${isActive ? 'active' : ''}`}>
<span className="server-name">{server.name}</span>
<span className={`status status-${server.status}`}>
{server.status}
</span>
</div>
)
}
源码位置：`src/ui/components/mcp/MCPStatusBar.tsx`
// 状态栏组件
function MCPStatusBar() {
const { servers } = useMCP()
const connectedCount = servers.filter(s => s.status === 'connected').length
return (
<div className="mcp-status-bar">
<span className="status-icon">🔌</span>
<span>MCP: {connectedCount}/{servers.length}</span>
</div>
)
}
// 自定义 MCP 组件
export function CustomMCPanel({ serverId }) {
const { getServer } = useMCP()
const server = getServer(serverId)
// 自定义渲染
return (
<div className="custom-panel">
{/* ... */}
</div>
)
}
答案：
// 调试方法：
// 1. 检查 Provider
// - 是否正确包裹
// - Context 值是否正确
// 2. 检查状态
// - DevTools 查看状态
// - 验证数据流
// 3. 检查连接
// - MCP 服务器是否运行
// - 网络是否通
答案：
// MCP UI 组件特点：
// 1. 上下文依赖
// - 需要 MCPContext 提供服务器状态
// - 依赖连接管理
// 2. 实时性要求
// - 服务器状态变化需要即时反映
// - 使用 useState/useEffect 监听变化
// 3. 错误处理
// - 连接失败需要显示错误状态
// - 需要重连机制
// 4. 权限考虑
// - 某些操作需要用户授权
// - UI 需要反映权限状态
答案：
// 自定义面板实现：
// 1. 使用 MCP Context
// const { servers, connect, disconnect } = useMCP()
// 2. 监听状态变化
// useEffect(() => {
// if (server.status === 'connected') {
// // 更新面板
// }
// }, [server.status])
// 3. 渲染自定义 UI
// return (
// <CustomPanel>
// <ServerStatus server={server} />
// <ConnectionControls onConnect={connect} onDisconnect={disconnect} />
// </CustomPanel>
// )
| 资源 | 说明 |
| `src/ui/components/mcp/` | MCP UI 组件 |
| MCP 协议文档 | MCP 组件集成 |