chat

Nuxt AI Chatbot Template

Full-featured AI Chatbot Nuxt application with authentication, chat history, 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.

• Live demo
• Documentation

The chat template for Vue is on https://github.com/nuxt-ui-templates/chat-vue.

Features

• ⚡️ Streaming AI messages powered by the AI SDK with thinking/reasoning support
• 🤖 Multiple model support — Claude Haiku 5.5, Gemini 3 Flash and GPT-5.6 Luna via Vercel AI Gateway
• 🔍 Web search with built-in provider tools (Anthropic, Google, OpenAI), toggleable from the prompt menu along with extended thinking
• 🎤 Dictation in the prompt with live streaming transcription over WebSocket through AI Gateway
• 📊 Charts and weather tool calling with rich UI rendering
• 🔐 Authentication via GitHub OAuth using nuxt-auth-utils
• 💾 Chat history persistence using SQLite database (Turso in production) and Drizzle ORM
• 📎 File uploads with drag & drop using NuxtHub Blob (requires authentication)
• ✨ Markdown rendering with streaming code highlighting via Comark

Quick Start

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

Deploy your own

Setup

Make sure to install the dependencies:

pnpm install

Run database migrations:

pnpm db:migrate

[!NOTE] In production, configure your database connection. On Vercel, add the Turso integration to automatically provision TURSO_DATABASE_URL and TURSO_AUTH_TOKEN.

AI Integration

This template uses the Vercel AI SDK for streaming AI responses with support for multiple providers through Vercel AI Gateway. When deployed on Vercel, the AI Gateway is configured automatically.

For local development, set your API key in .env:

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. It 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_APP_SECRET=<output-of-openssl-rand-base64-32>

Blob Storage (Optional)

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

• Local filesystem (default for development, stored in .data/blob)
• Vercel Blob (auto-configured when deployed to Vercel)
• Cloudflare R2 (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>

[!NOTE] File uploads require authentication. See the NuxtHub Blob documentation for configuring other storage drivers.

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.