# Univer Icons MCP

> 将 Univer Icons MCP 接入 AI Agent，按用途查找图标并生成 React 或 Vue 代码。

- Human documentation: [https://docs.univer.ai/zh-CN/guides/icons/ai](https://docs.univer.ai/zh-CN/guides/icons/ai)

- Agent Markdown: [https://docs.univer.ai/zh-CN/guides/icons/ai.md](https://docs.univer.ai/zh-CN/guides/icons/ai.md)

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [icons/ai.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/icons/ai.zh-CN.mdx)

---

Univer Icons MCP 让 AI Agent 能够查找图标并读取组件用法。你可以直接描述界面需要表达的操作，例如“复制选中内容”或“插入图片”，让 AI Agent 选择图标并生成 React 或 Vue 代码。

## 连接 AI Agent

MCP（Model Context Protocol）是 AI Agent 连接外部工具的协议。在支持远程 MCP 的 AI Agent 中添加服务，填写以下信息：

| 设置   | 值                                  |
| ---- | ---------------------------------- |
| 名称   | `univer-icons`                     |
| 传输方式 | Streamable HTTP                    |
| 服务地址 | `https://docs.univer.ai/mcp/icons` |
| 认证   | 无需 API Key                         |

保存并启用服务后，AI Agent 可以使用以下工具：

| 工具             | 用途                  |
| -------------- | ------------------- |
| `search_icons` | 根据用途查找候选图标          |
| `get_icon`     | 获取图标的导入方式、代码示例和外观设置 |

## 描述你需要的图标

告诉 AI Agent 你使用的框架、图标需要表达的操作，以及尺寸和配色要求。例如：

> 使用 Univer Icons MCP，为 React 工具栏的“复制选中内容”按钮选择一个单色图标。图标大小为 20 px，颜色跟随按钮文字，并为按钮添加可访问名称。

如果你使用 Vue，也可以这样描述：

> 使用 Univer Icons MCP，为 Vue 3 的填充颜色按钮选择一个双色图标。主色使用深灰，强调色使用浅灰，生成组件的导入和使用代码。

需要修改方案时，继续描述变化即可，例如“换成单色图标”或“放大到 32 px，并保持线条粗细”。

## 将图标用到项目中

拿到代码后，在[图标预览](https://docs.univer.ai/zh-CN/guides/icons/all-icons.md)中搜索组件名，确认图形、尺寸和配色符合你的界面。按项目使用的框架安装图标包，并将按钮事件接到业务逻辑。

具体步骤见[在 React 中集成](https://docs.univer.ai/zh-CN/guides/icons/react.md)或[在 Vue 中集成](https://docs.univer.ai/zh-CN/guides/icons/vue.md)。