Nuxt AI Chatbot Template

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.

• Live demo
• Documentation

<a href="https://chat-template.nuxt.dev/" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://ui.nuxt.com/assets/templates/nuxt/chat-dark.png"> <source media="(prefers-color-scheme: light)" srcset="https://ui.nuxt.com/assets/templates/nuxt/chat-light.png"> <img alt="Nuxt AI Chatbot Template" src="https://ui.nuxt.com/assets/templates/nuxt/chat-light.png"> </picture> </a>

Features

• ⚡️ Streaming AI messages powered by the AI SDK v5
• 🤖 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

Setup

Make sure to install the dependencies:

pnpm install

Set up your environment variables by creating a .env file:

# Database
DATABASE_URL=<your-postgresql-database-url>

# GitHub OAuth (optional, for authentication)
NUXT_OAUTH_GITHUB_CLIENT_ID=<your-github-oauth-app-client-id>
NUXT_OAUTH_GITHUB_CLIENT_SECRET=<your-github-oauth-app-client-secret>

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

# Password for nuxt-auth-utils (minimum 32 characters)
NUXT_SESSION_PASSWORD=<your-password>

[!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.

To add authentication with GitHub, you need to create a GitHub OAuth application.

Run database migrations:

pnpm db:migrate

Development

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

pnpm dev

Production

Build the application for production:

pnpm build

Locally preview production build:

pnpm preview

Deploy to Vercel:

npx vercel

Or connect your repository to Vercel for automatic deployments:

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Configure your environment variables in the Vercel dashboard
4. Create a Turso database and connect it to your Vercel project
5. Deploy automatically on every push

The application is configured to use Vercel AI Gateway which provides:

• Unified API: Access hundreds of AI models through a single endpoint
• High Reliability: Automatic retries and fallbacks between providers
• Spend Monitoring: Track usage and set budgets across all providers
• Load Balancing: Distribute requests for optimal performance

Simply configure your AI_GATEWAY_API_KEY in your Vercel environment variables for production use.

AI Gateway Setup

1. Create a Vercel account at vercel.com
2. Navigate to your AI Gateway settings
3. Generate an API key for your project
4. Add the key to your environment variables as AI_GATEWAY_API_KEY

The AI Gateway automatically handles authentication with all supported AI providers including OpenAI, Anthropic, Google, xAI, and many others.

Renovate integration

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