Univer Icons MCP
Подключите AI Agent к Univer Icons MCP для поиска иконок и генерации кода React или Vue.
Univer Icons MCP позволяет AI Agent искать иконки и изучать использование их компонентов. Опишите действие, например копирование выделенного содержимого или вставку изображения. AI Agent сможет выбрать иконку и сгенерировать код React или Vue.
Подключение AI Agent
Model Context Protocol (MCP) позволяет AI Agent подключаться к внешним инструментам. В AI Agent с поддержкой удалённого MCP добавьте сервер со следующими настройками:
| Настройка | Значение |
|---|---|
| Имя | 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, сохранив тонкие линии».
Использование иконки в проекте
Найдите полученное имя компонента в предпросмотре иконок. Проверьте, подходят ли интерфейсу форма, размер и цвета. Установите пакет для своего фреймворка и свяжите события кнопки с логикой приложения.
Порядок реализации описан в разделах Интеграция в React и Интеграция в Vue.
Насколько полезно это руководство?