ai chatbot supabase

Next.js ai chatbot x supabase

Una plantilla de chatbot de IA de código abierto construida con Next.js y el AI SDK de Vercel.

Características · Proveedores de modelos · Implementar su propia · Ejecutar localmente

Características

• Enrutador de aplicaciones next.js
  • Enrutamiento avanzado para navegación y rendimiento sin problemas
  • React Components (RSC) y acciones del servidor para la representación del lado del servidor y un mayor rendimiento
  • Optimizaciones incorporadas para imágenes, fuentes y activos estáticos
• AI SDK
  • API unificada para generar texto, objetos estructurados y llamadas de herramientas con LLMS
  • Ganchos para construir chat dinámico e interfaces generativas de usuarios
  • Admite OpenAI (predeterminado), antrópico, cohere y otros proveedores de modelos
  • Soporte de transmisión incorporado para respuestas de IA en tiempo real
• shadcn/ui
  • Estilo con viento de cola CSS
  • Primitivas de componentes de Radix UI para accesibilidad y flexibilidad
  • Temas personalizables y soporte de modo oscuro
• Integración de Supabase
  • Supabase Postgres DB para un historial de chat robusto y almacenamiento de datos del usuario
  • Almacenamiento de archivos de Supabase para administración y carga de archivos eficientes
  • Auth Supabase con múltiples proveedores de autenticación y seguridad a nivel de fila
  • Suscripciones en tiempo real para actualizaciones en vivo

Proveedores de modelos

Esta plantilla se envía con OpenAI gpt-4o como predeterminada. Sin embargo, con el AI SDK, puede cambiar los proveedores de LLM a OpenAi, antrópico, cohere y muchos más con solo unas pocas líneas de código.

Video de incorporación de YouTube

Este video lo guía a través de cómo configurar el chatbot Ai con Supabase desde cero. Lo haremos:

• Configurar un nuevo proyecto de Supabase utilizando la CLI
• Enlace a nuestra aplicación
• Configuración de variables de entorno
• Ejecute las migraciones de DB para configurar el esquema

Empezando

Guía de video de inicio rápido

Mire nuestro video integral de incorporación para configurar rápidamente su entorno de desarrollo y comprender la estructura del proyecto: Mire el tutorial

Requisitos previos

Antes de comenzar, asegúrese de tener lo siguiente instalado:

• Nodo.js 18+
• PNPM ( npm install -g pnpm )
• Git
• Un editor de código (recomendamos vs código)

Configuración de Supabase

1. Instale la CLI de Supabase Elija el método de instalación para su sistema operativo:

   • Impermeable:

     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. Crear un proyecto de Supabase

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

   Su ID de organización se puede encontrar en la URL del tablero de Supabase después de seleccionar una organización

3. Enlace su proyecto

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

   Necesitará su identificación de proyecto y contraseña de base de datos desde el paso 2.

4. Configurar las variables de entorno Cree un archivo .env.local con las siguientes variables:

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

   Encuentre estos valores en su Panel de Proyecto Supabase en Configuración del proyecto> API

5. Inicializar el esquema de la base de datos

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

Desarrollo local

1. Clon e instalar

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

2. Iniciar servidor de desarrollo

   pnpm dev

   La aplicación estará disponible en http: // localhost: 3000

3. Comandos de desarrollo

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

Solución de problemas

Problemas y soluciones comunes:

• Problemas de conexión de Supabase

  • Verifique que las variables de su entorno estén correctamente establecidas
  • Compruebe si la base de datos está activa en el tablero de Supabase

• Construir errores

  • Carpeta Clear .next : rm -rf .next
  • Dependencias de instalación limpia: pnpm clean-install

Para obtener más ayuda, abra un problema.

Desplegar con Vercel

Requisitos previos

• Una cuenta de Vercel
• Una cuenta de Supabase
• Una llave de API de OpenAI

Pasos de implementación

1. Bifurca el repositorio

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

2. Configurar el proyecto Vercel

   • Ir al tablero Vercel
   • Haga clic en "Nuevo proyecto"
   • Importar su repositorio bifurcado
   • Seleccione "Next.js" como marco

3. Establezca variables de entorno en la configuración de su proyecto Vercel, agregue las siguientes variables de entorno:

 # 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. Configurar la configuración de compilación en la configuración de su proyecto Vercel:

   • Comando de compilación: pnpm build
   • Directorio de salida: .next
   • Comando de instalación: pnpm install

5. Desplegar

   • Haga clic en "Implementar"
   • Vercel construirá e implementará automáticamente su aplicación