chat-vue

chat-vue

Vue AI Chatbot Template made with Nuxt UI, Vercel AI SDK, Vite and Nitro.

Stars: 61

Visit
 screenshot

Full-featured AI Chatbot Vue 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, authentication via GitHub OAuth, chat history persistence, markdown rendering, and easy deployment to Vercel with zero configuration.

README:

Vue AI Chatbot Template

Nuxt UI Nitro

Full-featured AI Chatbot Vue 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.

Vue AI Chatbot Template

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 GitHub OAuth using Nitro server routes and httpOnly cookies
  • 💾 Chat history persistence using PostgreSQL database and Drizzle ORM
  • 💬 Markdown rendering using vue-markdown-render
  • 🚀 Easy deploy to Vercel with zero configuration

Quick Start

npx create-nitro-app -t gh:nuxt-ui-templates/chat-vue

Deploy your own

Deploy with Vercel

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)
GITHUB_OAUTH_CLIENT_ID=<your-github-oauth-app-client-id>
GITHUB_OAUTH_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>

# Private key used to encrypt session cookie (minimum 32 characters)
SESSION_SECRET=<your-secret-of-32-characters>

[!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. Deploy automatically on every push

[!NOTE] Make sure to configure your PostgreSQL database connection and run migrations in your production environment.

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.

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for chat-vue

Similar Open Source Tools

For similar tasks

For similar jobs