ai chatbot supabase

Next.js AI Chatbot x Supabase

Шаблон чат-бота с открытым исходным кодом, построенный с Next.js и AI SDK от Vercel.

Особенности · Поставщики моделей · развернуть собственное · работать локально

Функции

• Next.js App Router
  • Продвинутая маршрутизация для бесшовной навигации и производительности
  • Компоненты сервера React (RSC) и действия сервера для рендеринга на стороне сервера и повышения производительности
  • Встроенные оптимизации для изображений, шрифтов и статических активов
• AI SDK
  • Unified API для генерации текста, структурированных объектов и вызовов инструментов с LLMS
  • Крючки для создания динамического чата и генеративных пользовательских интерфейсов
  • Поддерживает OpenAI (по умолчанию), антропной, кожух и другим поставщикам моделей
  • Встроенная потоковая поддержка для ответов в реальном времени
• shadcn/ui
  • Стиль с Tailwind CSS
  • Примитивы компонентов из пользовательского интерфейса Radix для доступности и гибкости
  • Настраиваемые темы и поддержка темного режима
• Supabase Integration
  • Supabase Postgres DB для надежной истории чата и хранения пользовательских данных
  • Хранилище файлов Supabase для эффективного управления файлами и загрузки
  • Supabase Auth с несколькими поставщиками аутентификации и безопасности на уровне строк
  • Подписки в реальном времени для живых обновлений

Поставщики моделей

Этот шаблон поставляется с OpenAI gpt-4o в качестве дефолта. Тем не менее, с AI SDK вы можете переключить поставщиков LLM на OpenAI, антропический, совместный и многое другое с несколькими строками кода.

Youtube obstering video

Это видео проводит вас через то, как настроить AI Chatbot с помощью Supabase с нуля. Мы будем:

• Настройка нового проекта Supabase с использованием CLI
• Свяжите это с нашим приложением
• Настройка переменных среды
• Запустите миграции DB для настройки схемы

Начиная

Quick Start Video Guide

Посмотрите наше всеобъемлющее видео, чтобы быстро настроить среду разработки и понять структуру проекта: смотреть учебное пособие

Предварительные условия

Прежде чем начать, убедитесь, что у вас установлено следующее:

• Node.js 18+
• PNPM ( npm install -g pnpm )
• Git
• Редактор кода (мы рекомендуем VS код)

Настройка Supabase

1. Установите CLI Supabase Выберите метод установки для вашей операционной системы:

   • Mac:

     brew install supabase/tap/supabase

   • Windows (PowerShell):

     scoop bucket add supabase https: // github.com / supabase / scoop - bucket.git
     scoop install supabase

   • Linux:

     brew install supabase/tap/supabase

   • NPM/BUN:

     npx supabase < command >

2. Создать проект Supabase

    # Create a new project
   npx supabase projects create -i " ai-chatbot-supabase "
   
   # Note: Save the project ID and database password shown after creation

   Идентификатор вашей организации можно найти в URL -адресах панели инструментов Supabase после выбора организации

3. Свяжите свой проект

    # Initialize Supabase configuration
   npx supabase init
   
   # Link to your remote project
   npx supabase link --project-ref your-project-id

   Вам понадобится ваш идентификатор проекта и пароль базы данных с шага 2.

4. Настройка переменных среды Создайте файл .env.local со следующими переменными:

   NEXT_PUBLIC_SUPABASE_URL= < api-url >
   NEXT_PUBLIC_SUPABASE_ANON_KEY= < anon-key >

   Найдите эти значения в панели инструментов проекта Supabase Project в соответствии с настройками проекта> API

5. Инициализировать схему базы данных

    # Apply all migrations
   supabase db push
   
   # Verify the schema
   supabase db reset --dry-run

Местное развитие

1. Клонировать и установить

   git clone https://github.com/your-username/ai-chatbot-supabase.git
   cd ai-chatbot-supabase
   pnpm install

2. Начать сервер разработки

   pnpm dev

   Приложение будет доступно по адресу http: // localhost: 3000

3. Команды разработки

   pnpm build          # Build for production
   pnpm start          # Start production server
   pnpm lint          # Run ESLint
   pnpm type-check    # Run TypeScript checks

Поиск неисправностей

Общие проблемы и решения:

• Проблемы с подключением Supabase

  • Убедитесь, что переменные вашей среды правильно устанавливаются
  • Проверьте, активна ли база данных на приборной панели Supabase

• Построить ошибки

  • Clear .next folder: rm -rf .next
  • Очистить установку зависимости: pnpm clean-install

Для получения дополнительной помощи, откройте проблему.

Развернуть с Vercel

Предварительные условия

• Аккаунт Vercel
• Учетная запись Supabase
• Ключ API OpenAI

Шаги развертывания

1. Вилка репозитория

   https://github.com/your-username/ai-chatbot-supabase

2. Настройте проект Vercel

   • Перейти на панель панели Vercel
   • Нажмите «Новый проект»
   • Импортируйте раздвоенный репозиторий
   • Выберите «Далее.js» в качестве структуры

3. Установите переменные среды в настройках проекта Vercel, добавьте следующие переменные среды:

 # Required
NEXT_PUBLIC_SUPABASE_URL=           # From Supabase project settings
NEXT_PUBLIC_SUPABASE_ANON_KEY=      # From Supabase project settings
OPENAI_API_KEY=                     # Your OpenAI API key

4. Настройте настройки сборки в настройках проекта Vercel:

   • Команда сборки: pnpm build
   • Выводный каталог: .next
   • Команда установки: pnpm install

5. Развертывать

   • Нажмите «Развертывание»
   • Vercel автоматически построит и развернет ваше приложение