ai chatbot supabase

Next.js ai chatbot x supabase

Um modelo de chatbot AI de código aberto construído com o Next.js e o AI SDK by vercel.

Recursos · Provedores de modelos · Implante o seu próprio · Executando localmente

Características

• Roteador de aplicativos em Next.js
  • Roteamento avançado para navegação e desempenho sem costura
  • Componentes do servidor React (RSCs) e ações do servidor para renderização do lado do servidor e aumento do desempenho
  • Otimizações internas para imagens, fontes e ativos estáticos
• AI SDK
  • API unificado para gerar texto, objetos estruturados e chamadas de ferramentas com LLMS
  • Ganchos para criar bate -papo dinâmico e interfaces de usuário generativas
  • Suporta o OpenAI (padrão), antropia, coere e outros provedores de modelos
  • Suporte de streaming interno para respostas de IA em tempo real
• shadcn/ui
  • Estilando com CSS de Tailwind
  • Primitivos componentes da UI do Radix para acessibilidade e flexibilidade
  • Temas personalizáveis e suporte do modo escuro
• Integração Supabase
  • Supabase Postgres DB para histórico de bate -papo robusto e armazenamento de dados do usuário
  • Armazenamento de arquivos Supabase para gerenciamento eficiente de arquivos e uploads
  • Supabase Auth com múltiplos provedores de autenticação e segurança no nível da linha
  • Assinaturas em tempo real para atualizações ao vivo

Provedores de modelos

Este modelo é enviado com o OpenAI gpt-4o como padrão. No entanto, com o AI SDK, você pode trocar os provedores de LLM para o OpenAI, Antrópico, Coere e muito mais com apenas algumas linhas de código.

Vídeo de integração do YouTube

Este vídeo o leva a como configurar o AI Chatbot com Supabase do zero. Vamos:

• Configure um novo projeto Supabase usando a CLI
• Vincule -o ao nosso aplicativo
• Variáveis de ambiente de configuração
• Execute as migrações de banco de dados para configurar o esquema

Começando

Guia de vídeo de início rápido

Assista ao nosso vídeo abrangente de integração para configurar rapidamente seu ambiente de desenvolvimento e entender a estrutura do projeto: Assista ao tutorial

Pré -requisitos

Antes de começar, verifique se você tem o seguinte instalado:

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

Configuração do Supabase

1. Instale o supabase CLI Escolha o método de instalação para o seu sistema operacional:

   • 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. Crie um projeto Supabase

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

   O ID da sua organização pode ser encontrado no URL do painel Supabase depois de selecionar uma organização

3. Vincular seu projeto

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

   Você precisará do seu ID do projeto e senha do banco de dados da etapa 2.

4. Configurar variáveis de ambiente Crie um arquivo .env.local com as seguintes variáveis:

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

   Encontre esses valores no seu painel de projeto Supabase em Configurações do projeto> API

5. Inicialize o esquema do banco de dados

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

Desenvolvimento local

1. Clonar e instalar

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

2. Inicie o servidor de desenvolvimento

   pnpm dev

   O aplicativo estará disponível em http: // localhost: 3000

3. Comandos de desenvolvimento

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

Solução de problemas

Problemas e soluções comuns:

• Problemas de conexão Supabase

  • Verifique suas variáveis de ambiente estão definidas corretamente
  • Verifique se o banco de dados está ativo no painel supabase

• Construir erros

  • Pasta Clear .next : rm -rf .next
  • Dependências de instalação limpa: pnpm clean-install

Para mais ajuda, abra um problema.

Implantar com vercel

Pré -requisitos

• Uma conta vercel
• Uma conta Supabase
• Uma chave de API OpenAi

Etapas de implantação

1. Fork o repositório

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

2. Configure o projeto Vercel

   • Vá para o Painel de Vercel
   • Clique em "Novo Projeto"
   • Importe seu repositório bifurcado
   • Selecione "Next.js" como a estrutura

3. Defina variáveis de ambiente em suas configurações de projeto de vercel, adicione as seguintes variáveis de ambiente:

 # 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. Definir configurações de criação nas configurações do projeto de vercel:

   • Comando de construção: pnpm build
   • Diretório de saída: .next
   • Instalar Comando: pnpm install

5. Implantar

   • Clique em "Implantar"
   • A Vercel será construir e implantar automaticamente seu aplicativo