openpencil/packages/docs/ru/programmable/ai-chat.md

---
title: Чат с ИИ
description: Встроенный помощник с более чем 90 инструментами для создания и изменения дизайна.
---

# Чат с ИИ

Нажмите <kbd>⌘</kbd><kbd>J</kbd> или <kbd>Ctrl</kbd> + <kbd>J</kbd>. Помощник умеет создавать фигуры, менять стили и компоновку, работать с компонентами и анализировать документ.

## Настройка

1. Откройте панель чата.
2. Нажмите значок настроек.
3. Добавьте модель и настройте поставщика, идентификатор модели, учётные данные и возможности.
4. Сохраните модель и назначьте её для роли **Design agent**.

Можно создать несколько переиспользуемых моделей и отдельно назначить их для дизайна, проверки, быстрых задач и обработки изображений. Модели, использующие одно подключение к поставщику, совместно используют сохранённые учётные данные.

### Поставщики

| Поставщик | Модели | Настройка |
|-----------|--------|-----------|
| **OpenRouter** | Claude, GPT, Gemini, DeepSeek, Qwen и другие | Ключ API с [openrouter.ai](https://openrouter.ai) |
| **Anthropic** | Claude Sonnet 4.6, Claude Opus 4.6 | Ключ API с [console.anthropic.com](https://console.anthropic.com) |
| **OpenAI** | GPT-5.3 Codex, GPT-4.1, o3, o4-mini | Ключ API с [platform.openai.com](https://platform.openai.com) |
| **Google AI** | Gemini 3.1 Pro, Gemini 3 Flash | Ключ API с [aistudio.google.dev](https://aistudio.google.dev) |
| **Z.ai** | GLM-5.1, GLM-5, GLM-4.7 и семейство GLM-4.5 | Ключ API из [документации Z.ai](https://docs.z.ai/devpack/quick-start) |
| **MiniMax** | MiniMax M3, M2.7, M2.7-highspeed, M2.5, M2.1 | Ключ API с [platform.minimax.io](https://platform.minimax.io/user-center/basic-information/interface-key) |
| **Совместимый с OpenAI** | Любая конечная точка в формате OpenAI API | Собственные базовый URL и ключ; можно выбрать Completions API или Responses API |
| **Совместимый с Anthropic** | Любая конечная точка в формате Anthropic API | Собственные базовый URL и ключ |

Отдельный сервер и подписка OpenPencil не требуются: запросы отправляются поставщику напрямую с вашим ключом. В браузере действуют правила CORS поставщика. Разные развёртывания моделей также по-разному поддерживают потоковые вызовы инструментов. Результаты проверок и инструкции находятся в разделе [Совместимость поставщиков и моделей BYOK](/programmable/byok-provider-compatibility).

### Внешние подключения MCP

В настольной версии агенты ACP могут использовать доверенные удалённые серверы [Model Context Protocol](https://modelcontextprotocol.io/). Откройте **Настройки → Подключения MCP**, добавьте именованную конечную точку Streamable HTTP, при необходимости сохраните токен Bearer и включите подключение.

Токен хранится в настроенном хранилище учётных данных, а не в обычных настройках, и загружается только при запуске сеанса ACP.

Удалённый сервер должен работать через HTTPS. Для локальной разработки разрешены адреса обратной петли через HTTP. Включайте только сервер, которому доверяете: его инструменты могут читать внешние данные и выполнять действия с переданными учётными данными. Встроенный сервер MCP для дизайна подключается автоматически.

## Возможности

Помощник использует более 90 инструментов:

- **Создание:** фреймы, фигуры, текст, компоненты и страницы; JSX для сложных макетов.
- **Стиль:** заливки, обводки, эффекты, прозрачность, радиусы углов и режимы наложения.
- **Компоновка:** автоматическая компоновка, сетка, выравнивание, интервалы и размеры.
- **Компоненты:** создание компонентов, экземпляров и наборов, управление переопределениями.
- **Переменные:** создание и изменение переменных, коллекций и режимов, привязка к заливкам.
- **Запросы:** поиск объектов, селекторы XPath, чтение свойств, получение списка страниц, шрифтов и выделения.
- **Проверка:** `get_jsx`, `diff_create` и `diff_jsx` для структурных различий, `diff_visual` для попиксельных различий, `describe` для анализа структуры, роли объекта и возможных проблем дизайна.
- **Анализ:** палитра, типографика, интервалы и повторяющиеся группы.
- **Экспорт:** PNG, SVG и JSX с классами Tailwind; визуальная проверка через `export_image`.
- **Векторы:** логические операции и изменение контуров.

## Визуальная проверка

После создания или изменения дизайна помощник может вызвать `export_image`, получить снимок результата и сопоставить его с исходным запросом. Так обнаруживаются проблемы компоновки, отсутствующие элементы и неверные цвета. Инструмент `diff_visual`, который включён по умолчанию, сравнивает изменённый объект с эталонной копией и возвращает изменившиеся пиксели и область, поэтому помощник может убедиться, что правка не вышла за пределы цели.

## Примеры запросов

- «Создай карточку с заголовком, описанием и синей кнопкой».
- «Сделай одинаковый радиус углов у всех кнопок на этой странице».
- «Какие шрифты используются в этом файле?»
- «Замени фон выделенного фрейма на градиент от синего к фиолетовому».
- «Экспортируй выделенный фрейм в SVG».
- «Найди все текстовые объекты с размером шрифта меньше 12».
- «Опиши роль выделенного компонента».
- «Покажи JSX этого фрейма».

## Советы

- Перед запросом выделите нужные объекты: помощник видит выделение.
- Точно указывайте цвета, размеры и положение.
- В одном сообщении можно изменить несколько объектов.
- Пока идёт ответ, можно смотреть другие страницы: помощник продолжает работать на той странице, где было отправлено сообщение, а его предпросмотры появятся, когда вы вернётесь. Пока вы на другой странице, чат сообщает, с какой страницей работает помощник, и предлагает кнопку **Перейти к странице**. Если помощник сам переключает страницу, ваш вид следует за ним.
- Если результат не подходит, используйте отмену.
- После каждого вызова инструмента компоновка пересчитывается автоматически.