Онлайн-чат в проект 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 → «Каналы» → «Виджет».
2. Укажите домен сайта (например, my-app.vercel.app или свой) и скопируйте ключ виджета.
3. В чате v0 вставьте промпт ниже со своим ключом.
4. Нажмите Deploy, откройте сайт на Vercel и проверьте кнопку чата справа внизу.

Промпт для v0

Подключи онлайн-чат поддержки Моночат (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

Код

// 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, если агент умеет отправлять HTTP-запросы. Для v0 проще взять ключ в кабинете.

Ещё по теме

• Next.js: App Router и Pages Router
• Универсальный промпт для ИИ-агентов
• MCP-сервер
• Демо виджета