# Univer Icons MCP

> Подключите AI Agent к Univer Icons MCP для поиска иконок и генерации кода React или Vue.

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

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

- Requested language: `ru-RU`

- Content language: `ru-RU`

- Documentation version: `1.2.0`

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

---

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, сохранив тонкие линии».

## Использование иконки в проекте

Найдите полученное имя компонента в [предпросмотре иконок](https://docs.univer.ai/ru-RU/guides/icons/all-icons.md). Проверьте, подходят ли интерфейсу форма, размер и цвета. Установите пакет для своего фреймворка и свяжите события кнопки с логикой приложения.

Порядок реализации описан в разделах [Интеграция в React](https://docs.univer.ai/ru-RU/guides/icons/react.md) и [Интеграция в Vue](https://docs.univer.ai/ru-RU/guides/icons/vue.md).