Univer Icons MCP

Univer Icons MCP を使うと、AI Agent がアイコンを検索し、コンポーネントの使い方を確認できます。選択した内容のコピーや画像の挿入など、操作を説明してください。AI Agent がアイコンを選び、React または Vue のコードを生成できます。

AI Agent を接続する

Model Context Protocol（MCP）は、AI Agent を外部ツールに接続する仕組みです。リモート MCP に対応した AI Agent で、次の設定を使ってサーバーを追加します。

保存してサーバーを有効にすると、AI Agent は次のツールを利用できます。

必要なアイコンを説明する

使用するフレームワーク、アイコンが表す操作、サイズや色の要件を伝えます。例えば、次のように依頼できます。

Univer Icons MCP を使い、選択した内容をコピーする React ツールバーボタン用の単色アイコンを選んでください。サイズは 20 px、色はボタンの文字色を継承し、ボタンにアクセシブルな名前を付けてください。

Vue プロジェクトでは、次のように依頼できます。

Univer Icons MCP を使い、Vue 3 の塗りつぶし色ボタン用の 2 色アイコンを選んでください。主色を濃いグレー、アクセントを薄いグレーにして、インポートとコンポーネントのコードを生成してください。

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

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

返されたコンポーネント名をアイコンプレビューで検索し、形状、サイズ、色がインターフェースに合うことを確認します。フレームワーク用のパッケージをインストールし、ボタンのイベントをアプリケーションの処理に接続してください。

実装手順は React への組み込みまたは Vue への組み込みを参照してください。