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…
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.
💾 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.
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.
![renovate[bot]](https://avatars.githubusercontent.com/in/2740?v=4)
![nuxthub-admin[bot]](https://avatars.githubusercontent.com/in/854092?v=4)
评论