---
tagName: ai-portal.mcp-tools
displayName: WrappedAiPortalMcpTools
description: MCP 工具列表组件，按服务分组展示工具信息，支持按平台分类过滤和吸顶标签栏。
category: display-component
source: "@next-bricks/ai-portal"
---

# WrappedAiPortalMcpTools

> MCP 工具列表组件，按服务分组展示工具信息，支持按平台分类过滤和吸顶标签栏。

## 导入

```tsx
import { WrappedAiPortalMcpTools } from "@easyops/wrapped-components";
```

## Props

| 属性      | 类型        | 必填 | 默认值 | 说明                                                                       |
| --------- | ----------- | ---- | ------ | -------------------------------------------------------------------------- |
| list      | `McpTool[]` | 否   | -      | MCP 工具列表数据，按 server.id 自动分组并归属平台分类                      |
| stickyTop | `number`    | 否   | -      | 平台过滤标签栏的吸顶偏移量（px），设置后标签栏使用吸顶容器，未设置则不吸顶 |

## Examples

### Basic

展示基础 MCP 工具列表，按服务分组展示。

```tsx
<WrappedAiPortalMcpTools
  list={[
    {
      name: "list_hosts",
      title: "查询主机列表",
      description: "查询 CMDB 中的主机资源列表，支持按条件过滤。",
      server: { id: "cmdb", name: "CMDB" },
    },
    {
      name: "get_host_detail",
      title: "获取主机详情",
      description: "根据主机实例 ID 获取主机的详细信息，包括配置、状态等。",
      server: { id: "cmdb", name: "CMDB" },
    },
    {
      name: "list_alerts",
      title: "查询告警列表",
      description: "获取当前活跃告警列表，支持按严重性筛选。",
      server: { id: "alert", name: "监控事件" },
    },
  ]}
/>
```

### With Custom Icons

为工具配置自定义图标，增强视觉区分。

```tsx
<WrappedAiPortalMcpTools
  list={[
    {
      name: "deploy_app",
      title: "部署应用",
      description: "向 Kubernetes 集群部署应用，支持指定命名空间和镜像版本。",
      icon: { lib: "antd", icon: "cloud-upload" },
      server: { id: "kubernetes", name: "Kubernetes" },
    },
    {
      name: "scale_deployment",
      title: "弹性伸缩",
      description: "调整 Kubernetes Deployment 的副本数量。",
      icon: { lib: "antd", icon: "apartment" },
      server: { id: "kubernetes", name: "Kubernetes" },
    },
    {
      name: "execute_llm",
      title: "调用大模型",
      description: "向大模型发送请求并获取响应。",
      icon: { lib: "antd", icon: "robot" },
      server: { id: "llm", name: "大模型" },
    },
  ]}
/>
```

### With Sticky Tabs

启用吸顶平台过滤标签栏，适合内容较多的场景。

```tsx
<WrappedAiPortalMcpTools
  stickyTop={0}
  list={[
    {
      name: "list_hosts",
      title: "查询主机列表",
      description: "查询 CMDB 中的主机资源列表，支持按条件过滤。",
      server: { id: "cmdb", name: "CMDB" },
    },
    {
      name: "create_page",
      title: "创建页面",
      description: "在低代码平台中创建一个新的页面。",
      server: { id: "web-builder", name: "低代码" },
    },
    {
      name: "list_dashboards",
      title: "查询仪表盘",
      description: "获取 Grafana 中所有仪表盘列表。",
      server: { id: "grafana", name: "Grafana" },
    },
  ]}
/>
```