# Онлайн-чат в проект v0 (Vercel): виджет Моночата для Next.js

v0 генерирует приложения на Next.js (App Router) и публикует их на Vercel. Чат поддержки Моночата подключается через `next/script` в корневом `app/layout.tsx`: v0 сделает это сам по промпту ниже. Это не интеграция из каталога v0, а обычная вставка виджета. Сообщения с сайта, из Telegram, VK, MAX и почты приходят в один интерфейс, ИИ-сотрудник отвечает по базе знаний. Тариф «Старт» — 0 ₽.

## Как установить

1. Войдите на [monochat.ru/login](https://monochat.ru/login) → «Каналы» → «Виджет».
2. Укажите домен сайта (например, `my-app.vercel.app` или свой) и скопируйте ключ виджета.
3. В чате v0 вставьте промпт ниже со своим ключом.
4. Нажмите Deploy, откройте сайт на Vercel и проверьте кнопку чата справа внизу.

## Промпт для v0

```text
Подключи онлайн-чат поддержки Моночат (monochat.ru) ко всему приложению.
В app/layout.tsx добавь внутри <body>, после {children}:
import Script from "next/script";
<Script src="https://monochat.ru/widget/ВАШ_WIDGET_KEY.js" strategy="afterInteractive" />
Ключ публичный, его можно оставить в коде или вынести в NEXT_PUBLIC_MONOCHAT_WIDGET_KEY.
Не добавляй скрипт в отдельные страницы и не дублируй его.
Кнопки «Связаться» пусть вызывают window.Monochat?.open() (это клиентский код, нужен "use client").
Документация: https://monochat.ru/docs/v0.md
```

## Код

```tsx
// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ru">
      <body>
        {children}
        <Script src="https://monochat.ru/widget/ВАШ_WIDGET_KEY.js" strategy="afterInteractive" />
      </body>
    </html>
  );
}
```

## Превью и домены

Виджет работает только на доменах из настроек виджета и на `localhost`. Встроенное превью v0 и preview-деплои Vercel идут с других адресов. Если чат нужен и там, добавьте эти домены в «Домены сайтов» или проверяйте на основном деплое.

## Частые вопросы

### v0 официально поддерживает Моночат?

Нет, это не интеграция из каталога v0. Агент добавляет обычный скрипт виджета в layout, как в любом Next.js-проекте.

### Почему next/script, а не тег script?

`next/script` со стратегией `afterInteractive` загружает виджет после гидратации и не замедляет первый рендер. Виджет сам отслеживает переходы между страницами.

### Нужно ли что-то настраивать на Vercel?

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

### Можно ли регистрироваться через API?

Да, через [Agent API](https://monochat.ru/docs/agent-api), если агент умеет отправлять HTTP-запросы. Для v0 проще взять ключ в кабинете.

## Ещё по теме

- [Next.js: App Router и Pages Router](https://monochat.ru/docs/nextjs)
- [Универсальный промпт для ИИ-агентов](https://monochat.ru/docs/ai-prompt)
- [MCP-сервер](https://monochat.ru/docs/mcp)
- [Демо виджета](https://monochat.ru/demo)