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 Pro components and integrated with Workers AI for a complete chat experience.

• Live demo
• Documentation

Features

• ⚡️ Streaming AI messages powered by the Vercel AI SDK
• 🤖 Multiple model support via Workers AI with support for AI Gateway
• 🔐 Authentication via nuxt-auth-utils
• 💾 Chat history persistence using NuxtHub database and Drizzle ORM
• 🚀 One-click deploy to your Cloudflare account with NuxtHub: deploy now

Quick Start

npx nuxi@latest init -t github:nuxt-ui-pro/chat

Setup

Make sure to install the dependencies:

pnpm install

Next, link a NuxtHub project (even if not deployed) to access AI models in development:

npx nuxthub link

Tip

It works with free Cloudflare and NuxtHub accounts.

To add authentication with GitHub, you need to create a GitHub OAuth application and then fill the credentials in your .env:

NUXT_OAUTH_GITHUB_CLIENT_ID=<your-github-oauth-app-client-id>
NUXT_OAUTH_GITHUB_CLIENT_SECRET=<your-github-oauth-app-client-secret>

Development

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

pnpm dev

Production

Build the application for production:

pnpm build

Important

Make sure to add your Nuxt UI Pro License in order to build for production

Locally preview production build:

pnpm preview

Deploy to your Cloudflare account with zero configuration:

npx nuxthub deploy

Note

NuxtHub will automatically spawn a D1 database and apply the database migrations when deploying your project.

Optionally, you can create a Cloudflare AI Gateway to have usage analytics and the ability to cache response to reduce costs. Once created, you can add the NUXT_CLOUDFLARE_GATEWAY_ID environment variable with the named of your gateway.

Renovate integration

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