# Univer Icons MCP

> AI Agent を Univer Icons MCP に接続し、アイコンの検索と React・Vue コードの生成を行います。

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.2.0`

- Source: [icons/ai.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/icons/ai.ja-JP.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 の塗りつぶし色ボタン用の 2 色アイコンを選んでください。主色を濃いグレー、アクセントを薄いグレーにして、インポートとコンポーネントのコードを生成してください。

結果を調整するには、「単色アイコンにしてください」「線を細く保ったまま 32 px に拡大してください」のように変更点を伝えます。

## プロジェクトでアイコンを使う

返されたコンポーネント名を[アイコンプレビュー](https://docs.univer.ai/ja-JP/guides/icons/all-icons.md)で検索し、形状、サイズ、色がインターフェースに合うことを確認します。フレームワーク用のパッケージをインストールし、ボタンのイベントをアプリケーションの処理に接続してください。

実装手順は [React への組み込み](https://docs.univer.ai/ja-JP/guides/icons/react.md)または [Vue への組み込み](https://docs.univer.ai/ja-JP/guides/icons/vue.md)を参照してください。