# Univer Icons MCP

> 將 AI Agent 連接到 Univer Icons MCP，尋找圖示並產生 React 或 Vue 程式碼。

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

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

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

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

---

Univer Icons MCP 讓 AI Agent 尋找圖示並讀取元件用法。只要描述操作，例如複製選取內容或插入圖片，AI Agent 就能選擇圖示，並產生 React 或 Vue 程式碼。

## 連接 AI Agent

Model Context Protocol（MCP）讓 AI Agent 連接外部工具。在支援遠端 MCP 的 AI Agent 中新增伺服器，使用以下設定：

| 設定      | 值                                  |
| ------- | ---------------------------------- |
| 名稱      | `univer-icons`                     |
| 傳輸方式    | Streamable HTTP                    |
| 伺服器 URL | `https://docs.univer.ai/mcp/icons` |
| 驗證      | 不需要 API 金鑰                         |

儲存並啟用伺服器後，AI Agent 即可使用以下工具：

| 工具             | 用途                |
| -------------- | ----------------- |
| `search_icons` | 依用途尋找候選圖示         |
| `get_icon`     | 讀取匯入方式、程式碼範例與外觀設定 |

## 描述所需圖示

請包含使用的框架、圖示代表的操作，以及尺寸或顏色要求。例如：

> 使用 Univer Icons MCP，為 React 工具列中複製選取內容的按鈕選擇單色圖示。圖示大小為 20 px，繼承按鈕文字顏色，並為按鈕提供無障礙名稱。

Vue 專案可以這樣描述：

> 使用 Univer Icons MCP，為 Vue 3 的填滿顏色按鈕選擇雙色圖示。主色使用深灰色，強調色使用淺灰色。產生匯入與元件程式碼。

若要調整結果，請直接描述變更，例如：「改用單色圖示」，或「放大到 32 px，但保留細線條」。

## 在專案中使用圖示

在[圖示預覽](https://docs.univer.ai/zh-TW/guides/icons/all-icons.md)中搜尋回傳的元件名稱，確認形狀、尺寸與顏色符合介面。安裝對應框架的套件，並將按鈕事件連接到應用程式邏輯。

具體步驟請參閱[在 React 中整合](https://docs.univer.ai/zh-TW/guides/icons/react.md)或[在 Vue 中整合](https://docs.univer.ai/zh-TW/guides/icons/vue.md)。