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

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

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

Deploy your own

Setup

Make sure to install the dependencies:

1
pnpm install

Run database migrations:

1
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:

1
# AI Configuration via Vercel AI Gateway (unified API for all providers)
2
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:

1
NUXT_OAUTH_GITHUB_CLIENT_ID=<your-github-oauth-app-client-id>
2
NUXT_OAUTH_GITHUB_CLIENT_SECRET=<your-github-oauth-app-client-secret>
3
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:

1
BLOB_READ_WRITE_TOKEN=<your-vercel-blob-token>

For S3-compatible storage, set:

1
S3_ACCESS_KEY_ID=<your-access-key-id>
2
S3_SECRET_ACCESS_KEY=<your-secret-access-key>
3
S3_BUCKET=<your-bucket-name>
4
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:

1
pnpm dev

Production

Build the application for production:

1
pnpm build

Locally preview production build:

1
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.