Univer Icons MCP

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

连接 AI Agent

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

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

描述你需要的图标

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

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

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

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

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

将图标用到项目中

拿到代码后，在图标预览中搜索组件名，确认图形、尺寸和配色符合你的界面。按项目使用的框架安装图标包，并将按钮事件接到业务逻辑。

具体步骤见在 React 中集成或在 Vue 中集成。