chat

chat

Nuxt AI Chatbot Template made with Nuxt UI and Vercel AI SDK.

Stars: 275

Visit
 screenshot

Full-featured AI Chatbot Nuxt application with authentication, chat history, multiple pages, collapsible sidebar, keyboard shortcuts, light & dark mode, command palette and more. Built using Nuxt UI components and integrated with AI SDK v5 for a complete chat experience. Features include streaming AI messages, multiple model support via various AI providers, authentication via nuxt-auth-utils, chat history persistence using PostgreSQL database and Drizzle ORM, easy deploy to Vercel with zero configuration. The application is configured to use Vercel AI Gateway providing a unified API to access hundreds of AI models through a single endpoint with features like high reliability, spend monitoring, load balancing, and automatic retries and fallbacks between providers.

README:

Nuxt AI Chatbot Template

Nuxt UI

Full-featured AI Chatbot Nuxt application with authentication, chat history, multiple pages, collapsible sidebar, keyboard shortcuts, light & dark mode, command palette and more. Built using Nuxt UI components and integrated with AI SDK for a complete chat experience.

Nuxt AI Chatbot Template

Features

  • ⚡️ Streaming AI messages powered by the AI SDK
  • 🤖 Multiple model support via various AI providers with built-in AI Gateway support
  • 🔐 Authentication via nuxt-auth-utils
  • 💾 Chat history persistence using SQLite database (Turso in production) and Drizzle ORM
  • 🚀 Easy deploy to Vercel with zero configuration

Quick Start

npm create nuxt@latest -- -t ui/chat

Deploy your own

Deploy with Vercel

Setup

Make sure to install the dependencies:

pnpm install

Run database migrations:

pnpm db:migrate

AI Integration

This template uses the Vercel AI SDK for streaming AI responses with support for multiple providers through Vercel AI Gateway.

Set your AI provider configuration in .env:

# AI Configuration via Vercel AI Gateway (unified API for all providers)
AI_GATEWAY_API_KEY=<your-vercel-ai-gateway-api-key>

[!TIP] With Vercel AI Gateway, you don't need individual API keys for OpenAI, Anthropic, etc. The AI Gateway provides a unified API to access hundreds of models through a single endpoint with automatic load balancing, fallbacks, and spend monitoring.

Authentication (Optional)

This template uses nuxt-auth-utils for authentication with GitHub OAuth.

To enable authentication, create a GitHub OAuth application and set:

NUXT_OAUTH_GITHUB_CLIENT_ID=<your-github-oauth-app-client-id>
NUXT_OAUTH_GITHUB_CLIENT_SECRET=<your-github-oauth-app-client-secret>
NUXT_SESSION_PASSWORD=<your-password-minimum-32-characters>

Blob Storage (Optional)

This template uses NuxtHub Blob for file uploads, which supports multiple storage providers:

  • Local filesystem (default for development)
  • Vercel Blob (auto-configured when deployed to Vercel)
  • Cloudflare R2 (auto-configured when deployed to Cloudflare)
  • Amazon S3 (with manual configuration)

For Vercel Blob, assign a Blob Store to your project from the Vercel dashboard (Project → Storage), then set the token for local development:

BLOB_READ_WRITE_TOKEN=<your-vercel-blob-token>

For S3-compatible storage, set:

S3_ACCESS_KEY_ID=<your-access-key-id>
S3_SECRET_ACCESS_KEY=<your-secret-access-key>
S3_BUCKET=<your-bucket-name>
S3_REGION=<your-region>

[!NOTE] Without configuration, files are stored locally in .data/hub/blob during development.

Development Server

Start the development server on http://localhost:3000:

pnpm dev

Production

Build the application for production:

pnpm build

Locally preview production build:

pnpm preview

Check out the deployment documentation for more information.

Renovate integration

Install Renovate GitHub app on your repository and you are good to go.

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for chat

Similar Open Source Tools

For similar tasks

For similar jobs